Гидрация в React: почему инъекции в DOM работают по-разному
Процесс гидрации в React часто воспринимают как строгую последовательную проверку всех узлов DOM-дерева. В обычном случае, если сторонний скрипт вставит лишний <div> или <script> перед элементом React, гидрация «споткнется», возникнет mismatch, и дерево будет перерисовано заново. Однако при работе с некоторыми тегами логика меняется благодаря системе Resources (Hoistables), представленной полноценно в react 19. Одним из таких особенных тегов является тег script.
Внешние скрипты (async src) - react классифицирует внешние асинхронные скрипты как «ресурсы». При обходе DOM-дерева алгоритм гидрации умеет распознавать такие узлы как независимые. Если он видит сторонний асинхронный скрипт, он просто пропускает его и ищет следующий подходящий по элемент. Это позволяет динамически внедрять аналитику или внешние библиотеки между компонентами React.
Инлайновые скрипты (<script>...</script>) - с инлайновым кодом ситуация иная. Поскольку содержимое таких скриптов может влиять на состояние страницы здесь и сейчас, React считает их позиционно-зависимыми. При гидрации React не может просто пропустить инлайновый скрипт — он пытается заявить на него права, сопоставляя со своим следующим ожидаемым компонентом. Это приводит к подмене узлов и ошибке гидрации (например, Minified React error #418).
Для корректной работы React все внешние внедрения в DOM должны быть позиционно-независимыми. В случае со скриптами использование async src позволяет обмануть алгоритм гидрации, в то время как инлайновые вставки практически гарантированно приводят к ошибкам в консоли и лишним рендерам.
Процесс гидрации в React часто воспринимают как строгую последовательную проверку всех узлов DOM-дерева. В обычном случае, если сторонний скрипт вставит лишний <div> или <script> перед элементом React, гидрация «споткнется», возникнет mismatch, и дерево будет перерисовано заново. Однако при работе с некоторыми тегами логика меняется благодаря системе Resources (Hoistables), представленной полноценно в react 19. Одним из таких особенных тегов является тег script.
Внешние скрипты (async src) - react классифицирует внешние асинхронные скрипты как «ресурсы». При обходе DOM-дерева алгоритм гидрации умеет распознавать такие узлы как независимые. Если он видит сторонний асинхронный скрипт, он просто пропускает его и ищет следующий подходящий по элемент. Это позволяет динамически внедрять аналитику или внешние библиотеки между компонентами React.
Инлайновые скрипты (<script>...</script>) - с инлайновым кодом ситуация иная. Поскольку содержимое таких скриптов может влиять на состояние страницы здесь и сейчас, React считает их позиционно-зависимыми. При гидрации React не может просто пропустить инлайновый скрипт — он пытается заявить на него права, сопоставляя со своим следующим ожидаемым компонентом. Это приводит к подмене узлов и ошибке гидрации (например, Minified React error #418).
Для корректной работы React все внешние внедрения в DOM должны быть позиционно-независимыми. В случае со скриптами использование async src позволяет обмануть алгоритм гидрации, в то время как инлайновые вставки практически гарантированно приводят к ошибкам в консоли и лишним рендерам.
