前端 SSG 详解：静态站点生成最佳实践

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;

技术要点

• Next.js SSG：支持静态生成和增量静态再生。
• Astro：专注于静态站点生成，支持多种框架。
• Gatsby：基于 React 的静态站点生成器，生态丰富。
• 构建时数据获取：在构建过程中获取数据，生成静态页面。
• 增量静态再生：定期重新生成页面，保持内容新鲜。
• 客户端交互：通过 JavaScript 添加动态交互。
• 部署灵活：可以部署到 Vercel、Netlify 等平台。
• 性能优化：自动代码分割、图片优化等。

总结

SSG 不是只能用于博客，它可以用于任何需要高性能、SEO 友好的网站。通过 ISR 等技术，它还可以支持动态内容。它是现代前端开发的重要选择。