Лекция 10 мин.
Привет, Вы узнаете о том , что такое гидратация веб страницы, Разберем основные их виды и особенности использования. Еще будет много подробных примеров и описаний. Для того чтобы лучше понимать что такое гидратация веб страницы , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend).
В веб-разработке гидратация (англ. англ. hydration, Увлажнение ), или регидратация, — техника, при которой клиентский JavaScript преобразует веб-страницу, которая является статической с точки зрения браузера и получена в результате статического или серверного рендеринга, в динамическую. Это достигается путем присоединения обработчиков событий к HTML-элементам в объектной модели документа (DOM). Поскольку HTML предварительно отрисовывается на сервере, это обеспечивает быструю «первую содержательную отрисовку» (First Contentful Paint, FCP), то есть момент, когда пользователю впервые отображаются полезные данные. Однако после этого наступает период, в течение которого страница выглядит полностью загруженной и интерактивной, но на самом деле таковой не является до тех пор, пока не будет выполнен клиентский JavaScript и не будут присоединены обработчики событий.
Фреймворки, использующие гидратацию, включают Next.js и Nuxt.js. В React версии 16.0 в API была добавлена функция `hydrate`, которая выполняет гидратацию элемента.
Потоковый серверный рендеринг ( Streaming server-side rendering) позволяет отправлять HTML по частям (chunks), которые браузер может постепенно отрисовывать по мере получения. Об этом говорит сайт https://intellect.icu . Это может обеспечить быструю первую отрисовку (First Paint) и первую содержательную отрисовку (FCP), так как HTML-разметка доставляется пользователям быстрее.
При прогрессивной гидратации ( progressive rehydration) отдельные части отрисованного на сервере приложения «запускаются» (оживают) постепенно, в отличие от распространенного подхода, когда все приложение инициализируется одновременно. Это помогает уменьшить объем JavaScript, необходимого для придания интерактивности страницам, поскольку «оживление» низкоприоритетных частей страницы на стороне клиента можно отложить, чтобы не блокировать основной поток. Это также помогает избежать одной из самых распространенных проблем гидратации при серверном рендеринге, когда отрисованное на сервере DOM-дерево уничтожается и немедленно перестраивается заново — чаще всего потому, что для первоначальной синхронной отрисовки на стороне клиента требовались данные, которые еще не были готовы (например, находились в ожидании разрешения промиса).
Реализация частичной гидратации ( partial rehydration) оказалась сложной задачей. Этот подход является развитием идеи прогрессивной гидратации, при котором анализируются отдельные части (компоненты/представления/деревья), подлежащие постепенной гидратации, и выявляются те из них, которые имеют низкую интерактивность или не имеют реактивности. Для каждой из этих преимущественно статических частей соответствующий JavaScript-код преобразуется в инертные ссылки и декоративную функциональность, что сводит их «вес» на стороне клиента почти к нулю. Подход частичной гидратации сопряжен с собственными проблемами и компромиссами. Он создает интересные задачи для кэширования, а навигация на стороне клиента означает, что нельзя гарантировать доступность отрисованного на сервере HTML для инертных частей приложения без полной перезагрузки страницы.
Одним из фреймворков, поддерживающих частичную гидратацию, является Elder.js, основанный на Svelte.
Тризоморфный рендеринг ( Trisomorphic rendering) — техника, которая использует потоковый серверный рендеринг для первоначальной загрузки и навигации без JS, а затем использует сервис-воркер для рендеринга HTML при последующих переходах после его установки. Это позволяет поддерживать кэшированные компоненты и шаблоны в актуальном состоянии и обеспечивает навигацию в стиле одностраничного приложения (SPA) для отрисовки новых представлений в рамках той же сессии. Этот подход работает лучше всего, когда можно использовать один и тот же код для шаблонизации и маршрутизации на сервере, на клиентской странице и в сервис-воркере
Исследование, описанное в статье про гидратация веб страницы, подчеркивает ее значимость в современном мире. Надеюсь, что теперь ты понял что такое гидратация веб страницы и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)
Из статьи мы узнали кратко, но содержательно про гидратация веб страницы
Комментарии