Гидратация (веб-разработка)
В веб-разработке , доставленную либо через статический хостинг , гидратация или регидратация — это метод, при котором клиентский JavaScript преобразует статическую веб-страницу HTML либо через рендеринг на стороне сервера , в динамическую веб-страницу путем прикрепления обработчиков событий к элементам HTML. [1] Поскольку HTML предварительно визуализируется на сервере, это обеспечивает быструю «первую содержательную отрисовку» (когда полезные данные впервые отображаются пользователю), но после этого проходит период времени, когда страница кажется полностью загруженной и интерактивным, но не будет до тех пор, пока не будет выполнен клиентский JavaScript и не будут подключены обработчики событий. [2]
Платформы, использующие гидратацию, включают Next.js. [3] и Nuxt.js. [4] React функцию «гидрат», которая увлажняет элемент v16.0 представил в своем API . [5] [6]
Вариации
[ редактировать ]Потоковое рендеринг на стороне сервера
[ редактировать ]Потоковая отрисовка на стороне сервера позволяет отправлять HTML-код частями, которые браузер может постепенно отображать по мере его получения. Это может обеспечить быструю первую отрисовку и первую отрисовку содержимого, поскольку HTML-разметка быстрее доходит до пользователей. [2]
Прогрессивная регидратация
[ редактировать ]При прогрессивной регидратации отдельные части приложения, отображаемого на сервере, «загружаются» с течением времени, вместо нынешнего распространенного подхода к инициализации всего приложения одновременно. Это может помочь уменьшить объем JavaScript, необходимый для интерактивности страниц, поскольку обновление на стороне клиента частей страницы с низким приоритетом можно отложить, чтобы предотвратить блокировку основного потока. Это также может помочь избежать одной из наиболее распространенных ошибок регидратации рендеринга на стороне сервера, когда дерево DOM, отображаемое на сервере, уничтожается, а затем немедленно перестраивается – чаще всего потому, что для первоначального синхронного рендеринга на стороне клиента требовались данные, которые были не совсем готовы, возможно, ожидая решения Promise . [2]
Частичная регидратация
[ редактировать ]Частичную регидратацию оказалось трудно осуществить. Этот подход является развитием идеи прогрессивной регидратации, при которой отдельные части (компоненты/виды/деревья), подлежащие постепенной регидратации, анализируются и выявляются те, которые имеют небольшую интерактивность или вообще не реагируют. Для каждой из этих по большей части статических частей соответствующий код JavaScript затем преобразуется в инертные ссылки и декоративные функции, сводя их объем на стороне клиента практически к нулю. Подход частичной гидратации имеет свои проблемы и компромиссы. Это создает некоторые интересные проблемы для кэширования , а навигация на стороне клиента означает, что нельзя предполагать, что HTML-код, отображаемый на сервере, для инертных частей приложения будет доступен без полной загрузки страницы. [2]
Одной из платформ, поддерживающих частичную регидратацию, является Elder.js, основанный на Svelte . [7]
Тризоморфный рендеринг
[ редактировать ]Тризоморфный рендеринг — это метод, который использует потоковый рендеринг на стороне сервера для начальной навигации или навигации, отличной от JS, а затем использует сервисного работника для рендеринга HTML для навигации после его установки. Это позволяет поддерживать актуальность кэшированных компонентов и шаблонов и обеспечивает навигацию в стиле SPA для рендеринга новых представлений в одном сеансе. Этот подход работает лучше всего, когда можно использовать один и тот же код шаблона и маршрутизации между сервером, клиентской страницей и сервис-воркером. [2]
Ссылки
[ редактировать ]- ^ «Увлажнение на стороне клиента | Руководство по Vue SSR» . ssr.vuejs.org . Проверено 11 декабря 2020 г.
- ^ Jump up to: а б с д и Миллер, Джейсон; Османи, Адди (26 ноября 2019 г.). «Рендеринг в Интернете» . Разработчики Google . Проверено 11 декабря 2020 г.
- ^ «Основные возможности: Страницы | Next.js» . nextjs.org . Проверено 4 января 2021 г.
- ^ «Рендеринг на стороне сервера + рендеринг на стороне клиента» . НукстJS . Проверено 03 декабря 2023 г.
- ^ «ReactDOM – Реагировать» . сайт реакцииjs.org . Проверено 4 января 2021 г.
- ^ «React v16.0 — Блог React» . сайт реакцииjs.org . Проверено 4 января 2021 г.
- ^ «Elder.js: Svelte Framework и генератор статических сайтов» . Старший гид . Проверено 4 января 2021 г.
Части этой страницы представляют собой модификации, основанные на работе, созданной и распространенной Google и используемой в соответствии с условиями, описанными в лицензии Creative Commons 4.0 Attribution License , в частности, в статье «Визуализация в Интернете» Джейсона Миллера и Адди Османи .