Rendering

Что это такое

Рендеринг — процесс отрисовки DOM на экране браузера. Браузер берет DOM (дерево элементов) и CSSOM (дерево стилей), рассчитывает как элементы должны быть расположены и отрисовывает цвета по пикселям на экран

В React под рендерингом понимают вычисление того, как должен выглядеть DOM (по сути, те значения, что возвращают наши React-компоненты как функции)

Подходы к рендерингу

Есть несколько подходов к рендерингу

• CSR — Client Side Rendering — это отрисовка всех компонентов на стороне клиента (браузера), например, как это происходит в SPA (single-page application)

  • SPA — подгружается одна HTML страница, которая обновляется в процессе взаимодействия с пользователем. SPA легче разрабатывать, но такие приложения дольше грузятся

  • В React CSR означает, что наши компоненты как функции будут выполняться на стороне браузера

• SSR — Streaming Server-side Rendering — формируем страницу целиком на сервер и отправляем клиенту для отрисовки. Скорость отрисовки такого приложения высокая, однако разрабатывать такое SPA приложение сильно сложнее

• SSG — Static Site Generation — на этапе сборки приложения получаем статический сайт и отрисовываем его на клиенте. Скорость отрисовки такого приложения высокая, однако добавлять сюда SSR функции крайне сложно

• RSC — React Server Components — комбинированный подход к рендерингу React приложений. Какие-то части html собираются на этапе сборки, другие на сервере, третьи — на стороне клиента рендерятся и все собирается в единое дерево React. RSC может увеличить производительность сайта, но требует от разработчика глубокой экспертизы и навыков

RSC

В этой статье здорово описано как это работает: https://tonyalicea.dev/blog/understanding-react-server-components/

Формат сериализации называется Flight. Пересылаемые данные — RSC Payload'ы.

Парсинг RSC Payload'ов: https://github.com/alvarlagerlof/rsc-parser/tree/main