Как работает SSR в Nuxt?

Вопрос

Как работает серверный рендеринг (SSR) в Nuxt?

Короткий ответ

При SSR сервер выполняет Vue-приложение и генерирует готовый HTML на каждый запрос. Браузер сразу получает отрисованную страницу, а затем Vue "гидратирует" её на клиенте, делая интерактивной.

Подробный ответ

Режим Nuxt по умолчанию — universal rendering: один и тот же код компонентов выполняется и на сервере (для первого рендера), и на клиенте (для последующей интерактивности и переходов между страницами).

Этапы запроса страницы:

1. Сервер выполняет компоненты, включая useAsyncData/useFetch, и строит HTML.
2. Данные, загруженные на сервере, сериализуются в payload и встраиваются в HTML.
3. Браузер получает готовый HTML — пользователь видит контент мгновенно, до загрузки JS.
4. Vue на клиенте "гидратируется": переиспользует уже отрисованный DOM и payload вместо повторных запросов, навешивает обработчики событий.

Преимущества SSR: быстрый First Contentful Paint, корректная работа SEO/соцсетей (краулеры видят готовый HTML), лучше на медленных устройствах — тяжёлая работа сделана на сервере.

Минусы: нагрузка на сервер, необходимость писать код, работающий и в Node.js, и в браузере (нет прямого доступа к window/document на сервере).

Пример

<script setup>
// Выполнится на сервере при первой загрузке,
// на клиенте при client-side навигации данные уже в payload — повторный запрос не нужен
const { data: post } = await useFetch(`/api/posts/${route.params.id}`)
</script>

Дополнительные вопросы

• Что такое гидратация и что если серверный и клиентский HTML не совпадают (hydration mismatch)?
• Чем useFetch отличается от обычного fetch в контексте SSR?
• Как безопасно обратиться к window в компоненте, который рендерится на сервере?