Animation: a browser requests /menu, the server makes a new app, loads data, renders HTML and sends it. The browser shows the HTML, downloads JavaScript and hydrates, after which the page is interactive

` inside a `

`. const rendered = Math.random() > 0.5 ? "server-ish" : "browser-ish"; const greeting = ref("Welcome"); onMounted(() => { greeting.value = "Welcome back, " + (navigator.language || "friend"); }); `, "main.ts": `import { createSSRApp } from "vue"; renderToString(createSSRApp(Clock)).then((html) => { document.getElementById("app")!.innerHTML = html.replace(/server-ish|browser-ish/, "from-server"); setTimeout(() => createSSRApp(Clock).mount("#app"), 1100); }); `, }} /> - **What happened:** the random text differed, so the Console shows a mismatch warning. - The time also differed, but `data-allow-mismatch="text"` (Vue 3.5) told Vue it is expected. - The greeting matched first, then changed in `onMounted`, which runs only in the browser. That is the clean fix. ### Lazy Hydration - Hydrating a big page costs time, even for parts nobody uses yet. - Vue 3.5 can hydrate async components **later**: - `hydrateOnIdle()`: when the browser is idle - `hydrateOnVisible()`: when it scrolls into view - `hydrateOnInteraction("click")`: on the first click - Until then, the HTML is visible but not interactive. const likes = ref(0); onMounted(() => console.log("Reviews hydrated now")); `, "App.vue": ` `, "main.ts": `import { createSSRApp } from "vue"; renderToString(createSSRApp(App)).then((html) => { document.getElementById("app")!.innerHTML = html; createSSRApp(App).mount("#app"); console.log("Page hydrated, Reviews still waiting"); }); `, }} /> **Simple lesson:** server and first browser render must match. Put browser-only values in `onMounted`. ## Server Data and State Transfer - `onMounted` does **not** run on the server. Data loaded there is missing from the HTML. - `onServerPrefetch(async () => ...)` runs on the server before rendering. Load data there. - The browser must not load the same data again. The server writes the data into the page as JSON. - On hydration, the app reads that JSON instead of fetching. This is **state transfer**. const dishes = inject("dishes") as Ref; onServerPrefetch(async () => { const res = await fetch("https://api.meeraskitchen.dev/dishes"); dishes.value = ((await res.json()) as { name: string }[]).map((d) => d.name); }); `, "main.ts": `import { createSSRApp } from "vue"; async function serverRender(): Promise { const state = createState(); const app = createSSRApp(Menu); app.provide("dishes", state.dishes); const html = await renderToString(app); const json = JSON.stringify(state.dishes.value).replace(/window.__STATE__ = \${json}<\\/script>\`; } serverRender().then((page) => { console.log("Server page:", page); const saved = JSON.parse(page.match(/__STATE__ = (.*)<\\/script>/)![1]) as string[]; document.getElementById("app")!.innerHTML = page.replace(/ `, "main.ts": `import { createSSRApp, h } from "vue"; const routes = [ { path: "/", title: "Meera's Kitchen", body: "South Indian food since 2019." }, { path: "/menu", title: "Menu", body: "Dosa, Idli, Vada, Pongal." }, { path: "/contact", title: "Contact", body: "Call 98765 43210." }, ]; async function build(): Promise { const out = document.getElementById("app")!; for (const r of routes) { const html = await renderToString(createSSRApp({ render: () => h(Page, { title: r.title, body: r.body }) })); const file = r.path === "/" ? "dist/index.html" : \`dist\${r.path}/index.html\`; console.log("wrote", file, html.length, "bytes"); out.insertAdjacentHTML("beforeend", \`

\${file}

