何时选择 Gatsby、Next.Js 或 Create React App

React是一个用于构建用户界面的库。它帮助开发者渲染精美的 UI，并将状态逻辑封装在组件或钩子中。

它不负责任何其他事情。所以作为开发者，我们还有很长的路要走。为了设计和开发功能齐全的前端应用程序，我们需要用于各种任务的工具链：

• 当地发展
• 生产版本
• 优化
• 模块加载和捆绑
• 从最新的 JS 或 TS 转译为 ES5
• 氢溴酸甲烷
• 以及许多其他项目特定需求

当我们使用React开始一个新项目时，我们面临着这个决定。在 CRA、Gatsby还是Next.js之间做出选择是一个至关重要且影响深远的决定。

我将详细介绍如何在这三个 React 框架/工具之间进行选择。所以，如果您现在没时间阅读这篇文章，请点亮❤️和🦄按钮，🔖也请点亮🔖。

创建 React 应用（CRA）

考虑到 Javascript 工具链中的所有其他创新，对于纯 SPA 来说，CRA 的最佳现代替代品是Vite。

适用于商业应用程序、仪表盘和内部网络应用程序。登录墙内的所有内容。

这些业务应用程序可能是：

• 管理和查看内部数据
• 仪表板
• 分析
• 配置和形式
• 运行内部工作流程等

对于这类应用程序来说，SEO 不会成为问题。

CRA 对于这类应用程序来说非常棒，因为：
✅ React 应用程序的官方 SPA 工具
✅ 零配置
✅ 完整的 CSR（客户端渲染）非常棒且易于学习
✅ 服务器和客户端代码完全解耦
✅ 不受外部框架的限制
✅ 易于部署，因为构建结果是静态文件

它也有缺点：
⛔️如果不小心，最终可能会得到一个非常繁重的客户端应用程序
⛔️手动设置路由、状态管理、代码拆分、样式方法
⛔️您可能需要弹出以修改配置（webpack、jest 等）
⛔️不能将其用于需要 SEO 的公共网站
⛔️CSR 应用程序通常具有最差的初始加载性能

需要注意的是，它不像 Gatsby 和 Next.js 那样是一个 React 框架。正如其官网所述：

一种官方支持的创建单页 React 应用程序的方法。

现在，根据您所在的工作，使用React 构建应用程序的官方方法可能是首选 - 因为这样可以降低将来不支持此方法的风险。

对于我们使用的所有工具，我们都需要考虑一些风险。其中一个相当大的风险是，如果维护这些工具的公司不再支持它们。

盖茨比

Gatsby 不仅仅是一个静态网站生成器，更是一个渐进式 Web 应用生成器💪。它的用例与 CRA 完全不同。我们使用 Gatsby 构建面向公众的应用，这些应用内容丰富，需要一流的 SEO 和极速的性能。要求这些内容不经常更改——可能每天、每周或每隔几个小时更改一次。这可以是您的个人网站、博客、文档网站（有趣的是，reactjs.org正在使用 Gatsby），甚至是电商网站。Gatsby 允许您在构建时通过 GraphQL 获取所有相关数据，以创建您的静态 Web 应用。Gatsby 非常适合 JAMstack 应用。

您可以在他们的展示页面上查看使用 Gatsby 构建的应用程序。

使用 Gatsby 的好处是：
✅ 由于静态站点生成而提高的性能
✅ SEO
✅ 构建时优化
✅ 轻松部署到 CDN - 出色的廉价扩展
✅ 您可以创建具有离线功能的 PWA✅
丰富的插件生态系统

它也有缺点：
⛔️ 使用起来比 CRA 更复杂
⛔️ 你需要具备 GraphQL 和 Node.Js 知识
⛔️ 配置繁重
⛔️ 你投资了一个固执己见的框架
⛔️ 内容越多，构建时间就越长⛔️ 如果你需要一些付费功能，
将来可能会被供应商锁定

生态系统插件也是选择 Gatsby 的原因之一。如果你想从某个 CMS 构建 PWA，那里应该有相应的插件。如果你想要 Google Analytics、图片压缩和预加载，那里也有相应的插件。等等，Gatsby 的生态系统非常丰富。

Next.js

所有高度动态且面向公众的应用都将受益于Next.js。这些应用面向大量公众，其内容几乎每秒都在变化。这些应用需要良好的 SEO。

注意：Next.js 会将服务器组件添加到你的技术栈中。在这里，你可以做一些很棒的事情，比如将用户需要的所有数据加载到服务器中，然后使用 SSR 将 React 组件构建到 HTML 中。

例如：我是一个登录到新闻推送网站的用户。该网站会为每个用户创建自定义推送。如果您使用 Gatsby 或 Create React App，您需要加载一个空白页面，然后通过 HTTP 调用来获取新闻推送数据。使用 Next，您可以在服务器端进行数据获取，并使用我们的 React 组件（服务端渲染）构建完整的 HTML 推送。

您可以在其展示页面上查看使用 Next.js 构建的应用程序。

Next.js 的优势：
✅ 服务器端预渲染
✅ SEO✅
零配置
✅ 处理面向公众的高度动态内容
✅ 也可以像 Gatsby 一样进行 SSG✅
看起来像一个万能的解决方案
✅ 也可以用它构建 WebApi

缺点：
⛔️ 使用起来比 CRA 更复杂
⛔️ SSR 增加了额外的复杂性
⛔️ 你投资了一个固执己见的框架
⛔️ 扩展依赖于服务器基础设施
⛔️ 没有插件生态系统⛔️ 如果你需要他们的一些付费功能，
未来可能会被供应商锁定

结论

我们需要分析我们想要构建的应用程序，以便在 CRA、Gatsby 或 Next.js 之间进行正确的选择，因为它们是具有不同用途的非常不同的工具。

如果我们了解项目需求，那么在这三者之间进行选择就很容易了。