SSR и Nuxt 4

SPA на чистом Vue отдаёт браузеру почти пустой index.html и большой JS-бандл. Пользователь видит белый экран, пока скрипт скачается, выполнится и нарисует контент, а поисковый бот видит ту же пустую страницу. Серверный рендеринг переворачивает это: сервер собирает готовый HTML и отдаёт его сразу, контент виден мгновенно, бот получает наполненную страницу. Nuxt 4 берёт на себя весь обвязочный код SSR (роутинг, серверные эндпоинты, сборку) и оставляет разработчику писать страницы.

• Интернет-магазин: страницы товаров рендерятся на сервере ради SEO и быстрой первой отрисовки
• Блог-платформа: статьи отдаются готовым HTML, индексируются поисковиками без выполнения JS
• Маркетинговый лендинг: мгновенный контент на медленных устройствах вместо ожидания бандла
• Дашборд с авторизацией: серверный роут Nitro проксирует API и прячет секретные ключи от клиента
• Документация: файловая маршрутизация Nuxt превращает дерево страниц в маршруты без ручного конфига

Предварительные знания

• Vue Router и идея клиентского роутинга из предыдущего урока
• Понимание SPA: index.html плюс JS-бандл, рендеринг в браузере
• Базовое представление о Node.js как серверной среде выполнения

Что такое серверный рендеринг

В SPA сервер отдаёт почти пустой HTML и JS-бандл, а всё дерево компонентов строится в браузере. До выполнения скрипта пользователь видит пустую страницу, и поисковый бот тоже. SSR переносит первичный рендер на сервер: Node выполняет приложение, собирает готовый HTML со всем контентом и отдаёт его в ответе. Контент виден сразу, ещё до загрузки JS.

SSR не бесплатен: рендер на сервере на каждый запрос стоит ресурсов, а код должен работать и в Node, и в браузере. Поэтому SSR оправдан там, где важны SEO и быстрая первая отрисовка (магазины, контент-сайты), а для внутренней админки часто хватает SPA.

Основы гидратации

Сервер отдал готовый HTML, но он статичен: клики и реактивность не работают. Гидратация это процесс, в котором клиентский Vue монтируется поверх существующего серверного HTML, привязывает к нему обработчики событий и реактивность, не перерисовывая разметку заново. После гидратации страница становится полноценным интерактивным приложением.

Гидратация требует, чтобы серверный и клиентский HTML совпадали. Если на сервере отрендерилось одно, а на клиенте при первом рендере другое (например, из-за Date.now() или random), возникает ошибка несовпадения гидратации (hydration mismatch), и Vue вынужден перерисовать узел.

Состояние тоже переносят с сервера на клиент, иначе клиент запросил бы те же данные заново. Это и есть гидратация состояния из урока про Pinia: серверное состояние сериализуется в HTML и наполняет клиентский стор до монтирования, чтобы данные совпали и не было лишнего запроса.

Nuxt 4 как мета-фреймворк

Ручная настройка SSR на чистом Vue это много обвязки: серверный и клиентский entry, конфигурация сборки, передача состояния, роутинг на обеих сторонах. Nuxt это мета-фреймворк над Vue, который берёт эту рутину на себя. Файловая маршрутизация превращает структуру каталога pages в маршруты, SSR настроен из коробки, а разработчик пишет страницы.

Имя файла задаёт путь, квадратные скобки это динамический сегмент. Файлу не нужен ручной конфиг роутера: Nuxt генерирует маршруты из дерева каталога. Это убирает целый класс ручной работы по синхронизации файлов и записей роутинга.

Nuxt не скрывает Vue, а надстраивается над ним: внутри страниц это те же SFC, composition API, Pinia. Мета-фреймворк решает инфраструктуру (рендеринг, роутинг, сборка, деплой), а компонентная модель остаётся знакомой по чистому Vue.

Nitro и серверные роуты

Nitro это серверный движок Nuxt. Он выполняет SSR-рендер, а ещё позволяет писать серверные роуты и API-эндпоинты в каталоге server/, которые работают только на сервере. Там безопасно держать секретные ключи, обращаться к базе данных и проксировать сторонние API, не раскрывая детали клиенту.

Преимущество Nitro в переносимости деплоя: один и тот же серверный код разворачивается на Node-сервере, на serverless-платформах и на edge без переписывания. Nuxt собирает приложение под целевую платформу, а код серверных роутов остаётся прежним.

Код в server/ никогда не попадает в клиентский бандл, поэтому именно там работают с секретами и приватными API. Класть ключ доступа в обычный компонент опасно: он окажется в JS, который скачивает каждый посетитель.

Связь с другими темами

Урок про серверный рендеринг и мета-фреймворк. Он опирается на гидратацию состояния и стоит рядом с производительностью:

• Pinia: паттерны и SSR — Гидратация стора это конкретный механизм переноса состояния с сервера на клиент
• Vapor Mode — Другая сторона производительности рендеринга на стороне клиента

Итог

• SSR собирает готовый HTML на сервере и отдаёт его сразу: быстрая первая отрисовка и индексируемый контент для ботов
• Гидратация это привязка клиентского Vue к уже отрендеренному серверному HTML, после чего страница становится интерактивной
• Nuxt 4 это мета-фреймворк над Vue: файловая маршрутизация, серверные роуты, конфигурация SSR из коробки
• Серверный движок Nitro выполняет серверные роуты и эндпоинты, разворачивается на разных платформах из одного кода
• Мета-фреймворк убирает рутину SSR-обвязки, чтобы разработчик писал страницы, а не настраивал сервер и сборку вручную

Связанные уроки

• vue-28-pinia-patterns — Гидратация состояния Pinia это конкретный кейс переноса данных с сервера на клиент в SSR
• vue-35-vapor-mode — Оба урока про производительность рендеринга: SSR ускоряет первую отрисовку, Vapor удешевляет обновления