Частичная гидратация — наиболее востребованная функция Angular. Почему?
Давайте объясним это простыми словами.
Если вы все сделаете правильно, а это значит:
- Вы создаете небольшие, многоразовые компоненты.
- Вы лениво загружаете все, что должно загружаться лениво (любые изображения, тяжелые модули, компоненты, сторонние библиотеки)
- Размер вашего пакета достаточно мал.
- Вы знаете, как идентифицировать и отключить любые дополнительные повторные рендеринги.
- Вы используете Angular SSR (через универсальный или что-то вроде Scully)
Даже если вы сделаете все это и оптимизируете все возможные килобайты, вы получите Время взаимодействия (TTI) 5+ секунд на мобильном телефоне Google Lighthouse.
TTI — это не просто показатель, используемый для победы в онлайн-спорах о том, какая среда веб-разработки является самой быстрой. Это важный показатель, поскольку он является частью ваших основных веб-показателей Google, который влияет на рейтинг вашей страницы и взаимодействие с пользователем.
Поэтому команда Angular решила что-то с этим сделать.
Представляем…. Частичное увлажнение.
Полное объяснение Джеффа можно посмотреть здесь: https://www.youtube.com/watch?v=19bN92JLRIg.
Детали того, как это работает, он объясняет в игровой форме — очень рекомендую к просмотру. Однако Джефф упускает некоторые важные детали, которые становятся очевидными только после того, как вы попытаетесь интегрировать частичную гидратацию в приложение. В этой статье я собираюсь задокументировать свой опыт.
1. Используете Скалли? Везет, как утопленнику.
Если вы раньше не слышали о Scully: Scully — это инструмент, который делает SSR в Angular гораздо менее болезненным, чем он должен быть. Angular Universal использует Domino.js для рендеринга ваших страниц. Это означает две вещи:
- Если вы используете функцию JS, которую Domino не поддерживает, вам придется либо заполнить ее полифилом, либо найти другое обходное решение.
- Если вы используете библиотеку, в которой используется функция, не поддерживаемая Domino, вы собираетесь…
