Gatsby

Gatsby 简介

Gatsby 是一个基于 React 的开源框架，用于构建高性能、可扩展的网站与 Web 应用。它把静态站点生成的速度优势与动态渲染的灵活性结合起来：产物是纯静态文件，可以托管在 CDN 上，同时页面本身又是完整的 React 应用。

核心特性

任意数据源接入

无论是本地 Markdown、Headless CMS（如 Contentful、WordPress），还是 REST / GraphQL API，都可以通过 source 插件把数据导入，再统一通过 GraphQL 层查询使用。

query {
  allMarkdownRemark {
    nodes {
      frontmatter { title date }
    }
  }
}

多种渲染模式

除静态站点生成（SSG）外，Gatsby 还支持按页面选择延迟静态生成（DSG）与服务端渲染（SSR），便于在性能与动态性之间做细粒度权衡。

内置性能优化

框架自动处理代码分割、图片优化、关键样式内联、懒加载与资源预取等，减少手工调优成本。

快速开始

使用官方脚手架初始化项目，然后进入开发模式：

npm init gatsby
cd my-gatsby-site
npm run develop

开发服务器默认运行在 http://localhost:8000，修改 src/pages/index.js 即可看到热更新效果。

适用与注意

Gatsby 适合博客、文档、营销页、企业官网等内容驱动型站点。需要注意的是，大型站点构建时间较长，GraphQL 数据层有一定学习成本，跨大版本升级时应参考官方迁移指南。