前端 SSG：静态站点生成技术解析 | 极客日志

JavaScriptNode.js大前端

前端 SSG：静态站点生成技术解析

介绍前端静态站点生成（SSG）技术，对比纯静态 HTML 与 SSR，阐述其性能、SEO 及部署优势。通过 Next.js、Astro、Gatsby 等框架示例，展示构建时数据获取与增量静态再生（ISR）的实现方式，帮助开发者选择合适架构提升网站速度与安全性。

板砖工程师发布于 2026/4/6更新于 2026/5/2031 浏览

前端 SSG：静态站点生成技术解析

常见误区

前端 SSG？这不是给博客用的吗？

'我的应用需要动态内容，SSG 不适合'——结果首屏加载慢，SEO 差； 'SSG 就是静态 HTML，太简单了'——结果构建时间长，数据更新困难； '我用 SSR 就够了'——结果服务器压力大，响应慢。

实际上，SSG 不是简单的静态 HTML，而是一种现代化的前端架构！

为什么你需要这个？

性能优异：静态文件加载快，无需服务器渲染
SEO 友好：所有内容都是静态的，搜索引擎容易收录
部署简单：可以部署到任何静态文件服务器
安全性高：没有服务器端代码，减少攻击面

反面教材

// 反面教材：纯静态HTML
<!DOCTYPE html>
<html>
<head>
  <title>我的博客</title>
</head>
<body>
  <h1>我的博客</h1>
  <div>
    <h2>第一篇文章</h2>
    <p>文章内容...</p>
  </div>
  <div>
    <h2>第二篇文章</h2>
    <p>文章内容...</p>
  </div>
  <!-- 手动更新内容，非常麻烦 -->
</body>

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 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;

---
// 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-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：静态站点生成技术解析

前端 SSG：静态站点生成技术解析

常见误区

为什么你需要这个？

反面教材

更多推荐文章

相关免费在线工具

正确的做法

使用 Next.js SSG

使用 Astro

使用 Gatsby

核心观点

总结

更多推荐文章

相关免费在线工具

前端 SSG：静态站点生成技术解析

前端 SSG：静态站点生成技术解析

常见误区

为什么你需要这个？

反面教材

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

正确的做法

使用 Next.js SSG

使用 Astro

使用 Gatsby

核心观点

总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具