SSR: когда, зачем и для чего. На примере Vue

[DreaMinder]

А как варниш узнает что пора инвалидировать кэш?
У меня на одном проекте работает nuxt-пререндер как кэш… Да, велосипед, но задачу выполняет и можно гибко кодить нужную логику в отличии от прокси-кэшей.

[anton_umbrellait]

В данном случае мы использовали суррогатные ключи, по типу контента, персональный ключ на основе id, а также еще пару специфичных.

Админка, в которой происходит редактирование контента, на основе этих ключей производила сброс кеша.

Например, пост мог быть помечен `post/425053 posts channel/vuejs tag/ssr tag/vue`. Разные ключи необходимы, потому что один и тот же пост может быть показан как на детальной странице, так и в списке постов на главной, в списке канала или по тегу.

[Aldarund]

Для vue есть nuxt.js. Там ssr из коробки, как и много чего еще

[metalim]

Не поверишь. Статья как раз про это.

[Aldarund]

Поверю) Я чет просто доглядел до vue init и подумал что это про руками ssr делать. Просто для бутстрапа накста использовать надо create nuxt app а не устаревший темплейт для vue init

[polyakov_andrey]

ребята, в что делать если бекенд на php?

[iit]

Можно например не использовать ssr, можно копнуть в сторону react-php и сделать vue php

А можно написать сервис на js которая будет тупо прослойкой которая стучится на api того-же laravel или yii2

[Chris_Griffin]

И это будет CSR, нет?

[TheRat]

V8 Javascript Engine for PHP

[Chris_Griffin]

Вы этим сами пользовались? И как впечатления?

[TheRat]

Пользуюсь, впечатления очень положительные.

[anton_umbrellait]

СтрадатьНа самом деле зависит от многих факторов и от того, чего вы хотите добиться. В простейшем случае, можно оставить серверный рендеринг на PHP, а также выставить дублирующие API ендпоинты. Страница отрендерилась, клиентский фреймворк дальше работает как SPA, обращаясь к API. Но в этом случае придется дублировать как контроллеры на сервере, ведь нужно возвращать как сырые данные, так и полностью отрендеренную страницу, а также поддерживать клиентское приложение.
В целом, если нет понимания что делать, лучше оставить как есть.

[Zero-Tolerance]

Доброго дня, как вы бы реализовали получение данных для всех компонентов на странице во время рендера на стороне сервера?

Допустим у нас есть layout-default который принимает в себя страницу с постами, имеет в себе меню, какой-то компонент в сайдбаре и что-то еще, что требует обращение к api. Собирать все asyncData в массив промисов и ждать исполнения всех запрос на мой взгляд нерационально, возможно есть хороший способ собрать один запрос к апи, вместо 10?

Я реализовал это, только не уверен в правильности решения.

[DreaMinder]

в nuxt для этого есть action в сторе — nuxtServerInit

[anton_umbrellait]

Доброго.

Если я правильно понял вопрос, то есть возможность использовать nuxtServerInit action. В документации, как раз похожий пример есть:

actions: {
  async nuxtServerInit({ dispatch }) {
    await dispatch('core/load')
  }

  // ...
}

Действие nuxtServerInit вызывается только на сервере. В свою очередь в нем мы можем
вызвать другие необходимые нам события, содержащие обращения к API, и вызывающие мутация нашего store.

Данные, соответственно будут лежать в store, а не локально в компоненте.

[Zero-Tolerance]

спасибо

[Hig]

А как быть с всевозможными редиректами и 404?