JavaScript静态站点生成
JavaScript静态站点生成[编辑 | 编辑源代码]
静态站点生成（Static Site Generation，SSG）是一种通过预渲染技术将动态内容转换为静态HTML文件的方法。在JavaScript生态系统中，SSG工具利用现代框架（如React、Vue或Svelte）在构建时生成页面，而非在用户请求时动态渲染。这种方式显著提高了性能、安全性和SEO友好性。
核心概念[编辑 | 编辑源代码]
静态站点生成与传统的服务端渲染（SSR）和客户端渲染（CSR）不同：
- SSG：在构建时生成所有页面，直接提供静态文件。
- SSR：每次请求时动态生成HTML。
- CSR：依赖浏览器JavaScript渲染内容。
数学上，SSG的构建过程可表示为：
工作原理[编辑 | 编辑源代码]
主流JavaScript SSG工具[编辑 | 编辑源代码]
| 工具 | 基于框架 | 特点 |
|---|---|---|
| Next.js | React | 支持混合SSG/SSR | ||
| Gatsby | React | 强大的数据插件系统 | ||
| Nuxt.js | Vue | 类似Next.js的Vue实现 | ||
| Astro | 框架无关 | 岛屿架构（Islands Architecture） |
代码示例[编辑 | 编辑源代码]
以下是使用Next.js实现SSG的基本示例：
// 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;
输入:
- API返回的JSON数据格式:
[
{ "id": 1, "title": "Hello SSG", "content": "..." }
]
输出:
- 构建时生成的静态HTML文件:
<!-- /posts/1.html -->
<article>
<h1>Hello SSG</h1>
<p>...</p>
</article>
实际应用场景[编辑 | 编辑源代码]
技术文档网站[编辑 | 编辑源代码]
- 使用工具: Docusaurus
- 特点:
* 自动生成搜索索引 * 版本控制支持 * Markdown驱动内容
博客系统[编辑 | 编辑源代码]
- 使用工具: Eleventy
- 示例流程:
进阶主题[编辑 | 编辑源代码]
增量静态生成（ISR）[编辑 | 编辑源代码]
Next.js等工具支持ISR，允许在构建后按需更新静态页面：
export async function getStaticProps() {
return {
props: {...},
revalidate: 3600 // 每小时后重新生成
};
}
混合渲染策略[编辑 | 编辑源代码]
现代SSG工具通常支持混合模式：
- 关键路径页面预渲染
- 动态路由页面按需生成
性能比较[编辑 | 编辑源代码]
通过HTTP Archive数据可见典型SSG的优势：
| 指标 | SSG | CSR | SSR |
|---|---|---|---|
| <100ms | 50-200ms | 200-500ms | |||
| 极快 | 依赖JS解析 | 中等 | |||
| 完美 | 需额外处理 | 良好 |
选择建议[编辑 | 编辑源代码]
考虑以下因素选择SSG工具：
- 内容频率: 高更新频率可能需要ISR支持
- 技术栈: 是否需与现有框架集成
- 扩展需求: 是否需要插件系统