Gatsby：基于 React 的静态站点生成框架，5.5 万 Star

Gatsby 是一个基于 React 的开源框架，专门用来构建高性能的网站和应用。它的核心思路是把静态站点的速度优势和动态网站的灵活性结合起来，让你不用在性能和功能之间做取舍。

这个项目在 GitHub 上拿到 5.5 万 Star，在前端框架里算是头部选手了。

数据来源不限，想接什么接什么

Gatsby 一个比较强的地方是数据层。不管你的数据在 Markdown 文件、Headless CMS（Contentful、WordPress 等）、REST API 还是 GraphQL 接口里，都能通过 Source Plugin 统一拉进来，然后用 GraphQL 做查询。

这意味着你不用为了数据格式去学新的东西，现有的数据源基本都能对接。

渲染方式可选，按页面粒度控制

Gatsby v5 支持三种渲染方式：

• SSG（静态站点生成）：构建时生成所有页面，适合内容变化不频繁的场景
• SSR（服务端渲染）：每次请求时动态生成，适合个性化内容
• DSG（延迟静态生成）：首次访问时才生成，后续走缓存，兼顾速度和实时性

这三种方式可以在同一个项目里按页面单独设置，不用全局统一。

性能优化内置，不用手动调

开箱即用的优化包括：代码分割、图片优化、关键 CSS 内联、资源预加载、懒加载。这些在大多数项目里需要单独配置的东西，Gatsby 帮你自动处理了。

对开发者来说，省了不少调优的时间。

部署成本低

因为构建产物是纯静态文件，可以直接丢到 CDN 上，不用维护服务器。Netlify、Vercel、Cloudflare Pages 这些平台都有免费额度，个人站点基本零成本。

上手不难

初始化一个新项目只要一条命令：

npm init gatsby

然后 npm run develop 就能在本地跑起来，浏览器访问 localhost:8000 实时预览。对有 React 基础的开发者来说，半小时内就能跑通一个站点。

适合什么场景

Gatsby 比较适合这几类项目：企业官网、技术文档站、博客、电商落地页。简单来说，内容型网站用它很合适。

如果是需要大量用户交互、实时数据更新的应用（比如聊天工具、仪表盘），Gatsby 不是最优选择，Next.js 或者纯 SPA 方案可能更合适。

说点不足

Gatsby 的构建速度在大项目里会比较慢，这是静态站点生成的通病。另外生态虽然丰富，但插件质量参差不齐，选型时需要多测试。社区活跃度比不上 Next.js，遇到问题找解决方案可能要多花点时间。

总的来说，如果你在做内容型网站，想要好的性能和开发体验，Gatsby 值得试试。

解决方案可能要多花点时间。

总的来说，如果你在做内容型网站，想要好的性能和开发体验，Gatsby 值得试试。