[JavaScript, Node.JS, ReactJS, VueJS] Что, черт возьми, такое гидратация и регидратация? (перевод)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Если процесс frontend разработки привёл вас к вопросу SEO оптимизации, то почти наверняка, вы столкнётесь с понятием Server Serde Renderind (SSR) и тесно связанной с ним гидратацией (или регидратацией). Пердставленная ниже информация является переводом в очень свободной форме и дополненным некоторыми особенностями, с целью прояснить subject.
Рассвет одностраничных приложений SPA
Модель одностраничных приложений The Single Page Application (SPA) набрала высокую популярность за последние несколько лет. Оно и понятно, этот подход даёт определённый профит по скорости, качеству обслуживания и создаёт основу для новых паттернов клиентской веб-разработки.
Как все, я думаю, прекрасно знают, SPA работает внутри браузера и не требует перезагрузки страницы во время использования.
Супер идея! Но, конечно, есть «подводные камни».
В числе самых распространённых случаев (если взять любой туториал по react или vue) главная страница index.html содержит практически пустой HTML-файл с небольшим количеством глобальных для всего проекта ссылок CSS, JavaScript, шрифты и т.п.
И это проблема:
- В процессе первоначальный рендеринг пользователю придётся ждать загрузки всей кодовой базы и всех ресурсов (конечно, есть исключения, и можно реализовать динамическую подгрузку так называемых js / css чанков, но это отдельная история)
- Некоторые сканеры или парсеры, которые не умеют дожидаться подгрузки асинхронных запросов, просто увидят все страницы пустыми
Ну вы поняли:
<!DOCTYPE html>
<html>
<head>
<title>My first SPA app</title>
<script src="https://cdn_нашей_либы"></script>
</head>
<body>
<div id="app"></div>
<script>
...
бла бла бла, регистрация приложения
...
</script>
</body>
</html>
Рендеринг на стороне сервера SSR
В отличие от рендеринга на стороне клиента Client Side Rendering (CSR), который использует браузер для рендеринга всего содержимого приложения и получения данных с API и т.п, SSR использует… сервер. То есть, всё тот же рендеринг и получение данных обрабатывается сервером (NodeJS с помощью фреймворков Express, Next, Vue SSR, Nuxt или что там ещё...), а затем ответ с разметкой HTML, стилями и полученными данными с API, отправляется браузеру.
Таким образом, вы можете использовать преимущества двух подходов: скорость / SEO и интерактивность / UX.
И так, всё же, что такое гидратация / регидратация?
Регидратация — это своего рода мост между SSR и CSR.
Существует такой показатель производительности веб страницы, как First Contentful Paint (FCP) — в приближённом переводе будет звучать как 'первая значимая отрисовка' — время, когда браузер начал отображать любой текст, изображения (включая фоновые). Это первые элементы, которые пользователь увидит на странице. Создав отчёт с помощью Lighthouse в Chrome, в закдладке performance, вы сразу же увидите этот показатель.
Время, потраченное на генерацию содержимого на сервере, и будет являться First Contentful Paint временем.
Сразу после этого, клиентский JavaScript начинает выполенение по созданию полноценного клиентского приложения (в большинстве случаев популярных фреймворков — virtual dom и binding интерфейса управления им).
В этот момент нет необходимости заново рендерить весь DOM на клиенте, но необходимо добавить недостающие события, методы, а в некоторых случаях и элементы, которые не рендерились на сервере.
Именно этот процесс и называется гидратацией или регидратацией (hydration / re-hydration). Немного более подробное описание можно найти в Руководстве Vue SSR (которе также есть на русском языке), но, соответсвеннно, с некоторыми особенностями конкретно этого фреймворка.
Производительность
А вот в этой части появляются некоторые проблемы. Регидратация имеет определённый недостаток — это время до взаимодейстия или Time to Interactive, которое можно увидеть во всё том же, известном нам, Lighthouse Chrome. Даже если вы организовали всё идеально на стороне сервера и страница имеет быструю первую отрисовку содержимого, пользователь сможет с ней взаимодействовать только после CSR регидратации, которая иногда может выполняется довольно медленно. Это большой минус в части UX.
Ещё один показатель Max Potential First Input Delay — задержка первого ввода (англ. First input delay, FID) — одна из метрик производительности веб-страниц, которая описывает время, прошедшее с момента, когда пользователь впервые начал взаимодействовать с веб-страницей, т.е. нажал на ссылку, кнопку или использует элемент управления на основе JavaScript, до момента, когда веб-браузер может ответить на данное взаимодействие (определение с сайта mozilla).
И время регидратации напрямую влияет на этот показатель. И чем больше компонентов и логики на вашей странице — тем стремительнее увеличивается этот показатель.
Одиним из способов решения является lasy load для hydration.
Примером реализации подобного подхода на Vue SSR / NuxtJS является пакет vue-lazy-hydration, который реализует выполнение гидратации только в видимой части vieport браузера и «гидрирует» остальную часть только в случае скролла страницы. Рекомендации по использованию этого пакета были найдены также на хабре в tutorial Создаем интернет-магазин на Nuxt.js, за что автору AntonMoskalchenko хочу выразить отдельную благодарность. В статье были достигнуты показатели Performance в Lighthouse Chrome равные 100%.
===========
Источник:
habr.com
===========
===========
Автор оригинала: Julien Maury
===========Похожие новости:
- [Разработка веб-сайтов, Программирование, ReactJS, Управление проектами] Как не закопаться в рефакторинге на фронте. Советы новичку
- [Разработка веб-сайтов, JavaScript, Программирование] JavaScript: 250+ практических вопроса (список + викторина + бонус)
- [Node.JS] NestJS. Загрузка файлов в S3 хранилище (minio)
- [Разработка веб-сайтов, JavaScript, Программирование] Webpack: руководство для начинающих (перевод)
- [Разработка веб-сайтов, JavaScript] Влияние service worker'ов на web-приложения
- [JavaScript, Java, Big Data, Data Engineering] В диких условиях. Итоги проектов Школы программистов в эпоху самоизоляции
- [Разработка веб-сайтов, JavaScript, Node.JS] Архитектура современных корпоративных Node.js-приложений
- [Разработка веб-сайтов, JavaScript, Программирование] Политика общего происхождения и CORS: визуальное руководство (перевод)
- [CSS, Клиентская оптимизация, Accessibility, Браузеры] Продуманный front-end. Правильная архитектура для быстрых сайтов (перевод)
- [PHP, Symfony, ReactJS] SSR: рендеринг ReactJS приложения на бекэнде используя PHP
Теги для поиска: #_javascript, #_node.js, #_reactjs, #_vuejs, #_javascript, #_react, #_next, #_vue, #_nuxt, #_server_side_rendering, #_javascript, #_node.js, #_reactjs, #_vuejs
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 20:20
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
 Если процесс frontend разработки привёл вас к вопросу SEO оптимизации, то почти наверняка, вы столкнётесь с понятием Server Serde Renderind (SSR) и тесно связанной с ним гидратацией (или регидратацией). Пердставленная ниже информация является переводом в очень свободной форме и дополненным некоторыми особенностями, с целью прояснить subject. Рассвет одностраничных приложений SPA Модель одностраничных приложений The Single Page Application (SPA) набрала высокую популярность за последние несколько лет. Оно и понятно, этот подход даёт определённый профит по скорости, качеству обслуживания и создаёт основу для новых паттернов клиентской веб-разработки. Как все, я думаю, прекрасно знают, SPA работает внутри браузера и не требует перезагрузки страницы во время использования. Супер идея! Но, конечно, есть «подводные камни». В числе самых распространённых случаев (если взять любой туториал по react или vue) главная страница index.html содержит практически пустой HTML-файл с небольшим количеством глобальных для всего проекта ссылок CSS, JavaScript, шрифты и т.п. И это проблема:
