Прочитал статью Роберта Аркрайта про опыт перевода высоконагруженного проекта на React — "Scaling React Server-Side Rendering".

Роберт пишет про балансировку запросов. Рандомная балансировка — это неудачный подход, который с большей вероятностью приводит к неравномерному распределению нагрузки. Описана хорошая стратегия распределения нагрузки по сервисам с помощью cluster и fabio. Ещё в статье рассказывается про интересный подход с фоллбеком на клиентский рендеринг в случае аномальной нагрузки на сервис.

Очень хорошая статья, несмотря на то что она была написана в 2017 году и уже немного потеряла актуальность (там описан подход с кешированием рендеринга компонентов, который не работает с React 16). Рекомендую почитать всем, кто рендерит React на сервере.

P.S. Спасибо @oleg_log за наводку на статью.

#react #ssr #performance

https://arkwright.github.io/scaling-react-server-side-rendering.html

Лукас Бомбак написал статью про то, как готовить частичную гидрацию для изоморфных приложений — "The case of partial hydration (with Next and Preact)".

Фронтенд-фреймворки, которые умеют рендерить приложение на сервере (React, Vue, Angular), должны гидрировать страницу (устанавливать обработчики событий на отрендеренную сервером вёрстку), чтобы она стала интерактивной. При таком подходе есть проблема — на клиент летит много ненужного кода, например, код неинтерактивных компонентов (заголовки, врезки, компоненты для типографики и т.п.). Поэтому команда Лукаса при работе над большим новостным порталом реализовала частичную гидрацию страницы. При таком подходе на клиент прилетает только тот код, который нужен для работы интерактивных элементов.

Идея несложная. Нужно отрендерить статичную вёрстку и отметить в ней элементы, которые нужно гидрировать. Для отметки таких элементов, ребята использовали тег <script type="application/hydration-marker" />. Далее клиентский скрипт находит такие элементы и гидрирует их. Таким образом на странице получается несколько независимых мини-приложений.

Статья очень полезная. Если вы разрабатываете большой проект с использованием SSR и большинство ваших компонентов неинтерактивны, то стоит обратить внимание на этот подход.

#ssr #performance #react

https://medium.com/@luke_schmuke/how-we-achieved-the-best-web-performance-with-partial-hydration-20fab9c808d5