前端SSG：静态站点生成的艺术

前端SSG静态站点生成的艺术毒舌时刻前端SSG这不是给博客用的吗我的应用需要动态内容SSG不适合——结果首屏加载慢SEO差SSG就是静态HTML太简单了——结果构建时间长数据更新困难我用SSR就够了——结果服务器压力大响应慢。醒醒吧SSG不是简单的静态HTML而是一种现代化的前端架构为什么你需要这个性能优异静态文件加载快无需服务器渲染SEO友好所有内容都是静态的搜索引擎容易收录部署简单可以部署到任何静态文件服务器安全性高没有服务器端代码减少攻击面反面教材// 反面教材纯静态HTML !DOCTYPE html html head title我的博客/title /head body h1我的博客/h1 div classpost h2第一篇文章/h2 p文章内容.../p /div div classpost 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 classNameposts {posts.map((post) ( div key{post.id} classNamepost 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 langzh-CN head title我的博客/title /head body Header / main h1我的博客/h1 div classposts {posts.map((post) ( div key{post.id} classpost 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让你的网站既快又友好