Angular 16, наконец, утоляет нашу жажду этой функции, которая революционизирует рендеринг на стороне сервера.
Кандидат на выпуск Angular 16 представляет долгожданную функцию, которая произведет революцию в работе с Angular SSR: неразрушающая гидратация.
Эта функция может улучшить показатели Core Web Vitals, повысить производительность SEO и даже избавиться от ужасного мерцания приложений Angular Universal. Команда Angular недавно подтвердила, что улучшение рендеринга на стороне сервера является главным приоритетом в 2023 году и что неразрушающая гидратация — это ступенька к их видению будущего.
Этот пост охватывает три аспекта неразрушающего увлажнения: (1) пример старого «мерцания» Angular Universal, (2) краткое введение в использование неразрушающего увлажнения и (3) глоссарий с пояснениями несколько ключевых терминов.
1. Мерцание
Если вы когда-либо использовали приложение Angular Universal, возможно, вы сталкивались с мерцанием:
Это мерцание возникает из-за того, что Angular Universal по умолчанию использует деструктивную гидратацию. Когда приложение Angular обрабатывается на стороне сервера, статический HTML-файл немедленно отправляется клиенту при загрузке страницы. Это обеспечивает более быструю первую отрисовку содержимого, чем традиционные SPA, поскольку шаблон отображается до загрузки кода приложения.
При деструктивной гидратации, как только клиентский код загружается, он уничтожает DOM, отображаемый сервером, и заменяет его DOM, отображаемым клиентом. Вот что вызывает мерцание. Один из создателей Angular Universal Джефф Уэлпли приводит забавный пример разрушительной гидратации в своем выступлении на NG-BE 2023.
С другой стороны, неразрушающая гидратация позволяет Angular повторно использовать DOM, отображаемый на стороне сервера. Что означает отсутствие мерцания!
Удаление мерцания — это больше, чем исправление ошибки UX, оно представляет собой фундаментальное улучшение SSR Angular. Это означает, что Angular может избежать дополнительной работы по повторному созданию узлов DOM, чтобы пользователи быстрее получали отрисовку с наибольшим содержанием.
2. Использование
Создайте новое приложение Angular и добавьте Angular Universal:
# Generate a new Angular app npx @angular/cli@next new standalone-universal --standalone # Add support for Angular Universal npx ng add @nguniversal/express-engine@next
Затем добавьте provideClientHydration() в файл app.config.ts.
Если вам интересно подробное руководство по настройке приложения с неразрушающей гидратацией, посмотрите это видео от Брэндона Робертса.
3. Глоссарий
Ниже приведен глоссарий ключевых терминов, относящихся к неразрушающей гидратации:
Визуализация на стороне сервера
По умолчанию Angular отображает приложения только вбраузере. Angular Universal позволяет Angular отображать приложение насервере, создаваястатическоеHTML-содержимое, представляющее состояние приложения. Как только HTML-содержимое отображается в браузере, Angular загружает приложение и повторно использует информацию, доступную в сгенерированном сервером HTML-коде.
https://next.angular.io/guide/universal
Увлажнение
Гидратация — это процесс, который восстанавливает приложение, отображаемое на стороне сервера, на клиенте. Сюда входят такие вещи, как повторное использование структур DOM, отображаемых сервером, сохранение состояния приложения, передача данных приложения, которые уже были получены сервером, и другие процессы.
https://next.angular.io/guide/hydration#what-is-hydration
Неразрушающее увлажнение
Этот метод позволит нам повторно использовать модель DOM, визуализируемую на стороне сервера, и вместо ее повторной визуализации подключать только прослушиватели событий и создавать структуры данных, необходимые для среды выполнения Angular.
https://next.angular.io/guide/roadmap#in-progress
Отказ от ответственности: Angular [16.0.0-rc.0](<https://www.npmjs.com/package/@angular/core/v/16.0.0-rc.0>) был последним кандидатом на выпуск v16 на момент написания этой статьи. Релиз-кандидаты Angular не должны запускаться ни в каком производственном приложении или среде.
О HeroDevs
HeroDevs — студия разработки программного обеспечения и консалтинга, которая специализируется на фронтенд-разработке. Наша команда является автором или соавтором таких проектов, как Angular CLI, Angular Universal, Scully, XLTS — расширенная долгосрочная поддержка AngularJS, Vue2, Protractor и многих других. Мы работаем с быстрорастущими стартапами и крупнейшими мировыми компаниями, такими как Google, GE, Capital One, Experian, T-Mobile, Corteva и другими. Узнайте больше о нас на herodevs.com.
