深入解析前端静态站点生成（SSG）技术。通过对比纯静态 HTML 与基于 Next.js、Astro、Gatsby 等现代框架的 SSG 实现，阐述了 SSG 在加载性能、SEO 优化及部署便捷性方面的显著优势。文章介绍了构建时数据获取、增量静态再生（ISR）等关键技术，说明了 SSG 不仅适用于博客，也适用于各类需高性能与动态内容的网站，并支持通过 JavaScript 增强客户端交互能力。
前端 SSG？这不是给博客用的吗？
"我的应用需要动态内容，SSG 不适合"——结果首屏加载慢，SEO 差； "SSG 就是静态 HTML，太简单了"——结果构建时间长，数据更新困难； "我用 SSR 就够了"——结果服务器压力大，响应慢。
实际上，SSG 不是简单的静态 HTML，而是一种现代化的前端架构！
// 反面教材：纯静态 HTML
<!DOCTYPE html>
<html>
<head>
<title>我的博客</title>
</head>
<body>
<h1>我的博客</h1>
<div>
<h2>第一篇文章</h2>
<p>文章内容...</p>
</div>
<div>
<h2>第二篇文章</h2>
<p>文章内容...</p>
</div>
<!-- 手动更新内容，非常麻烦 -->
</body>
</html>
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
// 正确的做法：使用 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
// src/pages/index.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 简单了，它是现代前端开发的重要选择！
SSG，让你的网站既快又友好！