Что такое React Server Components?
React Server Components (RSC) представляют собой новый тип компонентов, которые выполняются исключительно на сервере и отправляют клиенту только финальный результат рендеринга в виде HTML. Это кардинально отличается от традиционного подхода, когда все компоненты передавались браузеру как JavaScript-код.
Преимущества RSC:
- Уменьшение объема данных: Клиент получает лишь готовый HTML, а не весь исходный код компонента.
- Повышение производительности: Уменьшается нагрузка на браузер за счет выполнения логики на стороне сервера.
- Безопасность: Логика приложения остается скрытой от пользователя.
Чем отличаются RSC от SSR?
Многие разработчики путают React Server Components с традиционным подходом Server-Side Rendering (SSR), но это разные технологии. При использовании SSR страница полностью рендерится на сервере, после чего отправляется клиенту вместе со всем необходимым JavaScript-кодом для гидрации страницы. В случае же RSC логика компонента никогда не передается клиенту – она всегда остается на сервере.
Таким образом, если сравнить эти подходы метафорически, то SSR можно представить как приготовление блюда и его доставку пользователю горячим, тогда как RSC – это приготовленное блюдо, которое подается клиенту, но рецепт остается в кухне навсегда.
Типы компонентов в новой модели React
С появлением RSC в экосистеме React теперь существует три типа компонентов:
- Server Components – работают только на сервере; могут напрямую обращаться к базам данных, файловым системам и API; не имеют состояния или обработчиков событий.
- Client Components – традиционные клиентские компоненты, выполняющиеся непосредственно в браузере.
- Shared Components – гибридные компоненты, способные работать как на сервере, так и на клиентской стороне.