编辑“︁JavaScript静态站点生成”︁（章节）

= JavaScript静态站点生成 =

'''静态站点生成'''（Static Site Generation，SSG）是一种通过预渲染技术将动态内容转换为静态HTML文件的方法。在JavaScript生态系统中，SSG工具利用现代框架（如React、Vue或Svelte）在构建时生成页面，而非在用户请求时动态渲染。这种方式显著提高了性能、安全性和SEO友好性。

== 核心概念 ==
静态站点生成与传统的'''服务端渲染'''（SSR）和'''客户端渲染'''（CSR）不同：
* '''SSG'''：在构建时生成所有页面，直接提供静态文件。
* '''SSR'''：每次请求时动态生成HTML。
* '''CSR'''：依赖浏览器JavaScript渲染内容。

数学上，SSG的构建过程可表示为：
<math>
\text{SSG}(Content, Templates) \rightarrow \{HTML_1, HTML_2, ..., HTML_n\}
</math>

=== 工作原理 ===
<mermaid>
graph LR
    A[内容源 Markdown/API] --> B[构建阶段]
    B --> C[应用模板]
    C --> D[生成静态HTML]
    D --> E[部署到CDN]
</mermaid>

== 主流JavaScript SSG工具 ==
{| class="wikitable"
! 工具 !! 基于框架 !! 特点
|-
| [[Next.js]] | React | 支持混合SSG/SSR
|-
| [[Gatsby]] | React | 强大的数据插件系统
|-
| [[Nuxt.js]] | Vue | 类似Next.js的Vue实现
|-
| [[Astro]] | 框架无关 | 岛屿架构（Islands Architecture）
|}

== 代码示例 ==
以下是使用Next.js实现SSG的基本示例：

<syntaxhighlight lang="javascript">
// pages/posts/[id].js
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }));

  return { paths, fallback: false };
}

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

  return { props: { post } };
}

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

export default Post;
</syntaxhighlight>

'''输入''': 
* API返回的JSON数据格式:
<syntaxhighlight lang="json">
[
  { "id": 1, "title": "Hello SSG", "content": "..." }
]
</syntaxhighlight>

'''输出''': 
* 构建时生成的静态HTML文件:
<syntaxhighlight lang="html">
<!-- /posts/1.html -->
<article>
  <h1>Hello SSG</h1>
  <p>...</p>
</article>
</syntaxhighlight>

== 实际应用场景 ==
=== 技术文档网站 ===
* 使用工具: [[Docusaurus]]
* 特点: 
  * 自动生成搜索索引
  * 版本控制支持
  * Markdown驱动内容

=== 博客系统 ===
* 使用工具: [[Eleventy]]
* 示例流程:
<mermaid>
graph TB
    MD[Markdown文件] --> 11ty[Eleventy处理]
    11ty --> HTML[静态HTML]
    HTML --> Deploy[Netlify/Vercel]
</mermaid>

== 进阶主题 ==
=== 增量静态生成（ISR） ===
Next.js等工具支持ISR，允许在构建后按需更新静态页面：
<syntaxhighlight lang="javascript">
export async function getStaticProps() {
  return {
    props: {...},
    revalidate: 3600 // 每小时后重新生成
  };
}
</syntaxhighlight>

=== 混合渲染策略 ===
现代SSG工具通常支持混合模式：
* 关键路径页面预渲染
* 动态路由页面按需生成

== 性能比较 ==
通过HTTP Archive数据可见典型SSG的优势：
{| class="wikitable"
! 指标 !! SSG !! CSR !! SSR
|-
| TTFB | <100ms | 50-200ms | 200-500ms
|-
| FCP | 极快 | 依赖JS解析 | 中等
|-
| SEO | 完美 | 需额外处理 | 良好
|}

== 选择建议 ==
考虑以下因素选择SSG工具：
* '''内容频率''': 高更新频率可能需要ISR支持
* '''技术栈''': 是否需与现有框架集成
* '''扩展需求''': 是否需要插件系统

{{Note|虽然SSG有诸多优势，但纯静态方案不适合需要实时数据的应用（如社交网络）。}}

== 参见 ==
* [[Jamstack架构]]
* [[前端性能优化]]
* [[现代Web开发范式]]

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript框架介绍]]