В наши дни каждый хочет, чтобы контент был максимально быстрым для пользователя в сети, а также отображался на первых местах в результатах поиска. Часто поддержание этих двух функций может стать обременительным, поэтому некоторые используют краткосрочные уловки, которые полезны, но с ними довольно сложно справиться в долгосрочной перспективе.

Если вы не знакомы с React Hydrate, прочтите его здесь: React Hydrate

Сегодня я собираюсь объяснить очень удобный трюк для рендеринга страниц на стороне сервера и задержки гидратации на стороне клиента. Это помогает достичь в основном трех вещей:

1. Уменьшите время первого взаимодействия на стороне клиента.

2. Сократите время первой покраски на стороне клиента.

3. Предоставляйте пользователю контент быстрее, при этом пользователь не замечает никакой разницы.

Итак, P rogressive Hydration была представлена ​​Google на Google I / O 2019, где они дали общее представление о том, что такое прогрессивная гидратация. Прогрессивная гидратация вводится для уменьшения гидратации содержимого на стороне сервера на клиенте или для определения приоритета содержимого, которое необходимо гидратировать при необходимости, а не для гидратации всего содержимого на стороне сервера при загрузке страницы.

Один из популярных способов добиться этого - обернуть компонент в Intersection Observer и гидратировать требуемый компонент только тогда, когда компонент собирается войти в область просмотра. Таким образом, страница гидратируется по мере прокрутки пользователя, и если пользователь просто заходит на страницу и уходит, он избегает дополнительного времени, которое было ранее добавлено для гидратации.

Если вы хотите разработать для себя компонент прогрессивной гидратации, вот идея, на основе которой вы можете построить свой компонент:

Поскольку вам нужен полностью визуализированный HTML-код с сервера для целей SEO, вам необходимо поставить галочку в своем компоненте, чтобы различать серверный и клиентский рендеринг, чтобы создавать разный контент в обоих случаях. Таким образом, при рендеринге на стороне сервера вы вернете полный HTML-код, и вам больше нечего делать, однако при рендеринге на стороне клиента вам нужно отобразить только HTML-элемент верхнего уровня, который будет фактически отображаться (так что нечего гидратировать) и когда компонент собирается войти в область просмотра, вы фактически визуализируете компонент, и, поскольку это будет полностью клиентский рендеринг, нет необходимости гидратировать или присоединять какие-либо прослушиватели событий, поскольку браузер уже делает это при рендеринге.

Кроме того, чтобы предотвратить предупреждение о гидратации, поскольку HTML будет отличаться от SSR и CSR, вы должны использовать suppressHydrationWarning={true}. Это подавит предупреждение о гидратации при различии содержимого и отсутствие ошибок консоли, но будьте осторожны при использовании suppressHydrationWarning.

Подробнее о suppressHydrationWarning здесь.

Вот как вы постепенно гидратируете свой компонент и уменьшаете время взаимодействия и время первого рисования с помощью этого метода.

По любым дополнительным вопросам вы можете связаться со мной по моей почте: [email protected]