\`); out.lastElementChild!.querySelector("code")!.textContent = html; } } build(); `, }} /> ## How a Real SSR Project Is Wired - A Vite SSR project has **two entry files** and a small server. - `main.ts` exports a `createApp()` **function**, so each request gets a fresh app. - `entry-server.ts` renders a URL to HTML. `entry-client.ts` hydrates it in the browser. - `server.js` reads `index.html`, puts the rendered HTML in it, and sends it. ```ts // src/main.ts: shared by server and browser import { createSSRApp } from "vue"; import App from "./App.vue"; import { createRouter } from "./router"; export function createApp() { const app = createSSRApp(App); const router = createRouter(); // createMemoryHistory on the server, createWebHistory in the browser app.use(router); return { app, router }; } ``` ```ts // src/entry-server.ts: runs on the server for every request import { renderToString } from "vue/server-renderer"; import { createApp } from "./main"; export async function render(url: string) { const { app, router } = createApp(); await router.push(url); await router.isReady(); const ctx = {}; const html = await renderToString(app, ctx); return { html, ctx }; } ``` ```ts // src/entry-client.ts: runs in the browser import { createApp } from "./main"; const { app, router } = createApp(); router.isReady().then(() => app.mount("#app")); // hydrates the server HTML ``` ```js // server.js (Express, simplified) app.use("*", async (req, res) => { const { html, ctx } = await render(req.originalUrl); const page = template .replace("", ctx.head ?? "") .replace("", html); res.status(200).set({ "Content-Type": "text/html" }).end(page); }); ``` - Build both halves with `vite build` (browser) and `vite build --ssr src/entry-server.ts` (server). - Most teams let **Nuxt** do all of this. You will meet it in **Nuxt: Full-Stack Vue**. ### Head Tags and SEO - Search engines and link previews read `` and `<meta>` tags from the server HTML. - A component can add tags through the **SSR context**: `useSSRContext()` returns the `ctx` object passed to `renderToString`. - The server then puts `ctx.head` into the page template. const props = defineProps({ dish: { type: String, required: true } }); // The SSR context exists only while the server renders. const ctx = useSSRContext<{ head?: string }>(); if (ctx) { ctx.head = \`<title>\${props.dish} | Meera's Kitchen\\n\`; } `, "main.ts": `import { createSSRApp, h } from "vue"; const template = \`

\`; async function serve(dish: string): Promise { const ctx: { head?: string } = {}; const html = await renderToString(createSSRApp({ render: () => h(DishPage, { dish }) }), ctx); return template.replace("", ctx.head ?? "").replace("", html); } serve("Masala Dosa").then((page) => { const pre = document.createElement("pre"); pre.textContent = page; document.getElementById("app")!.appendChild(pre); console.log("The page a search engine sees has its own title."); }); `, }} /> - **What happened:** the component set `ctx.head`, and the server put the title and description into ``. - In Nuxt, the same job is one line: `useHead({ title: "Masala Dosa" })` or `useSeoMeta()`. `useSSRContext()` gives `undefined` in the browser, so the `if (ctx)` check keeps this component safe on both sides. In a real project, wrap server-only code in `if (import.meta.env.SSR)` so Vite drops it from the browser bundle. ## Streaming SSR - `renderToString` waits for the **whole** page before sending anything. - **Streaming** sends the HTML in pieces, as soon as each piece is ready. - The visitor sees the top of the page while slow parts, such as reviews, are still loading. - Vue gives `renderToNodeStream` / `pipeToNodeWritable` for Node.js and `renderToWebStream` for edge servers. // An async setup: the server waits for it before sending this part. await new Promise((r) => setTimeout(r, 900)); const reviews: string[] = ["Crispy dosa! ★★★★★", "Best filter coffee ★★★★"]; `, "Page.vue": ` `, "main.ts": `import { createSSRApp } from "vue"; async function stream(): Promise { const out = document.getElementById("app")!; const reader = renderToWebStream(createSSRApp(Page)).getReader(); const decoder = new TextDecoder(); const start = performance.now(); for (;;) { const { done, value } = await reader.read(); if (done) break; const piece = typeof value === "string" ? value : decoder.decode(value); const ms = Math.round(performance.now() - start); console.log(\`+\${ms} ms: sent \${piece.length} characters\`); const p = document.createElement("pre"); p.textContent = \`+\${ms} ms \${piece}\`; out.appendChild(p); } console.log("Stream finished."); } stream(); `, }} /> - **What happened:** the header arrived at about **+0 ms**. The reviews and footer came about **900 ms** later. - With `renderToString`, the visitor would see nothing for those 900 ms. Async setup inside a page needs a `` boundary in the browser. On the server, the renderer simply waits for it. ## Hybrid Rendering - Real sites mix modes: a static home page, a cached menu, a private dashboard. - **Hybrid rendering** = a different mode for each route. - **Route rules** pick the mode by path. Nuxt reads them from `nuxt.config.ts`: ```ts // nuxt.config.ts (a real Nuxt project) export default defineNuxtConfig({ routeRules: { "/": { prerender: true }, // SSG: built once, served as a file "/menu": { swr: 60 }, // SSR, cached; refreshed in the background after 60 s "/offers": { isr: 3600 }, // like swr, but cached on the host's CDN "/admin/**": { ssr: false }, // CSR: an empty shell, the browser renders it }, }); ``` - **SWR (stale-while-revalidate)** = serve the cached page at once, and if it is too old, render a new one in the background for the **next** visitor. - **ISR (incremental static regeneration)** = the same idea, but the cache lives on the hosting CDN (Vercel, Netlify). - **Edge rendering** = SSR on servers close to the visitor (Cloudflare Workers, Vercel Edge). Faster answers, but no Node.js-only packages. The box below is a tiny pretend server that follows these rules. Press the buttons and read the log. defineProps({ path: { type: String, required: true }, at: { type: Number, required: true }, n: { type: Number, required: true }, }); `, "server.ts": `import { createSSRApp, h } from "vue"; interface Rule { prerender?: boolean; swr?: number; ssr?: boolean; } "/": { prerender: true }, "/menu": { swr: 60 }, "/admin": { ssr: false }, }; let now = 0; // pretend clock, in seconds let renders = 0; const files = new Map(); const cache = new Map(); now += seconds; } async function render(path: string): Promise { renders++; return renderToString(createSSRApp({ render: () => h(Page, { path, at: now, n: renders }) })); } for (const [path, rule] of Object.entries(routeRules)) { if (rule.prerender) files.set(path, await render(path)); } return \`build: prerendered \${files.size} page(s)\`; } const rule = routeRules[path] ?? {}; if (rule.prerender) return \`SSG file → \${files.get(path)}\`; if (rule.ssr === false) return \`CSR shell →

