Режимы отрисовки: SSR, SSG и гибридный

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

Режимы

Режим	Когда собирается HTML	Подходит для
SSR, отрисовка на сервере	При каждом запросе	Страницы с часто меняющимися данными
SSG, статическая генерация	Один раз при сборке	Страницы, которые редко меняются
CSR, отрисовка в браузере	В браузере после загрузки JavaScript	Закрытые разделы, которым не нужен поиск
Гибридный	По-разному для разных адресов	Большинство реальных сайтов

SSR по умолчанию

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

Только в браузере

Чтобы весь сайт собирался в браузере, как обычное приложение Vue, отключите SSR:

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false
})

Сервер будет отдавать пустую страницу со скриптом. Так делают для внутренних инструментов, но для блога это плохо: поисковики хуже видят содержимое.

Гибридный режим: routeRules

Правила для групп адресов задают в routeRules:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/about': { prerender: true },
    '/posts/**': { swr: 600 },
    '/admin/**': { ssr: false }
  }
})

Правило	Что делает
`prerender: true`	HTML собирается при сборке и отдаётся как файл
`swr: 600`	HTML кешируется на 600 секунд и обновляется в фоне
`isr: true`	Как кеш, но на платформах, которые это поддерживают, например Vercel и Netlify
`ssr: false`	Страница собирается только в браузере
`redirect: '/new-url'`	Перенаправление на другой адрес

Звёздочки ** означают «этот адрес и всё, что под ним». После npm run build главная и «О блоге» будут готовыми файлами, статьи — кешироваться на 10 минут, а /admin — собираться в браузере.

Полностью статический сайт

Команда npm run generate заранее собирает HTML всех страниц, до которых может дойти по ссылкам, и кладёт результат в .output/public/. Такой сайт можно разместить на любом статическом хостинге без Node.js. Но тогда пропадают серверные обработчики: форма добавления статьи работать не будет.

Только в браузере для части страницы

Если отдельный компонент не может работать на сервере, оберните его в <ClientOnly> вместо отключения SSR для всей страницы.

Частая ошибка

Включить prerender: true для страницы, которая зависит от пользователя или часто меняется, например для списка статей. HTML соберётся один раз при сборке, и новые статьи на этой странице не появятся до следующей сборки. Для таких страниц используйте обычный SSR или swr с небольшим временем кеша.

Спасибо, что читаете!