Next.js静态导出

Next.js静态导出

Next.js静态导出（Static Export）是Next.js提供的一种预渲染策略，允许开发者将动态生成的页面提前构建为静态HTML文件。这种技术适用于内容不频繁变更的网站（如博客、文档站点或营销页面），能显著提升加载速度和SEO表现。

核心概念

静态导出的本质是在构建阶段（`next build`）生成所有可能的页面HTML文件，而非在用户请求时实时渲染（SSR）。其特点包括：

• 零服务端依赖：导出的文件可直接托管在CDN或静态主机（如Vercel、GitHub Pages）
• 瞬时加载：浏览器直接获取预生成的HTML/CSS/JS
• 动态内容限制：无法处理实时数据更新（需结合客户端渲染）

与传统SSG的区别

特性	Next.js静态导出	传统SSG（如Jekyll）
支持`getStaticProps`动态获取 | 通常仅限本地文件
自动处理动态路由 | 需手动配置
可与SSR/ISR结合 | 仅限静态

基础用法

在next.config.js中启用导出模式：

module.exports = {
  output: 'export', // 关键配置
  images: {
    unoptimized: true, // 静态导出需关闭图片优化
  }
}

页面生成示例

对于博客文章页面（pages/posts/[id].js）：

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    paths: posts.map(post => ({
      params: { id: post.id.toString() }
    })),
    fallback: false // 不存在路径返回404
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  return { props: { post: await res.json() } };
}

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

构建过程会为每篇文章生成HTML文件：

graph TD A[next build] --> B[获取所有文章ID] B --> C[为每个ID生成HTML] C --> D[/posts/1.html, /posts/2.html.../]

高级特性

动态路由静态化

通过getStaticPaths实现动态路由的静态化：

• fallback: false：仅生成已知路径
• fallback: true：未知路径按需生成（需处理加载状态）
• fallback: 'blocking'：服务端渲染新路径后缓存

混合数据策略

结合客户端数据获取实现部分动态化：

export default function Dashboard({ staticData }) {
  const [dynamicData, setData] = useState(null);
  
  useEffect(() => {
    fetch('/api/live-data').then(r => r.json()).then(setData);
  }, []);

  return (
    <div>
      <StaticComponent data={staticData} />
      {dynamicData && <DynamicComponent data={dynamicData} />}
    </div>
  );
}

限制与解决方案

限制	解决方案
使用第三方BaaS或单独部署API服务
迁移数据获取逻辑到客户端或getStaticProps
设置重新验证周期（ISR）或使用SWR

性能优化

静态导出的性能优势可通过以下指标量化： $T_{load}=T_{DNS}+T_{TCP}+\frac{Siz{e}_{HTML}}{Bandwidth}$

实际案例对比（基于WebPageTest数据）：

• SSR模式：TTFB 320ms, 完全加载 1.8s
• 静态导出：TTFB 12ms, 完全加载 0.4s

部署实践

典型部署流程： 1. next build && next export 生成out/目录 2. 将目录内容上传至静态主机 3. 配置重定向规则（如_redirects文件）：

# 处理客户端路由
/*    /index.html   200

适用场景

• 内容型网站：文档、博客、作品集
• 国际化站点：每种语言生成独立版本
• 营销页面：高流量活动页
• 渐进增强应用：静态骨架+客户端Hydration

参见

• Next.js服务端渲染
• Next.js增量静态再生
• 静态站点生成原理