12. Режимы рендеринга (SSR/SSG/SPA/ISR)

🌐 Режимы рендеринга в Nuxt 3

Одна из ключевых суперсил Nuxt 3 — возможность использовать разные режимы рендеринга для разных страниц одного приложения. Лендинг — статический, блог — ISR, дашборд — SPA, всё в одном проекте.

Обзор режимов рендеринга 🗺️

Запрос пользователя
       ↓
┌──────────────────────────────────────────┐
│            Nuxt 3 Routing                │
│                                          │
│  /           → SSG (статика)             │
│  /blog/**    → ISR (обновление каждый час)│
│  /dashboard  → SPA (только клиент)       │
│  /api/**     → SSR (каждый запрос)       │
└──────────────────────────────────────────┘

SSR — Server-Side Rendering (по умолчанию) 🖥️

Пользователь → Сервер → Рендерит HTML → Браузер → Гидрация JS

export default defineNuxtConfig({
  ssr: true  // По умолчанию
})

Плюсы:

✅ Отличный SEO — боты видят готовый HTML
✅ Быстрое First Contentful Paint
✅ Актуальные данные при каждом запросе
✅ Работает на всех устройствах

Минусы:

❌ Нагрузка на сервер при каждом запросе
❌ Время ответа зависит от сервера

Когда использовать: Страницы с динамическим контентом, требующим SEO (новости, блог, карточки товаров).

SSG — Static Site Generation 📄

Время сборки: Nuxt → Генерирует все страницы → HTML файлы
Пользователь → CDN → Статический HTML (мгновенно!)

// nuxt.config.ts — глобально для всего сайта
export default defineNuxtConfig({
  nitro: {
    prerender: {
      // Явно указываем маршруты
      routes: ['/', '/about', '/contact'],

      // Или сканируем автоматически
      crawlLinks: true,
    }
  }
})

npx nuxi generate
# → .output/public/ — готовые HTML файлы

// Для конкретной страницы:
definePageMeta({
  prerender: true
})

Плюсы:

✅ Молниеносная загрузка (CDN)
✅ Нулевая нагрузка на сервер
✅ Бесплатный хостинг (GitHub Pages, Netlify)
✅ Отличный SEO

Минусы:

❌ Долгая сборка для больших сайтов
❌ Данные актуальны только на момент сборки

Когда использовать: Лендинги, документация, портфолио, маркетинговые сайты.

SPA — Single Page Application 💻

Пользователь → Пустой HTML → Браузер загружает JS → Рендерит страницу

// nuxt.config.ts — глобально отключаем SSR
export default defineNuxtConfig({
  ssr: false
})

// Или для конкретных маршрутов:
export default defineNuxtConfig({
  routeRules: {
    '/dashboard/**': { ssr: false },
    '/admin/**': { ssr: false },
  }
})

Плюсы:

✅ Мгновенные переходы после загрузки
✅ Нет SSR — нет проблем с гидрацией
✅ Подходит для закрытых разделов (дашборды)

Минусы:

❌ Плохой SEO (для поисковиков)
❌ Медленная первая загрузка

Когда использовать: Административные панели, дашборды, авторизованные разделы.

ISR — Incremental Static Regeneration 🔄

Первый запрос → Рендерит + Кэширует
Следующий запрос (до истечения TTL) → Отдаёт из кэша
После TTL → Перегенерирует в фоне → Обновляет кэш

export default defineNuxtConfig({
  routeRules: {
    // Кэшировать 1 час, потом обновлять
    '/blog/**': { isr: 3600 },

    // Кэшировать 24 часа
    '/products/**': { isr: 86400 },

    // Кэшировать "навсегда" (до следующего деплоя)
    '/about': { isr: true },
  }
})

Плюсы:

✅ Скорость статики + актуальность SSR
✅ Меньше нагрузки на сервер
✅ SEO как у SSG

Когда использовать: Блог с частыми обновлениями, каталоги товаров, новостные сайты.

Гибридный рендеринг — routeRules 🎯

export default defineNuxtConfig({
  routeRules: {
    // Главная — статическая генерация
    '/': { prerender: true },

    // Блог — ISR каждые 10 минут
    '/blog': { isr: 600 },
    '/blog/**': { isr: 3600 },

    // Продукты — ISR каждые 6 часов
    '/products/**': { isr: 21600 },

    // Поиск — SSR (всегда актуальный)
    '/search': { ssr: true },

    // Дашборд — SPA (без SSR)
    '/dashboard/**': { ssr: false },

    // API с CORS
    '/api/**': { cors: true },

    // Документация — статика
    '/docs/**': { prerender: true },

    // Редиректы
    '/old-about': { redirect: '/about' },
    '/old-blog/**': { redirect: '/blog/**' },

    // Заголовки кэширования
    '/assets/**': {
      headers: {
        'cache-control': 'public, max-age=31536000, immutable'
      }
    },

    // Отключить индексацию
    '/admin/**': {
      ssr: false,
      headers: { 'X-Robots-Tag': 'noindex, nofollow' }
    },
  }
})

Nuxt Islands — частичная гидрация 🏝️

Nuxt Islands — революционная фича, позволяющая рендерить компоненты только на сервере без JavaScript на клиенте:

<!-- Суффикс .server.vue — только серверный рендеринг -->
<template>
  <div>
    <!-- Этот HTML отправляется клиенту БЕЗ JS -->
    <h1>Статический контент</h1>
    <p>Никакого JavaScript для рендеринга!</p>
  </div>
</template>

<!-- Использование NuxtIsland -->
<template>
  <div>
    <!-- Интерактивный компонент — обычная гидрация -->
    <InteractiveCounter />

    <!-- Статический контент — NO JavaScript! -->
    <NuxtIsland name="StaticWidget" :props="{ data }" />
  </div>
</template>

nuxt generate — статическая сборка 📦

# Генерирует полностью статический сайт
npx nuxi generate

# Структура .output/public/:
.output/
└── public/
    ├── index.html          ← /
    ├── about/
    │   └── index.html      ← /about
    ├── blog/
    │   ├── index.html      ← /blog
    │   └── my-post/
    │       └── index.html  ← /blog/my-post
    └── _nuxt/
        ├── entry.abc123.js ← JavaScript чанки
        └── ...

Сравнение режимов 📊

Критерий	SSR	SSG	SPA	ISR
Скорость загрузки	🟡 Хорошо	✅ Отлично	❌ Медленно	✅ Отлично
SEO	✅ Отлично	✅ Отлично	❌ Плохо	✅ Отлично
Актуальность данных	✅ Всегда	❌ Только при сборке	✅ Всегда	🟡 С задержкой
Нагрузка на сервер	❌ Высокая	✅ Нулевая	✅ Нулевая	🟡 Средняя
Сложность	🟡 Средняя	✅ Простая	✅ Простая	🟡 Средняя
Use case	Новости, магазин	Блог, документация	Дашборд	Каталог