Одна из первый идей, которую я реализовывал в Тинькофф - ленивая гидрация для React компонентов.
Ленивая гидрация позволяет не выполнять реакту код компонента на клиенте сразу при гидрации всего приложения, и отлично комбинируется с IntersectionObserver - можно выполнять код только при попадании компонента в область видимости.
Также, можно вообще не выполнять код на клиенте пометив блок как статичный, и каким-либо образом убирать его из клиентского бандла.
На tinkoff.ru очень тяжелый футер, и lazy hydration просто отлично зашла для его оптимизации.
Механизм достаточно простой, это по сути легализованный хак в React, детали есть в этом issue - https://github.com/facebook/react/issues/10923#issuecomment-338715787
Код для lazy обертки может базово выглядеть так:
```
const LazyRender = ({ children }) => { const containerRef = useRef(null); const isVisible = useObserver(containerRef); if (isVisible) { return React.createElement('div', {}, children); } return React.createElement('div', { ref: containerRef, suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: '' }, });};```
Абстрактный хук `
useObserver` должен вернуть `true` всегда на сервере, либо при попадании компонента в область видимости на клиенте - то есть мы сознательно создаем ошибку гидрации, и гасим ее через пропс `suppressHydrationWarning: true`.
Вся магия, почему разметка на клиенте не ломается, а переиспользуется, как раз заключается в хаке с `dangerouslySetInnerHTML: { __html: '' }`.
У решения конечно же есть минусы:- приходится создавать лишний тег - враппер
- по умолчанию код все-равно остается в клиентском бандле