React, который гидрировал разметку Vue
Каталог был Vue SSR. Общий остров крутил React. Даты не сошлись. Страница рисовалась дважды и везла граф CMS.
Публичные страницы были Vue SSR. Редактору нужны были таблицы React. Один webpack-граф вешал корень React на узел, который Vue уже напечатал. Серверная дата была UTC. React форматировал локальное время в Берлине. Гидратация падала. Каталог мигал и качал админский чанк.
TTI на телефоне прыгнул. Посетитель CMS не открывал. Он платил байтами и второй отрисовкой.
Проблема была в двух фреймворках на одном дереве. Покупатели ловили вспышку и бандл CMS, который им не нужен. Публичка Vue SSR, React на /admin, одна cookie Sanctum, токена в localStorage нет.
Две сборки
Публичка остаётся Vue SSR. Админка это второе приложение Vite на /admin. Оба используют cookie Sanctum auth_token. Токена в localStorage нет. Общий код это типы fetch, не компонент таблицы. nginx кэширует публичный HTML без графа React.
Что измерили
Скрипт листинга сбросил большую часть vendor CMS. Предупреждения гидратации по датам ушли в ноль, потому что React больше не шёл по этому дереву. Кейс гидратации дат Vue на этом сайте это тот же класс бага без второго фреймворка. React на том же корне сделал его громче, не другим.
Какой опыт из этого
Один корень, два фреймворка это провал гидратации плюс лишние байты. Резать приложения по URL.
Vendor админки не принадлежит каталогу. TTI на телефоне это показал.
auth_token остаётся в httpOnly cookie. Общий компонент таблицы не стоил общего дерева гидратации.