foundation

CSR

Переносите data и рендеринг в браузер, когда interaction state или user-only data доминируют в опыте.

CSR откладывает осмысленный UI на браузер после загрузки и выполнения JavaScript. В Next.js сильный CSR — в Client Components, client-only hooks или SPA-островах внутри в основном static shell.

CSR подходит для авторизованных инструментов, интерактивных редакторов и экранов без SEO, где first paint может показать лёгкий shell.

На интервью: влияние на SEO и LCP, стоимость hydration и когда static shell + client island лучше полного CSR.

Типовые ошибки: пустой initial HTML для публичных страниц, waterfall client fetch после hydration, большие bundles для простого контента.

Компромисс: интерактивность против crawlability и first-load performance.

Чеклист:

  • Публичный маркетинг не в CSR-only shell.
  • Fetch рядом с client island, которому нужны данные.
  • Split bundles для тяжёлых виджетов.
  • Loading и error UI во время fetch.