Vite 项目的 SSG 与预渲染：vike、路由预渲染与静态分发

收录慢   → 爬虫需要执行 JS 才能看到内容，抓取预算被浪费
分享差   → 社交抓取器不执行 JS，卡片只有裸链接
首屏慢   → 白屏时间取决于 JS 下载与执行，LCP 被拖后

内容频繁变、需登录态、强个性化 → SSR
内容稳定、追求极致首屏与低成本 → SSG
内容量极大、无法全量构建 → ISR 或按需再生成
纯后台系统、无 SEO 诉求 → CSR 就够

npm i vike vike-react

// vite.config.ts
import { defineConfig } from 'vite'
import vike from 'vike/plugin'

export default defineConfig({
  plugins: [vike({ prerender: true })],
})

// vite.config.ts
import prerender from 'vite-plugin-prerender'

export default defineConfig({
  plugins: [
    prerender({
      routes: ['/', '/about', '/posts/hello'],
      renderer: '@prerenderer/renderer-puppeteer',
    }),
  ],
})

// scripts/prerender.mjs
import { readFile, writeFile, mkdir } from 'node:fs/promises'

const routes = ['/', '/about', '/posts/hello']
const template = await readFile('dist/index.html', 'utf8')

for (const route of routes) {
  const html = await render(route, template)
  const dir = 'dist' + (route === '/' ? '' : route)
  await mkdir(dir, { recursive: true })
  await writeFile(dir + '/index.html', html)
}

// scripts/build-data.mjs
const res = await fetch('https://api.example.com/posts')
const posts = await res.json()
await writeFile('src/data/posts.json', JSON.stringify(posts))

export default defineConfig({
  plugins: [
    {
      name: 'inject-data',
      transformIndexHtml(html) {
        return html.replace(
          '</head>',
          `<script>window.__DATA__=${JSON.stringify(data)}</script></head>`,
        )
      },
    },
  ],
})

<title>Vite 的 SSG 与预渲染 | 站点名</title>
<meta name="description" content="页面描述" />
<meta property="og:title" content="分享标题" />
<meta property="og:image" content="https://cdn.example.com/cover.png" />

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Vite 的 SSG 与预渲染",
  "datePublished": "2026-10-03"
}
</script>

// scripts/sitemap.mjs
const routes = ['/', '/about', '/posts/hello']
const urls = routes.map((r) => `  <url><loc>https://example.com${r}</loc></url>`).join('\n')
const xml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${urls}</urlset>`
await writeFile('dist/sitemap.xml', xml)

User-agent: *
Allow: /
Disallow: /admin/

Sitemap: https://example.com/sitemap.xml

<link rel="canonical" href="https://example.com/about" />

dist/  index.html
       about/index.html
       posts/hello/index.html
       assets/index-a1b2c3.js

- 发布时先上传 assets，再上传 HTML（避免旧 HTML 引用新资源前资源缺失）
- 刷新 CDN 时只刷 HTML 与 sitemap，不动带 hash 的资源
- 用目录默认索引命中 about/ 到 about/index.html

// scripts/rebuild.mjs
const changed = process.argv.slice(2)   // 变更的 slug 列表
const routes = changed.map((s) => `/posts/${s}`)
await prerenderRoutes(routes)           // 只渲染这些路由

CMS webhook → CI 触发 → 计算受影响路由 → 局部预渲染 → 增量上传
纯静态托管 → 无服务端，只能全量重建后整体替换

□ 关键路由已预渲染并产出完整 HTML
□ 每路由独立 title、description 与 OG，og:image 用绝对 URL
□ JSON-LD 与正文一致
□ sitemap.xml 与 robots.txt 构建期生成，每页 canonical 唯一
□ 带 hash 资源 immutable、HTML no-cache，发布顺序先 assets 后 HTML
□ 路由上千时已做局部预渲染
□ 已用 curl 抓取产出 HTML 核对内容与 meta