Что такое CSR и когда его выбрать в Nuxt?

MiddleNuxt.js #nuxt #csr #spa

Вопрос

Что такое CSR (Client-Side Rendering) в контексте Nuxt и когда его использовать вместо SSR?

Короткий ответ

При CSR браузер получает почти пустой HTML и JS-бандл, который уже на клиенте строит весь интерфейс. В Nuxt это включается через ssr: false — приложение превращается в классический SPA.

Подробный ответ

Nuxt позволяет выбирать стратегию рендеринга гибко:

Глобально — ssr: false в nuxt.config.ts превращает весь проект в SPA (например, для админ-панели за авторизацией, где SEO не важен).
Точечно — компонент <ClientOnly> рендерит содержимое только на клиенте (полезно для сторонних библиотек, завязанных на window, графиков, карт).
По маршрутам (Nuxt 3.9+) — routeRules в nuxt.config.ts позволяют задать ssr: false только для конкретных страниц, оставив SSR для остальных.

Когда CSR предпочтительнее SSR:

Внутренние инструменты/дашборды без требований к SEO.
Приложения, где важнее опыт после первой загрузки (как в SPA), а не время до первого контента.
Снижение нагрузки на сервер за счёт переноса рендеринга на клиент.

Пример

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/admin/**': { ssr: false } // админка рендерится только на клиенте
  }
})

<ClientOnly>
  <HeavyChartLibrary :data="chartData" />
  <template #fallback>
    <USkeleton class="h-64 w-full" />
  </template>
</ClientOnly>

Дополнительные вопросы

Какие плюсы и минусы у SPA-режима по сравнению с SSR?
Как routeRules помогают комбинировать SSR/CSR/ISR в одном проекте?
Почему <ClientOnly> полезен для предотвращения hydration mismatch?