SSR ломается не в сервере, а в первом рендере на клиенте

SSR ломается не в сервере, а в первом рендере на клиенте

Чаще всего проблемы выглядят скучно: разъехалась вёрстка, мигает контент, гидрация падает на условии или на случайном доступе к window. Причина одна: сервер и клиент отрисовали не одно и то же дерево.

Проверьте три вещи:
— любые данные для первого экрана должны быть готовы до рендера;
— ветки по device/time/random/locale не должны менять DOM между сервером и клиентом;
— тяжёлые виджеты лучше уводить в lazy load или рендерить после mount.

Если в компоненте есть вычисление только для браузера, не прячьте его в template. Вынесите в guard, серверный пропс или отдельный client-only блок. Чем меньше логики в разметке, тем спокойнее гидрация и проще дебажить.

Отдельная ловушка — SEO и SSR не одно и то же. Если робот видит пустой shell, а контент приходит позже, вы платите за серверный рендер без его главной пользы.

Держите правило: первый HTML должен быть валидным, предсказуемым и одинаковым для обеих сторон; всё, что зависит от окружения, переносите за границу первого рендера.