Next.js静态生成：性能优化与实战技巧

1. Next.js 静态生成：被低估的性能利器

作为一名长期使用 Next.js 的前端工程师，我发现很多开发者对静态生成(Static Generation)的理解还停留在"只能做静态网站"的层面。实际上，Next.js 的静态生成功能远比想象中强大，它是我在性能优化工具箱中最常使用的秘密武器。

静态生成的核心思想很简单：在构建阶段(build time)就预先渲染好页面，而不是等到用户请求时才渲染。这就像餐厅提前准备好套餐，而不是等客人点单后才开始烹饪。但它的精妙之处在于，Next.js 为这种看似简单的机制赋予了惊人的灵活性。

2. 静态生成的工作原理

2.1 构建时渲染机制

当运行 next build 命令时，Next.js 会执行以下流程：

1. 识别所有需要静态生成的页面
2. 调用这些页面的 getStaticProps 函数获取数据
3. 将数据与React组件结合，生成最终的HTML文件
4. 将这些HTML文件与相关资源一起打包

对于动态路由页面(如 /posts/[id])，还需要通过 getStaticPaths 明确指定要预生成哪些路径。这个过程就像为餐厅准备多套不同的套餐组合。

2.2 关键API解析

getStaticProps

这个函数在构建时运行，负责获取页面所需数据。典型实现如下：

javascript复制export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()
  
  return {
    props: {
      posts,
    },
    // 启用增量静态再生，60秒刷新一次
    revalidate: 60,
  }
}

getStaticPaths

用于动态路由页面，指定哪些路径需要预生成：

javascript复制export async function getStaticPaths() {
  const res = await fetch('https://api.examp