Буквально неделю назад, команда реакт опубликовала в своем блоге о новом RFC.  Давайте разберемся, что это за зверь и зачем он нужен. Как понятно из названия React Server Components - это компоненты которые исполняются на сервере.  Теперь у нас есть несколько видов компонентов: Клиентские компоненты Серверные компоненты Гибридные компоненты Это те компоненты которые мы пишем сейчас, используя состояние и эффекты, они позволяют взаимодействовать с пользователем и исполняются в браузере. До этого момента у нас существовали только клиентские компоненты. Теперь клиентские компоненты имеют постфикс в названии .client.js Это те компоненты которые исполняются на сервере, они не могут использовать состояние и эффекты(в них запрещено использование useState и любых других "клиентских" хуков). Они могут быть перезапрошены по ходу исполнения приложения. Имеют доступ ко всей инфраструктуре сервера. Такие компоненты имеют постфикс в названии .server.js. Также в качестве параметров не может передавать функции, только данные. Эти компоненты могут исполняться как на сервере так и на клиенте. У них самые сильные ограничения. Они не могут использовать клиентские хуки и серверную инфраструктуру. Фактически могут только содержать JSX разметку. Дочитав до этого момента многие из вас спросят себя, а в чем различие с SSR и инструментами вроде Next.js.  Ведь реакт и раньше умел исполняться на сервере, верно? Не совсем так. Различие заключается в том, что SSR возвращает нам HTML разметку, которую после этого необходимо гидрировать. Чаще всего SSR используется для первой загрузки приложения, чтобы пользователь не видел белый экран. При этом Server Components возвращает JSON структуру части virtual dom.  Картинка слева, это пример того, что передается по сети при использовании server components. На данный момент ничего не сказано о совмещении SSR и server components, но я думаю в будущем эти два подхода можно будет совмещать. Картинка выше демонстрирует, то как выглядит дерево компонентов. Раньше оно всегда состояло из клиентских компонент, теперь дерево может содержать серверные компоненты. При готовом окружении, чтобы начать использовать серверные компоненты, необходимо создать файл с постфиксом .server.js Вот мы и создали первый серверный компонент. Когда добавляют новые фичи это прикольно, но у них должна быть практическая польза, вот что описывает команда реакт: Все мы любим зависимости в нашем приложении, но иногда их становится так много, что счет объема у приложения идет на десятки мегабайт. Так как мы получаем доступ к выполнению на сервере, то теперь и наши зависимости могут выполнять свои функции на сервере, без передачи исходного кода на клиент. Представьте, что вы пишите приложения для отображения markdown текста, сейчас вы напишите так: При это к размеру bundle добавиться 74кб дополнительно, но если этот компонент мы превратим с server components, то получим следующее: В данном примере изменилось только название файла, но при этом мы экономим 74кб исполняя данную часть кода на сервере. Так как компоненты исполняются на сервере, можно получать полный доступ к окружению сервера: Только для доступа к окружения сервера, требуются обертки для реакта, на данный момент команда реакта разработала 3 обертки: react-fs - Обертка для работы с файлами react-fetch - Обертка для работы с сетью react-pg - Обертка для работы с PostgresSql Думаю в ближайшем будущем, у нас появится API с помощью которого можно будет создавать собственный обертки для работы с server component. Если вы работаете с реакт, то вы уже знакомы с понятием Code Splitting. Это процесс когда компоненты загружаются по необходимости, для того, чтобы уменьшить размер нашего bundle  мы используем динамические модули и React.lazy: При использовании Server Components, мы получаем данную возможность по умолчанию: Так как данный компонент исполняется на сервере, то на клиент будет отправлен уже необходимый компонент, что позволяет писать более привычный и интуитивный код. Водопад - это когда нам после рендера необходимо запросить данные с сервера, после их получения, возможно нам требуется получить еще какие то данные и таким образом нам необходимо выполняться множество запросов на сервер, а пользователю ожидать выполнения этих запросов. Такой подход ухудшает пользовательский опыт при использовании приложения. Существуют  разные решения, чаще всего они касаются API. Например graphql/JSON API и другие. Чаще всего мы пишем компоненты следующим образом: Тут мы загрузили сам компонент Note, после этого выполнили рендер и только после этого запросили данные с сервера. Теперь с server components мы можем это делать не последовательно, а одновременно: Таким образом, когда компонент исполняется на сервере, он может выполнить взаимодействие с необходимым апи и передать данные в компонент за одну итерацию по сети для пользователя, после чего результат выполнения компонента стримится пользователю На мой взгляд server components имеет место быть, сочетая Suspence, Concurent Mode и Server Components можно гибко для разработчиков и удобно для пользователя реализовывать UI. Не забывайте это RFC и подход, реализации и API может поменяться до официального релиза. Что думаете по поводу Server Components? Если хотите более детально погрузиться в тему Server Components. Выступление Дэна Абрамова Документация RFC Пример приложения Frontend ниндзя