# SPA architecture The client-rendered path: a static host, Vite or vanilla. The framework is SPA-native — components register at load, the page is one document, routing and state live in the browser. Inside Next/Nuxt/SvelteKit/Astro instead? That's the **SSR** path — [ssr-integration.md](ssr-integration.md); the two diverge sharply on registration, routing, and state. (Claims re-verified against the kit's live source 2026-08-26; re-verify on a MINOR cut.) ## The host document One static `index.html` whose job is to load CSS in cascade order and register components once. npm-consumer paths, which is what `adia-scaffold spa` emits (pre-wired for Vite — `vite.config.js` + `package.json` included): ```html ``` ```js // components/my-surface/my-surface.js import '@adia-ai/web-components/styles/host.css'; // foundation: tokens + resets + page frame import '@adia-ai/web-components/styles/index.css'; // barrel: every component's CSS (both, in order) import '@adia-ai/web-components/styles/scale.css'; // opt-in sizing register (only if a surface uses [scale]) import { defineIfFree } from '@adia-ai/web-components/core/register'; // … the rest of the registration barrel + your surface's custom-element class ``` **A raw `/node_modules/...` ``/`