Бенчмарк серверных компонентов React

Данная страница содержит результаты нагрузочного тестирования серверных компонентов React.

Цель тестирования — продемонстрировать разницу в производительности серверных компонентов на различных средах исполнения JavaScript.

Прошу не ориентироваться на значения метрик, приведённые ниже, при проектировании сервисов. Конкретные значения метрик зависят от множества факторов, не учитываемых данным тестом.

Вы можете воспроизвести тест локально, следуя инструкции в README.md.

О бенчмарке

В рамках тестирования рассматриваются такие среды исполнения JavaScript, как Node.js, Bun и Deno.

В каждой из сред выполнения тестируются несколько типов рендеринга React-дерева.

Тип рендеринга Описание
fizz Обычный серверный рендеринг React. Используется renderToPipeableStream в Node.js и renderToReadableStream в Bun и Deno.
flight Рендеринг серверного компонента в JSON-представление
ssr Рендеринг серверного компонента в HTML-страницу
use-client Рендеринг серверного компонента с директивой 'use client' в HTML-страницу

Для сравнения используются две метрики:

Медианное время рендеринга

Медианное время рендеринга рассчитывалось на основе 10 последовательных запросов к серверу с вычислением медианного времени ответа. В рамках теста рендерился React-компонент с динамическим количеством элементов списка.

На графике по оси X отображается количество отрендеренных элементов списка, а по оси Y — время ответа сервера в миллисекундах.

Максимальный RPS серверного рендеринга

В данном тесте на протяжении минуты генерировались запросы к странице с постепенно увеличивающимся числом параллельных запросов (от 1 до 400).

Итоговая метрика рассчитывается как максимальное число параллельных запросов, получивших ответ со статусом 200 в течение одной секунды.

В рамках теста рендерился React-компонент с 10 тысячами элементов списка.

Тест проводился на одном экземпляре сервера для оценки его пропускной способности.