前端静态站点生成（SSG）的核心概念与优势。SSG 并非简单的静态 HTML，而是利用 Next.js、Astro、Gatsby 等现代框架在构建时生成页面。相比纯静态 HTML，SSG 支持构建时数据获取、增量静态再生（ISR），能显著提升性能、SEO 友好度及部署灵活性。文章通过对比错误示例与正确实现方案，展示了如何在不同框架下应用 SSG 技术，并强调了其在高性能网站开发中的重要性。
前端 SSG 常被误解为仅适用于博客或简单静态页面。
'我的应用需要动态内容，SSG 不适合'——结果首屏加载慢，SEO 差； 'SSG 就是静态 HTML，太简单了'——结果构建时间长，数据更新困难； '我用 SSR 就够了'——结果服务器压力大，响应慢。
实际上，SSG 是一种现代化的前端架构，而非简单的静态 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
// 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;
---
// 前端组件
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-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，让你的网站既快又友好！