tgoop.com/super_oleg_dev/103
Last Update:
Теперь хочется обсудить современные возможности React, и как они могут помочь ускорить гидрацию и уменьшить количество клиентского кода, и нужен ли еще этот хак.
В первую очередь это конечно React Server Components - подход Next.js с серверными компонентами по умолчанию в теории может кардинально уменьшить количество клиентского кода.
А стриминг разметки и данных с сервера на клиент вместе с механизмом selective hydration делает процесс гидрации неблокирующим и постепенным, также это все идет в паре с вложенным роутингом и гранулярным разделением кода на чанки.
Концепция RSC очень крутая, и это полноценный конкурент таким подходам как у Resumability у Qwik или Islands Architecture.
На практике у RSC + Next.js не все идеально, есть вопросы и к производительности на сервере, и к DX и сложным концепциям, вендор лок на некст, но тем не менее RSC это скорее всего грядущее будущее экосистемы реакта, в том или ином виде.
Окей, у нас не Next.js, что есть еще интересного и более доступного?
Это как раз механизм selective hydration - неблокирующей гидрации, почитать про это и вообще целевую SSR архитектуру можно тут - https://github.com/reactwg/react-18/discussions/37
Даже без RSC, в React 18 есть возможность стримить разметку с сервера, и гидрировать ее на клиенте постепенно, небольшими неблокирующими задачами - то есть напрямую улучшить время до интерактивности важного контента на странице.
Про стриминг React приложения на сервере и его проблемы уже писал ранее - https://www.tgoop.com/super_oleg_dev/49
По умолчанию, Suspense + стриминг + selective гидрация не решают проблему больших клиентских бандлов - но это уже задача `@loadable` или `React.lazy` для выделения кода компонентов в отдельные чанки с помощью динамического импорта.
И в целом, большая часть проблем решается - ваши тяжелые компоненты вынесены в lazy чанки, обернуты в Suspense, приложение гидрируется через hydrateRoot, время до интерактивности улучшилось, а кода стало меньше.
Но к сожалению тут есть и минусы:
- с SSR, мы автоматически предзагружаем скрипты lazy чанков которые были отрендерены на странице на сервере. Это расходы на сеть, и возможно на компиляцию кода, даже если он выполняется не сразу
- если отдельные блоки не обернуты в Suspense, при действиях пользователя, например клике по кнопке в процессе гидрации - React запустит принудительную блокирующую гидрацию у всего поддерева компонентов до ближайших Suspense границ
- ошибки гидрации не редкость, они также приводят к принудительной блокирующей гидрации или даже рендеру
В итоге, кажется подход с lazy гидрацией остается актуальным, и позволяет делать настоящие независимые Islands - отдельные островки из которых может состоять приложение.
BY SuperOleg dev notes
Share with your friend now:
tgoop.com/super_oleg_dev/103