Vue SSR

Минимальная структура: ``` src/ App.vue main.js # фабрика приложения entry-client.js # клиентский entry entry-server.js # серверный entry server.js # Express-сервер index.html ``` Фабрика приложения — ключевой момент. Каждый запрос должен получить свежий экземпляр app, иначе state будет расшарен между пользователями: ```javascript // src/main.js import { createSSRApp } from 'vue' import App from './App.vue' import { createRouter } from './router' import { createPinia } from 'pinia' export function createApp() { const app = createSSRApp(App) // не createApp — именно createSSRApp const router = createRouter() const pinia = createPinia() app.use(router) app.use(pinia) return { app, router, pinia } } ``` ```javascript // src/entry-client.js import { createApp } from './main' const { app, router } = createApp() router.isReady().then(() => { app.mount('#app') }) ``` ```javascript // src/entry-server.js import { renderToString } from 'vue/server-renderer' import { createApp } from './main' export async function render(url) { const { app, router, pinia } = createApp() await router.push(url) await router.isReady() const html = await renderToString(app) const piniaState = JSON.stringify(pinia.state.value) return { html, piniaState } } ``` ```javascript // server.js import express from 'express' import { readFileSync } from 'node:fs' import { createServer as createViteServer } from 'vite' async function start() { const app = express() const vite = await createViteServer({ server: { middlewareMode: true }, appType: 'custom' }) app.use(vite.middlewares) app.use('*', async (req, res) => { const url = req.originalUrl let template = readFileSync('index.html', 'utf-8') // Vite трансформирует HTML (инжектит HMR-клиент в dev) template = await vite.transformIndexHtml(url, template) // Загружает серверный entry через Vite (с HMR в dev) const { render } = await vite.ssrLoadModule('/src/entry-server.js') const { html: appHtml, piniaState } = await render(url) const finalHtml = template .replace('', appHtml) .replace( '', `` ) res.status(200).set({ 'Content-Type': 'text/html' }).end(finalHtml) }) app.listen(3000) } start() ``` ```html Vue SSR

``` ## 📌 Реальные кейсы - **SEO-критичный лендинг** — нужен SSR для индексации, но Nuxt — оverkill для 5 страниц. Ручной SSR на Vite + Express даёт полный контроль. - **Микрофронтенд** — Vue SSR-модуль внутри большей системы. Nuxt навязывает свою структуру, ручной SSR вписывается в любую архитектуру. ## Частые ошибки ```javascript // ❌ Один экземпляр app на все запросы — state утекает между пользователями const { app } = createApp() // вне обработчика запроса app.use('*', async (req, res) => { const html = await renderToString(app) // тот же app для всех }) // ✅ Новый экземпляр на каждый запрос app.use('*', async (req, res) => { const { app: vueApp } = createApp() // свежий экземпляр const html = await renderToString(vueApp) }) ``` ```javascript // ❌ Использование createApp вместо createSSRApp import { createApp } from 'vue' // не поддерживает гидратацию // ✅ createSSRApp — включает hydration на клиенте import { createSSRApp } from 'vue' ``` ## Резюме SSR без Nuxt: фабрика через `createSSRApp`, два entry-point, `renderToString` на сервере, `vite.ssrLoadModule` для dev. Главное — новый экземпляр app на каждый запрос. Для production нужна отдельная сборка серверного бандла через `vite build --ssr`. ---

Как создать SSR-приложение на Vue без Nuxt?