React JS 最佳框架（Gatsby vs Next.js）
目录
介绍
客户端渲染
为什么要使用 React 框架？
最好的 React 框架
结论
成为一名 React 开发人员
目录
直到几个月前，在Next.js和Gatsby之间做出选择还相对简单。
需要制作一个静态网站，比如内容不经常更新的博客？没问题，选择 Gatsby。
需要搭建一个使用服务器端渲染的网站，比如一个拥有成千上万件商品的电商网站？太好了，那就选择 Next.js 吧。
但最近的一些更新模糊了这两个框架之间的界限，让像您一样的开发者对选择哪个 React 框架感到困惑。
所以接下来我将告诉你如何做出正确的决定来构建你的下一个 React 项目。
让我们开始吧。
介绍
所以你想构建一个 React 应用程序，但你不想处理路由、配置、SEO、SSR、图像优化或所有与 React 相关的复杂而有趣的事情。
这些功能可能很难实现，或者需要花费大量时间才能自行实现。
Gatsby 和 Next.js 都提供了这些开箱即用的功能，但它们实现的方式却截然不同。
它们都是流行的 React 框架，各有优缺点。
所以在本文中，我将给你一些建议，帮助你在这两者之间做出选择。
但首先，让我们来谈谈为什么你应该使用 React 框架而不是仅仅构建一个普通的 React 应用程序。
客户端渲染
你可能对create-react-app比较熟悉，但如果你从未听说过它，这是 Facebook 提供的一款工具，你可以使用它来生成一个新的单页 React 应用程序。
它为您提供无需任何配置的现代化构建设置。
多亏了它，你无需学习和配置任何构建工具，就可以直接投入到代码编写中。
它非常棒，你只需要运行一条命令行就能启动并运行。除此之外，它甚至还提供了一个基本的文件夹结构供你入门。
create-react-app在底层使用 webpack、Babel、ESLint 等工具以及其他优秀的项目来驱动你的应用程序，这些工具隐藏在一个单独的依赖项后面，让你更容易专注于应用程序本身。
所以你可能会想，“这有什么问题呢？”
使用 CRA，很多配置都已经为您就位，并且您的应用程序也有文件夹结构，所以您不必担心。
在我看来，这是快速创建 React 应用程序的最简单方法之一，如果你是 React 新手，这可能是最好的方法。
如果你刚开始学习 React，我建议你从 CRA 入手，或者从头开始自己创建一个 React 应用，然后再过渡到 CRA。
但是这些单页 React 应用存在一些问题。
这是因为他们使用了客户端渲染。
使用客户端渲染时，当您发出 URL 请求时，您的浏览器会下载一个基本的 HTML 文档，所有内容都完全由浏览器中的 JavaScript 进行渲染。
基本上，你的应用程序的所有数据都会在初始请求时发送到浏览器。然后，React 会在浏览器端处理所有操作，例如获取数据并根据用户访问的路由渲染应用程序的视图。
例如，使用 React 时，你只需要一个包含所有 JavaScript 依赖项的 HTML 文件和一个作为应用程序根元素的 DOM 元素即可。仅此而已。
然后，当客户端请求您网站的某个页面时，您的浏览器会下载该空白 HTML 页面，加载运行您的网站所需的所有 JavaScript，最后，React 通过填充 HTML 文件来渲染您网站的内容。
所以，这种机制存在的第一个问题是速度和性能。
即使这种应用程序很棒，因为在显示新数据时无需刷新整个页面，但应用程序的初始加载速度可能会很慢。
访客需要等待 JavaScript 包加载完毕，浏览器构建好 DOM 后才能看到任何内容。在 JavaScript 加载期间，访客可能会看到空白页面或加载指示器。
这是其中一个问题。
客户端渲染带来的第二个问题是搜索引擎优化（SEO）。
使用客户端渲染应用程序时，Google 必须先运行所有 JavaScript 代码，才能知道您的网站上有什么内容以及如何对其进行索引。
所以这可能会花费一些时间，并延迟您的网站排名。
而且，你甚至不知道谷歌网络爬虫是否会以与浏览器相同的方式运行你的 JavaScript 代码。
此外，您提供的简陋 HTML 文档缺少搜索引擎优化和社交媒体分享所需的关键词、描述和社交媒体元数据。
React本身并不提供这项功能，所以你还需要一些辅助工具来实现。
为什么要使用 React 框架？
一种可能的解决方案是服务器端渲染。
与传统的客户端渲染不同，在服务器端渲染中，HTML是在服务器上生成并填充所有必要数据的。
此过程生成静态 HTML，无需在浏览器中运行 JavaScript。
换句话说，您的应用程序加载速度会快得多，而且很快就能实现交互。
此外，由于搜索引擎能够更快、更可靠、更准确地解析您的内容和元标签，您的SEO排名也会得到提升。这是因为页面内容能够立即被Googlebot和其他搜索引擎爬虫程序访问。
因此，服务器端渲染解决了我们目前讨论的客户端渲染应用程序的两个问题。
但是如何启用SSR呢？
你其实可以自己实现，但这有点麻烦。
希望 Gatsby 和 Next.js 都使用服务器端渲染，这样你就不用从头开始自己实现了。这些框架已经为你开箱即用地处理好了。
那么，它们之间究竟有何区别呢？
它们都利用了SSR技术，但它们实现的方式却截然不同。
使用 Gatsby，所有 HTML 页面都会在构建阶段预先生成，然后在运行时只需一次发送到浏览器。Gatsby 网站仅包含静态文件，可以托管在任何 CDN 或托管服务上，例如 Netlify、AWS 或其他任何地方。
使用 Gatsby 构建的网站速度非常快，因为它们在编译过程中就已经渲染完毕。这种技术实际上被称为静态站点生成 (SSG)。
而使用 Next.js 时，每次客户端向服务器发送请求时，HTML 都是在运行时生成的。
Next.js 的实际工作方式与 Gatsby 截然不同。它运行在 Node.js 服务器上。当收到请求时，它会将请求与特定的页面（或 React 组件）进行匹配，然后从 API、数据库或 CMS 请求数据，等待数据返回，最后根据接收到的数据和 React 组件生成 HTML，并将其发送到浏览器。
但是，使用 Next.js，您还可以选择是在构建时将特定页面渲染为静态 HTML，还是使用常规的服务器端渲染，并在每个请求运行时生成 HTML。
这非常强大，因为你可以在同一个框架内同时使用 SSG 和 SSR 的优势。例如，你可以构建一个网站，在构建时使用 SSG 渲染博客页面，而在运行时使用常规 SSR 渲染网站上更动态的页面。
所以，这是 Next.js 相对于 Gatsby 的一个相当大的优势。
我还想提一下这两个框架在获取数据方式上的区别。
使用 Next.js，你可以采用任何异步甚至同步的数据获取技术，包括 fetch、REST、GraphQL，甚至直接访问数据库。Next.js 并不关心你使用哪种方式。一切都由你决定！
虽然 Gatsby 对如何实现 GraphQL 有更明确的要求，但 Gatsby 建议并鼓励您使用 GraphQL 作为构建和编写 Gatsby 应用程序的最佳实践。
因此，在使用 Gatsby 构建应用程序时，您应该通过 GraphQL 访问数据。但与 Next.js 一样，Gatsby 可以从任何地方加载数据，例如 CMS、数据库、API 或文件系统。
所以，在选择这两个框架时，你应该考虑这一点。如果你想使用 GraphQL 以外的方式获取数据，最好使用 Next.js。
但请记住，GraphQL 已成为现代 Web 应用中 REST 的热门替代方案。因此，您可能已经在项目中使用它了，但如果您还没有，那么使用 Gatsby 将是一个学习这项强大技术的绝佳机会。
今日话题：你之前用过 GraphQL 获取数据吗？如果用过，我很想听听你用它开发过什么应用。请在下方评论区留言。
好的！我们继续。
在比较这两个框架时，您还应该考虑一个重要因素，那就是您将如何托管您的应用程序。
正如我们所见，Gatsby 在编译过程中只会生成静态文件。因此，您实际上可以将 Gatsby 网站托管在任何您想要的地方。
另一方面，使用 Next.js 会获得一个 Node.js 服务器。因此，你需要托管这个 Node 服务器才能运行你的应用程序。我认为最简单的方法是使用Vercel，它是由 Next.js 的创建者开发的。所以，这可能是最快捷、最简便的方法。
如果你之前用过，请在下方评论区留言告诉我。
但实际上，您可以将 Next.js 应用程序部署到任何支持 Node.js 的托管提供商，例如 Heroku 或 Netlify（顺便说一句，我非常喜欢 Netlify）！
所以这一点很重要。记住，Gatsby 只提供静态内容，其部署成本实际上比 Next.js 的 Node 服务器更低。而且，即便现在有了这么多优秀的托管服务商，搭建 Node 服务器也完全不成问题，Gatsby 可能还是会更容易一些。
最好的 React 框架
所以现在，也许这就是你一直期待的，让我们来谈谈何时使用 which。
目前来看，两者都利用了预渲染技术。
Gatsby 使用 SSG，其中 HTML 在构建时生成，并在每个请求中重复使用。
Next.js 允许你为每个页面选择合适的预渲染技术。你可以创建一个“混合型”Next.js 应用，大多数页面使用静态生成，其他页面使用服务器端渲染。
但 Gatsby 提供了一个开箱即用的统一数据层。在 Gatsby 中，你可以使用插件从 API 或 CMS 等各种数据源获取数据，并在整个应用程序中使用 GraphQL 查询所有这些数据。这个数据层简化了从不同数据源获取数据并将其提供给页面和组件的过程。
除此之外，这两个框架都为你的应用程序添加了大量强大的功能。但凭借最近发布的版本，Next.js 可能在与 Gatsby 的竞争中胜出。
现在，借助 Next.js，您可以获得自动图像优化、内置国际化、基于真实测量数据的持续分析，甚至还有一个可供使用和完全自定义的一体化电子商务入门套件。
即使 Gatsby 也通过其插件系统提供了一些（但不是全部）这些功能，我们仍然可以清楚地看到，Next.js 正在成为构建任何你想要的东西的最佳 React 框架。
所以，总而言之，对于像博客这样的纯静态网站，我可能仍然会使用 Gatsby，因为它是一个优秀的框架，而且从一开始就是为了构建这类网站而设计的。
而且，Gatsby拥有庞大的静态网站构建用户群体，这有时会有所帮助。
但是，如果我必须构建一个包含动态数据的 Web 应用程序，或者甚至是需要同时进行静态站点生成和服务器端渲染的混合 Web 应用程序，我肯定会选择 Next.js。
我越来越多的应用程序都是用 Next.js 构建的，但我仍然使用 Gatsby 来构建静态网站，因为我不需要处理 Node.js。而且我可以使用任何 CDN 来创建超快的网站。
那么create-react-app呢？我现在不太常用它了，但我仍然会用它来教学、构建原型和小应用程序。
结论
好了！就到这里吧。希望你们喜欢这个视频，并且从中受益匪浅。请在下方评论区告诉我，你们的下一个 React 项目会使用哪个框架。我很乐意听到你们的反馈。
非常感谢您的阅读。
成为一名 React 开发人员
如果您想掌握雇主所需的技能并成为一名 React 开发人员，请访问 AlterClass.io 👉 https://alterclass.io/courses/react
我们的课程：
- 📚 8 个自学模块
- ⚛️ 8 个真实世界项目
- 📄完整作品集
- 👨👨👦👦 一个了不起的社区
- 👨🏫 世界级教练
- 💯 一对一代码审查和专家反馈
- ♾️ 终身访问权限
AlterClass 正在颠覆你学习 React 的方式。
我们的下一代平台将赋予你信心和技能，助你找到理想的工作👨💻。
掌握 React 所需的一切。
💯 立即加入“成为 React 开发者”课程，享受 30 天退款保证 👇
https://www.alterclass.io/courses/react
AlterClass 在社交媒体上：
文章来源：https://dev.to/alterclass/best-framework-for-react-js-gatsby-vs-next-js-46cl