tgoop.com/super_oleg_dev/49
Last Update:
Привет!
Активно готовим tramvai к React 18, хочу поделиться важными для меня плюсами, и к сожалению минусами.
Рендеринг на сервере стал быстрее.
На одном простом демо приложении, RPS вырос с 50 до 70 просто при обновлении react и react-dom.
Т.к. именно рендеринг компонентов это главный ограничитель RPS любого SSR приложения, это очень приятный сюрприз, и самое главное, бесплатный.
Улучшается метрика Total Blocking Time, если просто обернуть приложение в Suspense где-нибудь на верхнем уровне.
Вместо одной синхронной задачи по гидрации, React начинает гидрировать приложения маленькими кусочками.
Во вложенных скриншотах, с Suspense, TBT с 2s падает меньше чем 1s.
Улучшение TBT повлияет на Web Vitals метрику First Input Delay, которая имеет большой вес в общей оценке производительности.
Новые API startTransition и useTransition могут очень сильно улучшить рантайм перформанс.
Подходящие кейсы для использования - практически все, что связано с пользовательским вводом.
Наглядная демка от моего коллеги - https://stackblitz.com/edit/react-n4qzgr
Из грустного, светлое будущее потокового рендеринга HTML пока не наступило)
Кажется в целом, HTML стриминг переоценен, никто серьезно не использует его в продакшене, никто точно не знает, как он влияет на SEO.
Нет возможности сделать серверный редирект, после отдачи первого байта на клиент.
Также, браузеры ведут себя по разному при получении HTML потока, при первой загрузке и при MPA переходах между страницами:
- Safari ведет себя непредсказуемо, независимо от типа рендеринга, может моргать белый экран
- Firefox - нет белого экрана при стриминге, ждет полную загрузку страницы
- Chrome - белый экран, если стрим отвечает дольше 5и секунд, либо если в стриме отдан тег body, и затем начинается потоковый рендер новой страницы
Новые API React 18 для потокового рендеринга работают мягко говоря не производительно, больше инфы тут - https://github.com/facebook/react/issues/24232.
Поэтому трамвай будет продолжать использовать renderToString.
Это означает, что хоть Suspense и можно теперь рендерить на сервере, но его возможности ограничены.
Например, использование React.lazy может вызывать ошибку на клиенте - https://github.com/facebook/react/issues/24125
Поэтому мы рекомендуем продолжать использовать loadable для разделения кода.
BY SuperOleg dev notes
Share with your friend now:
tgoop.com/super_oleg_dev/49