前端SSG：静态站点生成的艺术
前端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> </html> 正确的做法
// 正确的做法：使用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简单了，它是现代前端开发的重要选择！
总结
- Next.js SSG：支持静态生成和增量静态再生
- Astro：专注于静态站点生成，支持多种框架
- Gatsby：基于React的静态站点生成器，生态丰富
- 构建时数据获取：在构建过程中获取数据，生成静态页面
- 增量静态再生：定期重新生成页面，保持内容新鲜
- 客户端交互：通过JavaScript添加动态交互
- 部署灵活：可以部署到Vercel、Netlify等平台
- 性能优化：自动代码分割、图片优化等
SSG，让你的网站既快又友好！
