Админка на React не должна ехать на Vue SSR
Публичный сайт это Vue SSR. CMS часто React. Один webpack-граф везёт оба. TTI каталога платит за редактор.
TTI публичного каталога подскочил, когда React CMS попал в тот же webpack-граф. Этот фронт это Vue с SSR, не SPA. Админка на части продуктов это React. Такое разделение нормально. Поломка это один бандл. HTML каталога тогда качает граф, который знает даты, таблицы и toolkit форм, который посетитель не открывает.
Гидратация тоже билась. Vue печатал даты в UTC на сервере. Общий React-остров брал часовой пояс браузера. Разметка не совпала. Страница рисовалась дважды. Пользователи видели вспышку и более тяжёлый скрипт. nginx не мог кэшировать публичную оболочку, которая всё ещё тянула чанки CMS.
Публичные страницы гидрирует только Vue.
Два приложения Vite, одна cookie
Публичка остаётся Vue SSR. Админка это вторая сборка Vite на /admin или втором хосте. Оба ходят в /api с cookie Sanctum auth_token. Токен не живёт в localStorage. React не получает вторую сессию.
Общее это типы и fetch-хелперы, не UI. Общая библиотека компонентов, которая тащит админскую таблицу в публичный граф, убивает разделение.
Я разнёс конфиги Vite и смотрел публичный манифест. Пак локалей date-fns и виртуализатор таблицы всё ещё всплывали, пока barrel-файл реэкспортировал админский виджет. Tree-shaking не спасает общий components/index.ts. Публичка импортирует fetch-клиент. Админка импортирует таблицу. Общего дерева рендера нет.
Что качает посетитель
Payload листинга это одна локаль. Скрипт это runtime Vue этой страницы. Чанки React грузятся после того, как вошедший редактор открыл админку. nginx может кэшировать публичный HTML без графа CMS. В этом смысл SSR здесь, не второй фреймворк в футере.
Мерял размер отдачи на /en/notes до логина. Если там есть React, разделение сломалось. После логина /admin может грузить React. Cookie та же. Документ нет. Публичный HIT в nginx не должен содержать админский остров, иначе следующий аноним платит за CMS и может гидрировать чужое дерево.
Какой опыт из этого
Меряю объём публичного JS и первую гидрацию дат, не то, работает ли форма админки. Если каталог платит за toolkit таблиц, графы всё ещё один.
Общему UI-пакету и одному webpack-графу я не верю. Типы и fetch можно делить. Деревья рендера нет. Cookie Sanctum это единственная общая сессия.
Правило, которое оставляю: два приложения Vite. Vue гидрирует публичный сайт. React грузится в админке после логина. nginx кэширует публичный HTML без чанков CMS.