React-Admin darf nicht auf Vue-SSR mitfahren
Die Public-Site ist Vue-SSR. Das CMS oft React. Ein Webpack-Graph schickt beides. TTI im Katalog zahlt den Editor.
TTI im öffentlichen Katalog sprang, nachdem ein React-CMS in denselben Webpack-Graph kam. Dieses Frontend ist Vue mit SSR, keine SPA. Admin ist auf manchen Produkten React. Die Trennung ist in Ordnung. Der Fehler ist ein Bundle. Der Katalog-HTML lädt dann einen Graphen mit Dates, Tabellen und Form-Toolkit, den der Besucher nie öffnet.
Hydration kämpfte auch. Vue druckte UTC-Daten auf dem Server. Eine gemeinsame React-Insel nahm die Browser-Zeitzone. Das Markup passte nicht. Die Seite renderte zweimal. Nutzer sahen einen Blitz und ein schwereres Script. nginx konnte keine öffentliche Hülle cachen, die noch CMS-Chunks zog.
Public-Seiten hydrieren nur mit Vue.
Zwei Vite-Apps, ein Cookie
Public bleibt die Vue-SSR-App. Admin ist ein zweiter Vite-Build auf /admin oder einem zweiten Host. Beide sprechen /api mit dem Sanctum-Cookie auth_token. Der Token landet nie in localStorage. React bekommt keine zweite Session.
Gemeinsam sind Types und Fetch-Helfer, nicht UI. Eine Shared-Library, die die Admin-Tabelle in den Public-Graph zieht, tötet die Trennung.
Ich habe die Vite-Configs getrennt und das Public-Manifest gelesen. Ein date-fns-Locale-Pack und ein Table-Virtualizer tauchten weiter auf, bis eine Barrel-Datei ein Admin-Widget reexportierte. Tree-Shaking rettet kein gemeinsames components/index.ts. Public importiert einen Fetch-Client. Admin importiert die Tabelle. Sie teilen keinen Render-Tree.
Was der Besucher lädt
Das Listen-Payload ist eine Locale. Das Script ist die Vue-Runtime dieser Seite. React-Chunks laden, nachdem ein eingeloggter Editor Admin öffnet. nginx kann das öffentliche HTML ohne CMS-Graph cachen. Das ist der Sinn von SSR hier, nicht ein zweites Framework im Footer.
Ich habe die Transfergröße auf /en/notes vor dem Login gemessen. Taucht dort React auf, ist die Trennung kaputt. Nach dem Login darf /admin React laden. Das Cookie ist dasselbe. Das Dokument nicht. Ein öffentlicher HIT in nginx darf keine Admin-Insel enthalten, sonst zahlt der nächste anonyme Besucher das CMS und hydriert vielleicht den falschen Baum.
Was ich daraus mitnehme
Ich messe öffentlichen JS-Transfer und die erste Hydration von Dates, nicht ob das Admin-Formular läuft. Zahlt der Katalog ein Table-Toolkit, sind die Graphen noch eins.
Einem Shared-UI-Paket und einem Webpack-Graph traue ich nicht. Types und Fetch dürfen geteilt sein. Render-Trees nicht. Das Sanctum-Cookie ist die einzige gemeinsame Session.
Die Regel, die ich behalte: zwei Vite-Apps. Vue hydriert die Public-Site. React lädt im Admin nach dem Login. nginx cached öffentliches HTML ohne CMS-Chunks.