Чем отличаются виды 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, скорость первой отрисовки и наличие сервера.