React Server Components - это экспериментальная функция, выпущенная в декабре 2020 года, она представляет собой смесь рендеринга на стороне клиента (CSR) и рендеринга на стороне сервера (SSR). Но как он их смешивает - вот что мы собираемся изучить в этом посте.
ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: поскольку серверные компоненты React по-прежнему являются экспериментальными и время от времени обновляются, это сообщение может быть некорректным после июня 2021 года.
CSR против SSR
Битва между CSR и SSR никогда не заканчивается, и есть масса статей и дискуссий, в которых анализируются их плюсы и минусы. Как разработчик / архитектор программного обеспечения, начинающий новый проект, вы всегда можете столкнуться с дилеммой выбора, какой из них использовать, когда нет наследия или зависимостей от прошлого. Но если мы переосмыслим проблему, на самом деле нам не нужно выбирать только один из них, а использовать их обоих для того, что у них получается лучше, чем у других. Мой личный совет для принятия решения:
CSR для интерактивности, SSR для получения данных.
CSR близок к пользователям, поэтому, когда дело доходит до всего, что вам нужно для взаимодействия с пользователями как можно скорее и даже без извлечения данных с сервера, используйте больше CSR, поскольку он выполняется внутри браузера и обеспечивает лучшую интерактивность.
SSR близок к хранилищу данных, поэтому, когда дело доходит до извлечения данных из хранилища данных, вычисляйте и визуализируйте представления для пользователей. Использование SSR может потенциально сэкономить некоторое время сетевой передачи и отправлять пользователям только важные данные.
Есть и другие важные темы, которые часто упоминаются (например, SEO) при сравнении CSR и SSR, здесь я не буду их преобразовывать, так как я хочу, чтобы это было просто и подчеркну только некоторые фундаментальные характеристики.
Технически, совместное использование CSR и SSR вполне выполнимо, но стоимость обслуживания такой гибридной парадигмы в целом высока и выглядит бесполезной, если вы предпочитаете более чистую архитектуру внешнего интерфейса. Но с компонентами React Server было бы более возможно реализовать гибрид клиентского интерфейса CSR и SSR надлежащим образом и с низкими затратами на обслуживание.
Как работают компоненты сервера React
Чтобы понять основы работы серверных компонентов React, настоятельно рекомендуется посмотреть видео ЗДЕСЬ.
В соглашении о компонентах сервера React компоненты разделены на *.server.js и *.client.js, чтобы указать, где они выполняются. Использование *.server.js компонентов может ускорить выборку данных (поскольку они расположены близко к хранилищу данных) и уменьшить размер пакета (некоторые библиотеки js без просмотра, такие как moment.js, не будут отправлены на сторону клиента). Что касается *.client.js компонентов, на самом деле они такие же, как и любые компоненты React, которые вы написали ранее, но могут быть легко интегрированы с *.server.js компонентами, что является огромным плюсом. Но как эти преимущества возникают с технической точки зрения - это ключевая тема, которую мы собираемся обсудить дальше.
Чтобы исследовать скрытую магию, хорошей отправной точкой является репозиторий server-components-demo. После клонирования, запуска и экспериментов в ответе сети вы быстро обнаружите, что API /react вызывается, когда во внешнем интерфейсе происходят какие-то взаимодействия.
Ответ этого API довольно интересен, поскольку выглядит как сериализованная версия компонентов реакции:
Это дает нам предположение, что серверные компоненты могут отправлять клиенту в сериализованном формате в JSON. А подробности можно найти в пакете response-server в репозитории React:
Одним словом, компоненты *.server.js на самом деле являются компонентами, которые визуализируются на стороне сервера, а результат визуализации сериализуется и отправляется на клиентскую сторону в формате JSON. Это означает, что вы не можете использовать функции (включая обработчик событий), ссылки и большинство хуков в *.server.js компонентах, поскольку они не находятся в том же контексте, что и *.client.js компоненты.
Вывод
На мой взгляд, React Server Components - это новый эксперимент, призванный сломать разрозненность между CSR и SSR. Это не означает замену какого-либо из них, а означает, что разработчики смогут извлечь максимум из них обоих. Неизвестно, станет ли эта функция популярной, но, по крайней мере, мы, разработчики, можем иметь новый выбор, и способ ее реализации также может быть хорошим ориентиром для любых будущих фреймворков с аналогичной целью.