Ну вы поняли: <!DOCTYPE html>
<html> <head> <title>My first SPA app</title> <script src="https://cdn_нашей_либы"></script> </head> <body> <div id="app"></div> <script> ... бла бла бла, регистрация приложения ... </script> </body> </html> Рендеринг на стороне сервера SSR В отличие от рендеринга на стороне клиента Client Side Rendering (CSR), который использует браузер для рендеринга всего содержимого приложения и получения данных с API и т.п, SSR использует… сервер. То есть, всё тот же рендеринг и получение данных обрабатывается сервером (NodeJS с помощью фреймворков Express, Next, Vue SSR, Nuxt или что там ещё...), а затем ответ с разметкой HTML, стилями и полученными данными с API, отправляется браузеру. Таким образом, вы можете использовать преимущества двух подходов: скорость / SEO и интерактивность / UX. И так, всё же, что такое гидратация / регидратация? Регидратация — это своего рода мост между SSR и CSR. Существует такой показатель производительности веб страницы, как First Contentful Paint (FCP) — в приближённом переводе будет звучать как 'первая значимая отрисовка' — время, когда браузер начал отображать любой текст, изображения (включая фоновые). Это первые элементы, которые пользователь увидит на странице. Создав отчёт с помощью Lighthouse в Chrome, в закдладке performance, вы сразу же увидите этот показатель. Время, потраченное на генерацию содержимого на сервере, и будет являться First Contentful Paint временем. Сразу после этого, клиентский JavaScript начинает выполенение по созданию полноценного клиентского приложения (в большинстве случаев популярных фреймворков — virtual dom и binding интерфейса управления им). В этот момент нет необходимости заново рендерить весь DOM на клиенте, но необходимо добавить недостающие события, методы, а в некоторых случаях и элементы, которые не рендерились на сервере. Именно этот процесс и называется гидратацией или регидратацией (hydration / re-hydration). Немного более подробное описание можно найти в Руководстве Vue SSR (которе также есть на русском языке), но, соответсвеннно, с некоторыми особенностями конкретно этого фреймворка. Производительность А вот в этой части появляются некоторые проблемы. Регидратация имеет определённый недостаток — это время до взаимодейстия или Time to Interactive, которое можно увидеть во всё том же, известном нам, Lighthouse Chrome. Даже если вы организовали всё идеально на стороне сервера и страница имеет быструю первую отрисовку содержимого, пользователь сможет с ней взаимодействовать только после CSR регидратации, которая иногда может выполняется довольно медленно. Это большой минус в части UX. Ещё один показатель Max Potential First Input Delay — задержка первого ввода (англ. First input delay, FID) — одна из метрик производительности веб-страниц, которая описывает время, прошедшее с момента, когда пользователь впервые начал взаимодействовать с веб-страницей, т.е. нажал на ссылку, кнопку или использует элемент управления на основе JavaScript, до момента, когда веб-браузер может ответить на данное взаимодействие (определение с сайта mozilla). И время регидратации напрямую влияет на этот показатель. И чем больше компонентов и логики на вашей странице — тем стремительнее увеличивается этот показатель. Одиним из способов решения является lasy load для hydration. Примером реализации подобного подхода на Vue SSR / NuxtJS является пакет vue-lazy-hydration, который реализует выполнение гидратации только в видимой части vieport браузера и «гидрирует» остальную часть только в случае скролла страницы. Рекомендации по использованию этого пакета были найдены также на хабре в tutorial Создаем интернет-магазин на Nuxt.js, за что автору AntonMoskalchenko хочу выразить отдельную благодарность. В статье были достигнуты показатели Performance в Lighthouse Chrome равные 100%. =========== Источник: habr.com =========== =========== Автор оригинала: Julien Maury ===========Похожие новости:
|
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 20:20
Часовой пояс: UTC + 5