Когда вы используете Nuxt 3 с серверным рендерингом (SSR), вам может показаться, что при обновлении страницы отображаются два компонента. Но на самом деле это связано с процессом инициализации приложения и работой самого Nuxt.
При инициализации приложения с использованием Nuxt 3 SSR, серверный рендеринг выполняется для генерации HTML-разметки для вашего приложения. Затем клиентский JavaScript выполняет ряд шагов для гидратации приложения на клиентской стороне.
Во время гидратации Nuxt добавляет скелетон (skeleton), который представляет собой заглушку, показывающую промежуточное состояние приложения. Этот скелетон обычно показывается во время временной задержки, которая возникает из-за перехода от серверного рендеринга к клиентскому.
Таким образом, при обновлении страницы вы видите два компонента: первый компонент — это результат серверного рендеринга, и второй компонент — это скелетон, который замещает первый компонент до его полной гидратации клиентским JavaScript.
Когда гидратация завершена, скелетон исчезает, и первоначальный компонент отображается без промежуточного состояния. Чтобы пользовательское взаимодействие в приложении было максимально плавным и пользовательский опыт был улучшен, Nuxt использует этот подход с двумя компонентами.
Этот процесс может быть изменим, если вы захотите скрыть скелетон или настроить время его отображения. В Nuxt 3 это можно сделать с помощью использования промежуточной страницы, а также подключения соответствующих модулей или стилей для кастомизации скелетона.
Надеюсь, что эта информация поможет вам лучше понять, почему при обновлении страницы в Nuxt 3 с SSR может отображаться два компонента.