Стратегии рендеринга: SSR, SSG, ISR и routeRules

Не вся страница должна рендериться одинаково: routeRules задаёт режим на каждый маршрут — статика для лендинга, SSR для каталога, SPA для админки.

Суть: через routeRules в nuxt.config можно назначить каждому маршруту свою стратегию: prerender (статика SSG), SSR, ISR/SWR (кеш с обновлением) или ssr:false (SPA). Это гибридный рендеринг — лучшее из режимов под каждую страницу.

Мы противопоставляли SSR и SPA как «или-или». На самом деле Nuxt позволяет смешивать стратегии на каждый маршрут. Это и есть взрослый подход: лендинг должен быть статикой (быстро и дёшево), каталог — SSR (свежие данные, SEO), а админка может быть SPA (нагрузку с сервера долой). Один проект — разные режимы.

Управляет этим routeRules в nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    "/":            { prerender: true },   // статика (SSG)
    "/products/**": { ssr: true },         // серверный рендер
    "/blog/**":     { swr: 3600 },         // кеш на час, фоновое обновление
    "/admin/**":    { ssr: false },        // SPA
  },
})

Разберём режимы. prerender (SSG) — страница генерируется один раз при сборке в статический HTML; идеально для контента, который меняется редко. SSR — рендер на каждый запрос, всегда свежие данные. ISR/SWR — компромисс: страница кешируется и отдаётся мгновенно, а в фоне обновляется по таймауту (stale-while-revalidate). ssr:false — SPA для конкретного раздела.

   Стратегии рендеринга на одном сайте

   /            -> prerender : сгенерён 1 раз, статика
   /products/** -> SSR       : рендер на каждый запрос
   /blog/**     -> SWR 3600  : кеш + фоновое обновление
   /admin/**    -> SPA       : рендер только в браузере

   быстро/дёшево <----------------------> свежо/динамично
   prerender        SWR/ISR         SSR

SEO в Nuxt не заканчивается на title и Open Graph. Для лучшей индексации полезна структурированная разметка JSON-LD через useHead — она помогает поисковику понять, что на странице товар, статья или рецепт, и показать богатый сниппет в выдаче. Канонические ссылки через link rel=canonical устраняют дубли при разных URL одной страницы. А карта сайта и корректные коды ответов (200 для существующего, 404 для отсутствующего) завершают картину. Экосистема Nuxt предлагает готовые SEO-модули, автоматизирующие большую часть этой рутины, но понимать, что под капотом, всё равно полезно.

Как работает под капотом

routeRules — это инструкции для Nitro. Для prerender Nitro при сборке обходит маршрут и сохраняет готовый HTML. Для SWR/ISR он кеширует ответ и отдаёт его из кеша, перерисовывая в фоне по истечении срока. Для ssr:false отдаётся пустой каркас, как в SPA. Так один и тот же код приложения обслуживается по-разному в зависимости от пути — без переписывания компонентов.

Смоделируем выбор стратегии по правилам маршрутов — суть routeRules:

// Сопоставление пути с правилом рендеринга.
const rules = [
  { match: "/",            strategy: "prerender" },
  { match: "/products/",   strategy: "ssr" },
  { match: "/blog/",       strategy: "swr:3600" },
  { match: "/admin/",      strategy: "spa" },
];

function resolveStrategy(path) {
  // самое длинное совпадение префикса
  let best = { match: "", strategy: "ssr" };
  for (const r of rules) {
    if (path.startsWith(r.match) && r.match.length >= best.match.length) {
      best = r;
    }
  }
  return best.strategy;
}

for (const p of ["/", "/products/42", "/blog/nuxt-guide", "/admin/users"]) {
  console.log(p.padEnd(20), "->", resolveStrategy(p));
}

Попробуй сам ▶ — каждому пути сопоставляется своя стратегия по префиксу. Так Nitro и решает, как рендерить конкретный маршрут.

Частые ошибки

• Один режим на весь сайт. Это упускает выгоду: статику можно сделать почти бесплатной, оставив SSR там, где он реально нужен.
• Prerender для часто меняющихся данных. Статика «застынет» на момент сборки — для динамики берите SSR или SWR.
• Забыть про SEO в SPA-разделах. ssr:false уместен только там, где индексация не нужна.

Best practices

• Статичный контент (лендинг, документация) — prerender.
• Контент, который терпит небольшую задержку свежести, — SWR/ISR ради скорости и экономии.
• Приватные разделы без SEO — ssr:false, чтобы снять нагрузку с сервера.

Итог: routeRules делает рендеринг гибридным — каждый маршрут получает оптимальную стратегию. Это ключ к быстрому и экономичному сайту. Дальше — финальный шаг: сборка и деплой.