Де знаходиться ваша відправна точка у React-застосунку? Якщо це клієнтський варіант - то це напевно буде index.ts файл, у якому буде викликано
React.createRoot. Тут багато гадати не треба, цей метод отримує HTML-елемент, в який потім присобачить ваш React елемент за допомогою render методу. А що відбувається, коли ми використовуємо серверний рендеринг (наприклад, через Next.js чи Remix)? Адже нам вже повертається готовий HTML, тож його теж потрібно якось використати. Цим займається процес hydration. Його мета - прикріпити React до вже існуючого HTML, щоб вкінці ми отримали інтерактивну сторінку. А для цього нам треба вже мінімальна кількість JS, який займеться event listener-ами чи іншою логікою застосунку.
Hydration викликається з допомогою іншого методу з React -
hydrateRoot. Часто фреймворки викликають hydrateRoot замість вас, щоб не займати вас цією роботою.Що ще потрібно знати - неспівпадіння вашого серверного HTML з React-деревом в процесі hydration буде трактуватись як помилка. Тому з цим треба бути обережним і використовувати певні техніки, такі як
isMounted чи suppressHydrationWarning.👉 Читати про hydrateRoot
#interview