## 1. 什么是静态站点生成（SSG）？ - 定义：页面的 HTML 在构建时（next build）生成，而非每次请求时。 - 输出结果：每个页面对应一个 .html 文件（或 /page/index.html 结构），以及必要的 JS/CSS 资源。 - 优势： - ⚡ 极快的加载速度（HTML 可被 CDN 缓存）。 - 💰 静态托管服务（如 Vercel、Netlify、GitHub Pages）分发，无需运行 Node.js 服务器。 - 🔒 更高的安全性与可扩展性（无需实时连接数据库）。 - 🕷️ SEO 友好（爬虫直接抓取完整 HTML） > ✅ 适用于：博客、文档站、营销页、产品介绍页等内容变动不频繁的场景。 ## 2. SSG 的工作原理 - **构建时渲染**：在运行 `next build` 命令时，Next.js 会根据页面代码生成静态 HTML、CSS 和 JavaScript 文件。这些文件是预计算的，不依赖于实时数据请求。 - **请求流程**： - 用户访问页面时，直接从静态服务器（如 Vercel 或 Netlify）获取预生成的 HTML。 - 如果页面需要客户端交互，React 会通过 hydration（水合）过程在浏览器中激活 JavaScript，使页面变得互动。 - **数据获取**：SSG 支持在构建时从外部 API、数据库或文件系统中获取数据，但数据必须是静态的或可预测的。如果数据频繁变化，SSG 可能不适合（此时可结合 ISR - Incremental Static Regeneration）。 - **部署**：生成的静态文件可以轻松部署到任何静态托管服务，支持全球 CDN 分发，提高访问速度。 > 在 Next.js 的 App Router（推荐的新路由系统，从 v13 开始）中，SSG 是默认的渲染模式，除非你显式指定动态渲染。 ## 3. 在 Next.js 中如何使用 SSG？ Next.js 支持两种路由系统：传统的 Pages Router 和新的 App Router。SSG 在两者中实现方式不同。 ### 3.1 App Router 下的 SSG（推荐方式）从 Next.js 13 开始，App Router（`/app` 目录）简化了渲染。SSG 是默认模式，无需额外函数，除非涉及动态数据。 - **基本示例：** ```js // app/about/page.js import React from "react"; async function getData() { const res = await fetch("https://api.example.com/data", { cache: "force-cache", }); // 默认缓存，确保静态 return res.json(); } export default async function About() { const data = await getData(); return (

About Page

{data.message}

); } ``` ✅ 这个页面会在 next build 时生成 app/about/index.html（如果启用了静态导出）。 - **动态路由：** 在 **/app/posts/[id]/page.js** 中，使用 **generateStaticParams** 生成路径。 ```jsx // app/posts/[id]/page.js export async function generateStaticParams() { return [{ id: "1" }, { id: "2" }]; // 生成路径 } async function getPost(id) { const res = await fetch(`https://api.example.com/posts/${id}`); return res.json(); } export default async function Post({ params }) { const post = await getPost(params.id); return

{post.title}

; } ``` > 🔔 注意：`generateStaticParams` 必须返回一个确定的路径数组，不能依赖运行时用户输入。 > 🔔 缓存控制：使用 fetch 的 `cache: 'force-cache'`（默认）确保静态生成。revalidate 可以设置 ISR（见下文）。 ### 3.2 Pages Router 中的 SSG 在 `/pages` 目录下创建页面文件（如 `pages/about.js`），使用 `getStaticProps` 来获取数据。 - **基本示例：** ```jsx // pages/about.js import React from "react"; export default function About({ data }) { return (

About Page

{data.message}

); } // getStaticProps：在构建时运行，获取数据 export async function getStaticProps() { // 可以从 API、数据库或文件获取数据 const res = await fetch("https://api.example.com/data"); const data = await res.json(); return { props: { data }, // 将数据传递给页面组件 }; } ``` - **动态路由 SSG：** 对于带参数的页面（如 `/posts/[id].js`），需要结合 `getStaticPaths` 生成所有可能的路径。 ```jsx // pages/posts/[id].js export default function Post({ post }) { return

{post.title}

; } export async function getStaticPaths() { // 返回所有可能的路径 const paths = [{ params: { id: "1" } }, { params: { id: "2" } }]; return { paths, fallback: false }; // fallback: false 表示未预生成的路径返回 404 } export async function getStaticProps({ params }) { const res = await fetch(`https://api.example.com/posts/${params.id}`); const post = await res.json(); return { props: { post } }; } ``` > - Fallback 选项： > > - fallback: false：只渲染预生成的路径，其他路径 404。 > - fallback: true：未预生成的路径先显示加载状态，然后动态生成（结合 SSR）。 > - fallback: 'blocking'：阻塞式渲染，未预生成路径在服务器端生成。 ## 4. 进阶：增量静态再生（ISR）—— SSG 的增强版如果你希望内容能定期更新而不重新部署，允许页面在构建后定期重新生成，而无需全站重建，用 ISR： ### 4.1 App Router（推荐，新项目首选）最简洁方式：只需一行 `export const revalidate` - **静态列表页（每 60 秒更新一次）** ```tsx // app/products/page.tsx export const revalidate = 60; // 单位：秒 export default async function ProductsPage() { const products = await fetch("https://api.example.com/products").then((res) => res.json() ); return (

{p.name}

); } ``` - **动态路由页（文章详情）** ```tsx // app/blog/[slug]/page.tsx export const revalidate = 300; // 5 分钟 export async function generateStaticParams() { // 只预生成热门文章（可选） return [{ slug: "hello-world" }, { slug: "nextjs-tips" }]; } export default async function BlogPost({ params, }: { params: { slug: string }; }) { const post = await fetch(`https://api.example.com/posts/${params.slug}`).then( (res) => res.json() ); return (

{post.title}

{post.content}

); } ``` - **极简单 fetch 控制（混合使用）** ```tsx export default async function Page() { const data = await fetch("https://api.example.com/data", { next: { revalidate: 600 }, // 只对这个请求 10 分钟更新一次 }).then((r) => r.json()); return

{data.value}

; } ``` ### 4.2 Pages Router（旧项目仍常见，最简写法） ```tsx // pages/products/[id].tsx export async function getStaticPaths() { return { paths: [], // 可先留空 fallback: "blocking", // 或 true }; } export async function getStaticProps({ params }) { const product = await fetch( `https://api.example.com/products/${params.id}` ).then((res) => res.json()); return { props: { product }, revalidate: 60, // ← 核心一行 }; } export default function ProductPage({ product }) { return

{product.name}

; } ``` > ✅ ISR 兼顾了 SSG 的速度和一定程度的实时性。 > 一句话总结目前最简洁的现代写法（App Router）： > 想做 ISR？ > → 在页面文件顶部写 export const revalidate = 秒数; > 完事~ 🎉 ## 总结在 Next.js 16 中使用 SSG： - 默认即 SSG：App Router 中的异步服务端组件会自动静态生成。 - 动态路由 → 用 generateStaticParams()。 - 纯静态部署 → 配置 output: 'export'。 - 需要更新？ → 用 revalidate 启用 ISR。 - 不适合高频更新或用户私有数据。 > 📌 口诀： > > 内容稳 → SSG；内容变 → SSR/ISR；交互强 → CSR。

相关文章

Windows 终端配置

Next.js中的cache（四种缓存机制）

相关文章

Windows 终端配置

Next.js中的cache（四种缓存机制）