前端静态站点生成（SSG）技术解析
常见误区
前端 SSG 常被误解为仅适用于博客或简单静态页面。
'我的应用需要动态内容，SSG 不适合'——结果首屏加载慢，SEO 差； 'SSG 就是静态 HTML，太简单了'——结果构建时间长，数据更新困难； '我用 SSR 就够了'——结果服务器压力大，响应慢。
实际上，SSG 是一种现代化的前端架构，而非简单的静态 HTML。
为什么你需要这个？
- 性能优异：静态文件加载快，无需服务器渲染
- SEO 友好：所有内容都是静态的，搜索引擎容易收录
- 部署简单：可以部署到任何静态文件服务器
- 安全性高：没有服务器端代码，减少攻击面
反面教材
<!DOCTYPE html>
<html>
<head>
<title>我的博客</title>
</head>
<body>
<h1>我的博客</h1>
<div>
<h2>第一篇文章</h2>
<p>文章内容...</p>
</div>
<div>
<h2>第二篇文章</h2>
<p>文章内容...</p>
</div>
<!-- 手动更新内容，非常麻烦 -->
</body>
</html>
正确的做法
使用 Next.js SSG
// pages/index.js
export async function getStaticProps() {
// 在构建时获取数据
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return {
props: { posts },
// 重新验证时间（秒）
revalidate: 10
};
}
function Home({ posts }) {
return (
<div>
<h1>我的博客</h1>
<div className="posts">
{posts.map((post) => (
<div key={post.id} className="post">
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
))}
</div>
</div>
);
}
export default Home;
使用 Astro
---
// 前端组件
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
// 在构建时获取数据
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
---
<html lang="zh-CN">
<head>
<title>我的博客</title>
</head>
<body>
<Header />
<main>
<h1>我的博客</h1>
<div>
{posts.map((post) => (
<div key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
))}
</div>
</main>
<Footer />
</body>
</html>
使用 Gatsby
// gatsby-node.js
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions;
// 查询数据
const result = await graphql(`
query {
allMarkdownRemark {
edges {
node {
frontmatter {
path
}
}
}
}
}
`);
// 创建页面
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: path.resolve('./src/templates/blog-post.js'),
context: {
// 传递数据到模板
}
});
});
};
// src/templates/blog-post.js
import React from 'react';
import { graphql } from 'gatsby';
export const query = graphql`
query($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
frontmatter {
title
date
}
html
}
}
`;
const BlogPost = ({ data }) => {
return (
<div>
<h1>{data.markdownRemark.frontmatter.title}</h1>
<p>{data.markdownRemark.frontmatter.date}</p>
<div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} />
</div>
);
};
export default BlogPost;
技术点评
这才是前端 SSG！不是简单的静态 HTML，而是使用 Next.js、Astro、Gatsby 等现代化框架，在构建时生成静态页面。
记住，SSG 不仅用于博客，它可以用于任何需要高性能、SEO 友好的网站。通过增量静态再生（ISR）等技术，它还可以支持动态内容。
所以，别再觉得 SSG 简单了，它是现代前端开发的重要选择！
总结
- Next.js SSG：支持静态生成和增量静态再生
- Astro：专注于静态站点生成，支持多种框架
- Gatsby：基于 React 的静态站点生成器，生态丰富
- 构建时数据获取：在构建过程中获取数据，生成静态页面
- 增量静态再生：定期重新生成页面，保持内容新鲜
- 客户端交互：通过 JavaScript 添加动态交互
- 部署灵活：可以部署到 Vercel、Netlify 等平台
- 性能优化：自动代码分割、图片优化等
SSG，让你的网站既快又友好！
