Как создать проект Laravel + Vuejs + SSR?

Добрый день!
Моя задача: создать seo-дружелюбный коммерческий проект с использованием laravel + vuejs + mysql. Сайт мультиязычный. Для оптимальной загрузки каждой из страниц - сделать отдельные js и css файлы.

Но перед мной возникло несколько проблем:
1. Если использовать вариант: ларовские вюхи + компоненты vuejs, все что я увижу в коде страницы (бот тоже) - только спиннер компонента. Соответственно нужно использовать рендеринг на стороне сервера.
2. Если использовать рендеринг - роутинг нужно делать и на vuejs, насколько я понял. Получается мне нужно будет дублировать роуты и на стороне ларавела, и на стороне вю? И если уж придётся делать роуты vuejs, тогда может делать в ключе spa, без перезагрузки?
3. Какой вид рендеринга лучше/могу использовать среди: nuxt, vue-server-renderer, vueneue/ssr и тд?
4. Если у меня должно быть несколько языков на сайте, то локализацию делать на стороне вю и ларавел?
5. Как будет работать роутинг (при варианте без перезагрузки), если разбить под каждую страницу отдельный js? При переходах будет рендерится только та инфа, которая необходима и принадлежит данной странице? Потому-что есть пока опыт в реализации обычного spa с глобальным js под все страницы. Соответственно первая загрузка была долгой, так как грузила скрипты и стили всех страниц.

Я не прошу об готовых решениях с Вашей стороны, хотя бы источники где я могу найти ответы на свои вопросы или советы от Вас) Заранее спасибо!)
  • Вопрос задан
  • 9285 просмотров
Пригласить эксперта
Ответы на вопрос 2
delphinpro
@delphinpro
frontend developer
На ларке пилишь чистый API, на Vue полноценный SPA. Роутинг по сайту делаешь только в клиенте. Для SSR либо ставишь ноду, либо v8js (пример SSR с v8js). Вот и все дела.

Соответственно первая загрузка была долгой, так как грузила скрипты и стили всех страниц.

Ну используйте code splitting в вебпаке, чтобы попилить бандл на отдельные чанки.
Ответ написан
@bagzon
Backend PHP, NodeJs, JS
Ну в моем понимании на ларавеле будет чистый API (rest or graphql)
далее отдельно совсем лежит nuxt приложуха (ну это если по простому делать) внутри которой весь твой фронт, и локализации, ну или ты можешь синхронизировать между ларавелом и нукстом единые файлы локализации.
На фронт смотрит nuxt, на него приходят все запросы, внутри он делает запросы к ларавелу, и рисует vue (для этого есть отдельные методы, читай документацию).
Если же переходы происходят на клиенте, то уходят стандартные ajax запросы на сервис ларавела. Перезагрузили страницу, nuxt сделал ajax запрос к сервису ларавела и отдал уже отрендеренный контент.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы