Які режими рендерингу в Nuxt (SSR, SSG, SPA, Hybrid)?

Nuxt.js надає множину стратегій рендерингу відповідно до потреб вашого додатку.

1. Server-Side Rendering (SSR)

Режим за замовчуванням - рендерить сторінки на сервері при кожному запиті.

javascript

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true // За замовчуванням
});

Переваги:

Краще SEO
Швидше початкове завантаження
Динамічний контент
Real-time дані

Недоліки:

Витрати на сервер
Повільніший time to interactive
Складне кешування

Використовуйте коли:

SEO критичне
Контент змінюється часто
Потрібні real-time дані

2. Static Site Generation (SSG)

Пре-рендерить всі сторінки при збірці.

javascript

// Генерація статичних файлів
npx nuxi generate

// Або в конфігу
export default defineNuxtConfig({
  ssr: true,
  nitro: {
    static: true
  }
});

Переваги:

Надзвичайно швидкий
Низькі витрати (тільки CDN)
Краща безпека
Offline підтримка

Недоліки:

Час збірки зростає зі сторінками
Не підходить для динамічного контенту
Потребує перезбірки для оновлень

Використовуйте коли:

Контент рідко змінюється
Обмежена кількість сторінок
Хочете максимальну продуктивність
Блог, документація, маркетингові сайти

3. Single Page Application (SPA)

Тільки клієнтський рендеринг.

javascript

export default defineNuxtConfig({
  ssr: false
});

Переваги:

Простіший deployment
Нижчі витрати на сервер
Багаті взаємодії
Сервер не потрібен

Недоліки:

Погане SEO
Повільніше початкове завантаження
Потрібен JavaScript
Немає progressive enhancement

Використовуйте коли:

SEO не важливе
Внутрішні інструменти/дашборди
За автентифікацією
Додатки з великою client-side логікою

4. Hybrid Rendering (ISR/ISG)

Змішування стратегій рендерингу по роутам.

javascript

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true }, // SSG
    '/admin/**': { ssr: false }, // SPA
    '/api/**': { cors: true },
    '/blog/**': { swr: 3600 }, // ISR: ревалідація кожну годину
  }
});

Incremental Static Regeneration (ISR)

Оновлення статичних сторінок без повної перезбірки.

javascript

export default defineNuxtConfig({
  routeRules: {
    '/blog/**': {
      swr: 60 * 60, // Кеш на 1 годину
      isr: true
    }
  }
});

Таблиця порівняння

Особливість	SSR	SSG	SPA	Hybrid
SEO	✅ Відмінне	✅ Відмінне	❌ Погане	✅ Відмінне
Швидкість	🟡 Добра	✅ Найшвидше	🟡 Добра	✅ Найкраще
Вартість	❌ Висока	✅ Низька	✅ Низька	🟡 Середня
Динамічність	✅ Так	❌ Ні	✅ Так	✅ Так
Час збірки	✅ Швидкий	❌ Повільний	✅ Швидкий	🟡 Середній

Реальний приклад

javascript

// E-commerce сайт
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true }, // Статична головна
    '/products': { swr: 600 }, // ISR список (кеш 10 хв)
    '/products/**': { swr: 3600 }, // ISR сторінки товарів (1 год)
    '/cart': { ssr: false }, // SPA кошик
    '/checkout': { ssr: true }, // SSR checkout (SEO + безпека)
    '/admin/**': { ssr: false }, // SPA адмін панель
    '/api/**': { cors: true }
  }
});

Поради для співбесід

П: Як вибрати режим рендерингу? В: Враховуйте потреби SEO, частоту оновлення контенту та вимоги до продуктивності.

П: Чи можна змішувати режими в одному Nuxt додатку? В: Так! Використовуйте routeRules для стратегії рендерингу по роутам.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань