编辑“︁Next.js静态导出”︁

= Next.js静态导出 =

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

== 核心概念 ==
静态导出的本质是在构建阶段（`next build`）生成所有可能的页面HTML文件，而非在用户请求时实时渲染（SSR）。其特点包括：
* '''零服务端依赖'''：导出的文件可直接托管在CDN或静态主机（如Vercel、GitHub Pages）
* '''瞬时加载'''：浏览器直接获取预生成的HTML/CSS/JS
* '''动态内容限制'''：无法处理实时数据更新（需结合客户端渲染）

=== 与传统SSG的区别 ===
{| class="wikitable"
|-
! 特性 !! Next.js静态导出 !! 传统SSG（如Jekyll）
|-
| 数据获取方式 | 支持`getStaticProps`动态获取 | 通常仅限本地文件
|-
| 路由系统 | 自动处理动态路由 | 需手动配置
|-
| 混合渲染 | 可与SSR/ISR结合 | 仅限静态
|}

== 基础用法 ==
在<code>next.config.js</code>中启用导出模式：
<syntaxhighlight lang="javascript">
module.exports = {
  output: 'export', // 关键配置
  images: {
    unoptimized: true, // 静态导出需关闭图片优化
  }
}
</syntaxhighlight>

=== 页面生成示例 ===
对于博客文章页面（<code>pages/posts/[id].js</code>）：
<syntaxhighlight lang="javascript">
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>;
}
</syntaxhighlight>

构建过程会为每篇文章生成HTML文件：
<mermaid>
graph TD
  A[next build] --> B[获取所有文章ID]
  B --> C[为每个ID生成HTML]
  C --> D[/posts/1.html, /posts/2.html.../]
</mermaid>

== 高级特性 ==
=== 动态路由静态化 ===
通过<code>getStaticPaths</code>实现动态路由的静态化：
* <code>fallback: false</code>：仅生成已知路径
* <code>fallback: true</code>：未知路径按需生成（需处理加载状态）
* <code>fallback: 'blocking'</code>：服务端渲染新路径后缓存

=== 混合数据策略 ===
结合客户端数据获取实现部分动态化：
<syntaxhighlight lang="javascript">
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>
  );
}
</syntaxhighlight>

== 限制与解决方案 ==
{| class="wikitable"
|-
! 限制 !! 解决方案
|-
| 无服务端API路由 | 使用第三方BaaS或单独部署API服务
|-
| 无法使用<code>getServerSideProps</code> | 迁移数据获取逻辑到客户端或<code>getStaticProps</code>
|-
| 动态内容更新延迟 | 设置重新验证周期（ISR）或使用SWR
|}

== 性能优化 ==
静态导出的性能优势可通过以下指标量化：
<math>
T_{load} = T_{DNS} + T_{TCP} + \frac{Size_{HTML}}{Bandwidth}
</math>

实际案例对比（基于WebPageTest数据）：
* '''SSR模式'''：TTFB 320ms, 完全加载 1.8s
* '''静态导出'''：TTFB 12ms, 完全加载 0.4s

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

<syntaxhighlight lang="plaintext">
# 处理客户端路由
/*    /index.html   200
</syntaxhighlight>

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

== 参见 ==
* [[Next.js服务端渲染]]
* [[Next.js增量静态再生]]
* [[静态站点生成原理]]

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