PassFront
  1. PassFront
  2. База знаний
  3. Основы React

Чем отличаются виды React приложений и где они применяются?

Основы React

React-приложения различают по тому, где и когда генерируется HTML — от этого зависят SEO, скорость первой отрисовки и сложность инфраструктуры.

CSR (Client-Side Rendering) — классическое SPA

Сервер отдаёт пустой index.html + JS-бандл; всё рендерится в браузере.

  • Плюсы: простой деплой (статика), богатая интерактивность, дешёвый хостинг.
  • Минусы: медленный первый показ (нужно скачать и выполнить JS), слабый SEO.
  • Где: админки, дашборды, внутренние инструменты, приложения за логином (Vite + React Router).

SSR (Server-Side Rendering)

HTML генерируется на сервере на каждый запрос, затем гидратация в браузере.

  • Плюсы: быстрый первый контент, SEO, персонализация.
  • Минусы: нужен сервер, нагрузка, сложность (hydration mismatch).
  • Где: e-commerce, соцсети, кабинеты с публичным контентом (Next.js, Remix).

SSG (Static Site Generation) + ISR

HTML собирается на этапе билда (ISR — фоновая перегенерация по времени/запросу).

  • Плюсы: максимальная скорость и дешевизна (CDN), отличный SEO.
  • Минусы: контент обновляется через пересборку/ревалидацию.
  • Где: лендинги, блоги, документация, каталоги с редкими изменениями.

RSC (Server Components) — современный гибрид

Часть дерева выполняется только на сервере, интерактивные «острова» — на клиенте; JS серверных компонентов не едет в браузер.

  • Где: Next.js App Router — новые продуктовые приложения.

Ещё разрезы

По платформе: web / React Native (мобильные) / Electron (десктоп). По архитектуре: монолитное SPA против микрофронтендов (Module Federation).

Коротко для собеседования

CSR — SPA, всё в браузере (админки, дашборды); SSR — HTML на каждый запрос + гидратация (SEO и персонализация); SSG/ISR — HTML на билде, раздача с CDN (лендинги, блоги); RSC — гибрид с серверными компонентами и клиентскими островами (современный Next.js). Выбор диктуют SEO, скорость первой отрисовки и наличие сервера.

Другие вопросы раздела