Пример лэйаута для наглядности:
<Header />
<Page /> // hydration missmatch
<LazyRender>
<Footer />
</LazyRender>
Это можно исправить, обернув компонент страницы в Suspense, и Реакт свичнется на клиентский рендер только для этого поддерева компонентов, и это не затронет соседний Footer.
Но в этом случае, а у нас на сервере используется renderToString, и если Page компонент упадет с настоящей ошибкой - мы ее на сервере не перехватим и не сможем отдать 500 ошибку.
Писал про это в одном из постов, а также почему не используем на сервере апи Реакта для рендеринга в стрим:
- https://t.me/super_oleg_dev/69
- https://t.me/super_oleg_dev/49
Так и не нашел хорошего решения проблемы, кроме как избавляться на месте от конкретных ошибок гидрации.