Объясни Server Components
Вопрос
Что такое React Server Components и чем они отличаются от SSR?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
RSC выполняются только на сервере, их код не попадает в бандл
Могут быть async и читать базу, файлы, секреты напрямую
Нельзя useState, useEffect и обработчики; интерактив в клиентских компонентах с use client
SSR превращает дерево в HTML, RSC определяют, какой код едет на клиент; работают вместе
Пропсы через границу сериализуемые; серверный компонент можно передать клиентскому через children
Server Functions через use server для мутаций
Что могут спросить следом
- Как кешируются данные в RSC?
- Какие минусы у RSC?
Разбор
Server Components это компоненты, которые выполняются только на сервере. Они могут быть async, напрямую ходить в базу или читать секреты, а их код и тяжёлые зависимости, например парсер markdown, не попадают в клиентский бандл. Клиенту уходит сериализованный результат. Ограничение: нет состояния, эффектов и обработчиков, для интерактива нужен клиентский компонент с директивой use client, и всё, что он импортирует, уйдёт в браузер. SSR решает другую задачу: превратить дерево компонентов в HTML для первого показа, причём клиентские компоненты тоже проходят SSR. В Next.js App Router они работают вместе. Мутации делаются через Server Functions с use server. Минусы: новая ментальная модель, граница клиент-сервер требует внимания, а часть библиотек ещё не готова к серверу.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.