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

正确的做法

使用 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，让你的网站既快又友好！