# 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](https://react.dev/reference/rsc/server-components) — 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>
