Почему при переходе (или перезагрузке) на страницу — сначала рендерится главная страница, а после — текущая?

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

Nuxt.js является фреймворком для разработки приложений на основе Vue.js. Он позволяет писать код, используя принципы универсального (isomorphic) рендеринга, то есть код выполняется как на клиентской стороне (browser), так и на серверной стороне (server).

Когда вы делаете переход на страницу или перезагружаете страницу в Nuxt.js, происходит следующий процесс:

1. Сначала происходит выполнение кода на сервере. Nuxt.js генерирует HTML-разметку для главной страницы на сервере и отправляет ее клиенту.

2. После загрузки HTML-разметки главной страницы на клиенте, происходит инициализация Vue.js и последующий рендеринг страницы на клиенте. Теперь Vue.js берет на себя управление DOM-элементами и обрабатывает события на клиентской стороне.

3. При переходе на другую страницу в Nuxt.js используется система маршрутизации Vue Router. Когда пользователь переходит на другую страницу, выполняется новый запрос к серверу и происходит тот же процесс: генерация HTML-разметки на сервере и рендеринг на клиенте.

Таким образом, сначала рендерится главная страница, потому что Nuxt.js по умолчанию использует подход "первая загрузка на сервере". Это позволяет получить преимущества универсального рендеринга, такие как более быстрая загрузка страницы, улучшенная оптимизация для поисковых систем и лучшая производительность на слабых устройствах.

Однако, существует возможность использования режима "полная одностраничное приложение" (SPA mode) в Nuxt.js. В этом режиме все рендеринг происходит на клиентской стороне, и главная страница не будет рендериться при каждом переходе на новую страницу. Чтобы включить этот режим, необходимо настроить плагины и конфигурацию Nuxt.js соответствующим образом.

В целом, при переходе или перезагрузке страницы в Nuxt.js сначала рендерится главная страница, а затем текущая страница из-за использования подхода "первая загрузка на сервере" и принципов универсального рендеринга. Это позволяет достичь лучшей производительности и оптимизации приложения.