Next.js静态站点生成(SSG)

静态站点生成（Static Site Generation, SSG）是Next.js提供的核心渲染策略之一，它允许在构建时（build time）预渲染页面，生成静态HTML文件。这些文件可直接由CDN分发，无需实时服务器计算，从而显著提升性能、安全性和可扩展性。

核心原理[编辑 | 编辑源代码]

SSG的工作原理分为两个阶段：

构建阶段：Next.js在项目构建时执行页面组件的`getStaticProps`函数，获取数据并生成静态HTML。
请求阶段：用户访问时直接返回预生成的HTML，无需动态渲染。

基础用法[编辑 | 编辑源代码]

以下是一个使用SSG的页面示例：

// pages/blog/[slug].js
export async function getStaticProps({ params }) {
    const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(res => res.json());
    return {
        props: { post },
        revalidate: 60 // 增量静态再生（ISR）的刷新间隔
    };
}

export async function getStaticPaths() {
    const posts = await fetch('https://api.example.com/posts').then(res => res.json());
    const paths = posts.map(post => ({ params: { slug: post.slug } }));
    return { paths, fallback: 'blocking' };
}

export default function BlogPost({ post }) {
    return (
        <article>
            <h1>{post.title}</h1>
            <div>{post.content}</div>
        </article>
    );
}

关键函数说明：

getStaticProps：在构建时获取数据，返回props对象
getStaticPaths：指定动态路由的预渲染路径（用于动态路由页面）
revalidate：启用增量静态再生（ISR），单位秒

高级特性[编辑 | 编辑源代码]

增量静态再生（ISR）[编辑 | 编辑源代码]

Next.js允许在SSG基础上实现动态更新：

// 页面将在构建时生成，之后每60秒最多重新生成一次
export async function getStaticProps() {
    return {
        props: { data: /* ... */ },
        revalidate: 60 
    };
}

内容预取[编辑 | 编辑源代码]

Next.js自动预取页面链接的静态资源，通过next/link实现：

import Link from 'next/link';

<Link href="/blog/nextjs-ssg" prefetch={false}>
    <a>SSG详解</a>
</Link>

性能对比[编辑 | 编辑源代码]

静态生成与其他渲染策略的对比：

渲染策略比较
策略	生成时机	适用场景
构建时 \| 内容不频繁变更的页面
构建时+按需更新 \| 需要定期更新的内容
每次请求时 \| 个性化/实时数据

数学建模[编辑 | 编辑源代码]

SSG的响应时间可表示为： $T_{r e s p o n s e} = T_{C D N} + \frac{S_{H T M L}}{B}$ 其中：

$T_{C D N}$ ：CDN延迟
$S_{H T M L}$ ：HTML文件大小
$B$ ：带宽

实际应用案例[编辑 | 编辑源代码]

场景：技术文档网站 1. 所有文档页面在构建时通过Markdown文件生成 2. 使用getStaticPaths处理文档路由 3. 通过ISR实现文档更新（revalidate: 3600）

最佳实践[编辑 | 编辑源代码]

将频繁访问的页面设为SSG（如首页、产品页）
对动态路由使用fallback: 'blocking'确保SEO兼容性
大型站点使用getStaticPaths的分页功能
结合next/image自动优化静态图片

限制与注意事项[编辑 | 编辑源代码]

1. 不适合实时数据（需结合客户端渲染） 2. 构建时间随页面数量线性增长 3. 动态路由需预定义所有可能路径（或使用fallback）

通过SSG，开发者能构建出高性能的Web应用，同时保持优秀的SEO表现。对于大多数内容型网站，这是Next.js推荐的默认渲染策略。