编辑“︁Next.js静态站点生成(SSG)”︁

{{DISPLAYTITLE:Next.js静态站点生成(SSG)}}

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

== 核心原理 ==
SSG的工作原理分为两个阶段：
# '''构建阶段'''：Next.js在项目构建时执行页面组件的`getStaticProps`函数，获取数据并生成静态HTML。
# '''请求阶段'''：用户访问时直接返回预生成的HTML，无需动态渲染。

<mermaid>
graph LR
    A[构建阶段] --> B[执行getStaticProps]
    B --> C[生成静态HTML]
    D[请求阶段] --> E[返回预渲染HTML]
</mermaid>

== 基础用法 ==
以下是一个使用SSG的页面示例：

<syntaxhighlight lang="javascript">
// 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>
    );
}
</syntaxhighlight>

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

== 高级特性 ==
=== 增量静态再生（ISR） ===
Next.js允许在SSG基础上实现动态更新：
<syntaxhighlight lang="javascript">
// 页面将在构建时生成，之后每60秒最多重新生成一次
export async function getStaticProps() {
    return {
        props: { data: /* ... */ },
        revalidate: 60 
    };
}
</syntaxhighlight>

=== 内容预取 ===
Next.js自动预取页面链接的静态资源，通过<code>next/link</code>实现：
<syntaxhighlight lang="javascript">
import Link from 'next/link';

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

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

{| class="wikitable"
|+ 渲染策略比较
! 策略 !! 生成时机 !! 适用场景
|-
| '''SSG''' | 构建时 | 内容不频繁变更的页面
|-
| '''ISR''' | 构建时+按需更新 | 需要定期更新的内容
|-
| '''SSR''' | 每次请求时 | 个性化/实时数据
|}

== 数学建模 ==
SSG的响应时间可表示为：
<math>T_{response} = T_{CDN} + \frac{S_{HTML}}{B}</math>
其中：
* <math>T_{CDN}</math>：CDN延迟
* <math>S_{HTML}</math>：HTML文件大小
* <math>B</math>：带宽

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

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

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

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

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js渲染策略]]