(the browser renders it)\`; if (rule.swr) { const hit = cache.get(path); if (!hit) { const html = await render(path); cache.set(path, { html, at: now }); return \`SWR miss, rendered now → \${html}\`; } const age = now - hit.at; if (age <= rule.swr) return \`SWR fresh hit (age \${age}s) → \${hit.html}\`; render(path).then((html) => cache.set(path, { html, at: now })); return \`SWR stale (age \${age}s), refreshing in background → \${hit.html}\`; } return \`SSR every request → \${await render(path)}\`; } `, "App.vue": ` `, "main.ts": `import { createApp } from "vue"; createApp(App).mount("#app"); `, }} /> - Try: **GET /menu** twice (miss, then fresh hit). Then **Wait 90 s** and **GET /menu** twice more (stale, then the new copy). - **GET /** always returns the file built at t=0. **GET /about** has no rule, so it renders every time.

| Mode | HTML made | Good for | Costs | |---|---|---|---| | CSR | In the browser | Apps behind a login | Slow first view, weak SEO | | SSR | On the server, each request | Fresh or personal data | A server, more care with state | | SSR + SWR/ISR | On the server, then cached | Menus, product pages | Visitors may see a page up to N seconds old | | SSG | At build time | Docs, blogs, marketing | Rebuild when content changes | | Hybrid | A mode per route | Most real websites | A framework such as Nuxt |

**Simple lesson:** pick the mode per page: SSG for static, SSR with a cache for shared data, SSR for personal data, CSR for private apps. ## TL;DR - **SSR + `renderToString(app)`** = the server runs Vue and sends finished HTML. - **Hydration** = `createSSRApp().mount()` attaches Vue to existing HTML. Mismatch? Use `onMounted` or `data-allow-mismatch`. - **Lazy hydration** = `hydrateOnIdle`, `hydrateOnVisible`, `hydrateOnInteraction` (Vue 3.5). - **Fresh app per request** = avoids cross-request state pollution. - **`onServerPrefetch` + state transfer** = load on the server, send the data as JSON. - **`useSSRContext()`** = lets components add head tags for the server page. - **Streaming** = `renderToWebStream` sends HTML in pieces as they are ready. - **SSG / SWR / ISR** = build once / serve cached and refresh in the background. - **Hybrid** = a mode per route, with route rules. ## Common mistakes

| Mistake | Wrong idea | Correct idea | What goes wrong | |---|---|---|---| | Module-level state on the server | Each visitor gets fresh modules | Create app, router and store per request | Users see each other's data | | Random values or time in templates | Server and browser agree | Set them in `onMounted` | Hydration mismatch warnings | | `window` in setup | The server has a window | Use it in `onMounted` | The server crashes | | Fetching in `onMounted` for SEO pages | The HTML will include it | Use `onServerPrefetch` | Search engines see an empty list | | Fetching again after hydration | Two requests are harmless | Transfer state as JSON | Slower pages and flicker | | Unescaped JSON in a script tag | JSON is always safe | Escape `<` as `\u003c` | Script injection | | SSG for data that changes every minute | Static is always best | Use SSR or a cache rule | Stale pages until the next build |

## Check Yourself ## Exercises ## What to Remember - SSR sends HTML first. Hydration makes it interactive. - Create a fresh app, router and store per request. - The first browser render must match the server. Browser-only values go in `onMounted`. - Load server data in `onServerPrefetch`, and transfer it as escaped JSON. - Pick per page: SSG for static, SSR for fresh, CSR for private apps. Next: **Nuxt: Full-Stack Vue**

Meera's Kitchen

Reviews (click once to wake them up)

{{ title }}

{{ dish }}

Meera's Kitchen