静态站点生成

SSG（Static Site Generation） 在 构建时 把页面编成 HTML（及少量 JS/CSS），部署到 CDN。运行时无 Node（除非另挂 API）。Astro、Eleventy、SvelteKit 静态 adapter、Next 的 output: 'export' 都属于这一族。

学习目标

• 区分 SSG、SSR、CSR 与 ISR 的触发时机
• 对照 Next.js 数据与渲染 理解本站差异
• 说清 SSG 对 SEO 与 html-css-essentials 首屏的意义

四种渲染（何时生成 HTML）

模式	HTML 生成时机	典型框架
CSR	浏览器执行 JS 后	Vite + react-essentials SPA
SSG	build 时	Astro、11ty、Next export
SSR	每次请求	Next、SvelteKit 默认
ISR	构建 + 定时/按需再生成	Next revalidate

SSG 的 优点：CDN 友好、成本低、攻击面小。缺点：构建时数据快照；强个性化、实时库存类页面不适合纯 SSG。

构建流水线

内容源（MD/MDX/CMS/API@build）
        ↓
   模板 / 组件编译
        ↓
   静态 HTML + assets → dist/ 或 _site/
        ↓
   上传 Netlify / Cloudflare Pages / S3+CDN

与 frontend-toolchain-essentials 的 npm run build 一致；差别在 框架是否默认静态（Astro）还是 需配置 export（Next）。

对照 Next.js SSG

Next App Router 常见写法：

// 构建时生成路径
export async function generateStaticParams() {
  return [{ slug: "react-essentials" }, { slug: "vue-essentials" }];
}

	Next SSG	Astro 默认
组件模型	React RSC	.astro + 可选岛
动态路由	generateStaticParams	getStaticPaths 风格 API
混合	同项目可 SSR 部分路由	也可开 SSR 路由

本站 platform 用 SSR + 缓存，因 track 数据来自 Java API；纯 Markdown 镜像站 则更适合 Astro/11ty 全量 SSG。

练习

• 画一张表：你的博客 / 文档 / 后台 各适合 CSR、SSG、SSR 哪一种
• 读 Next 文档 output: 'export' 限制列表（Dynamic Routes、Server Actions 等）
• 说明 SSG 构建变慢时，你会拆 增量构建 还是换 ISR

小结

SSG = 构建时定稿 HTML，CDN 直出；选型看内容新鲜度与个性化程度。 下一课从包体积与运行时角度对比 React 生态。