共计 3947 个字符，预计需要花费 10 分钟才能阅读完成。
在 Gatsby 和 Next 之间做出决定时，您如何确定哪个框架最好？让咱们探讨一下两者之间的次要区别。咱们将以一些问题完结，问本人做出最好的抉择。
让咱们先来看看用 Gatsby 和 Next.js 来启动一个网站是什么感觉。
1. Getting Started
Gatsby
除了全面的文档之外，Gatsby 的网站还蕴含一个迷你教程，向新用户展现构建和部署 Gatsby 站点只需几个简略的步骤。开发人员能够应用 Gatsby CLI 启动一个根本站点，或者从 Gatsby 的启动站点库中抉择一个事后设计好的模板。入门模板容许用户疾速创立一个丑陋而实用的博客，而不用为设计而懊恼。
尽管入门很容易，但定制可能波及一些学习曲线。Gatsby 重大依赖 GraphQL 进行页面路由、获取 API 信息和应用插件（咱们稍后会具体探讨）。如果你以前从未应用过 GraphQL，那么加入一个疾速教程来学习基础知识是值得的。
Next
开始应用 Next 应用程序就像在终端中输出命令一样简略。Next 的 CLI 工具 create-next-app 与 create-react-app 的工作形式雷同，容许你启动一个残缺的应用程序，其中包含图像优化和页面路由等附加性能，作为一套可定制的默认值。从这里开始，对 React 的根本了解是构建和定制 Next 站点所必须的。
Next.js 网站提供了全面的文档，其中蕴含无关应用 React 或 TypeScript 构建 Next 应用程序的详细信息。他们甚至提供收费的“入门”教程，以帮忙新用户实现第一步。也能够在他们的 GitHub 页面上找到如何将 Next 与许多其余风行工具、库和语言一起应用的示例。
2. SEO
在没有像 Gatsby 或 Next 这样的框架的状况下构建的 React 利用，其 SEO 成果是出了名的差。他们应用客户端渲染 (CSR) 来渲染页面；当浏览器收到页面申请时，将 HTML、CSS 和脚本标记传递给浏览器。该脚本标签蕴含你的浏览器在你的网站上构建所有 React 内容所需的指令。为了正确索引你的网站，让搜索引擎找到，网络爬虫须要在你的网站运行之前可能浏览这些内容。然而，大多数网络爬虫在匍匐时不会运行该浏览器脚本，因而它们无奈及时获取无关您页面上内容的所有信息以将其编入索引。
Gatsby 和 Next 通过解决页面渲染的形式来解决这个问题。两者都在网页在浏览器中运行之前向网络爬虫提供你的网站的全部内容，使你的网站呈现在谷歌搜寻后果中。
让咱们来谈谈每个框架对 SEO 的帮忙。
Gatsby
Gatsby 应用动态站点生成 (SSG) 来预渲染页面。在部署用 Gatsby 构建的网站之前，你的代码要通过一个构建过程，在收到浏览器申请之前，残缺的 HTML 网站就曾经事后构建好了。当用户拜访 Gatsby 中构建的页面时，Gatsby 会在构建文件夹中找到该页面的 HTML 文件，并从新填充该页面，以便使其成为一个残缺的 React 应用程序。
在对你的网站进行任何更新后，须要再次运行构建过程，以使 CDN 领有最新的更新。因而，Gatsby 更适宜于那些在一天中变动不大的网站，如登陆页面、公司网站和博客。
Next
Next.js 可用于动态站点生成，但它针对纯服务器端渲染进行了优化。服务器端渲染 (SSR) 多年来始终应用 PHP 和 .NET 等语言实现，但 Next 容许咱们利用 JavaScript 和 Node.js 作为运行时服务器来利用 SSR。
Next 的次要区别在于它应用动静渲染（一种奇异的说法，即“页面在浏览器申请时构建”）。你网站的所有信息（路由、页面数据等）都存在于 Node.js 服务器上。当你从浏览器导航到 Next.js 页面时，服务器会去寻找你申请的页面。正是在这个时候建设了页面，而后将数据发送到浏览器供用户查看。因而，动静出现非常适合一天更新屡次的网站，例如电子商务商店和在线论坛。
3. 获取和解决数据
用于获取数据的办法的最大区别将取决于你的应用程序是动态生成的还是服务器端渲染的。因为动态生成的网站在浏览器中出现之前就曾经事后构建了页面，因而它们在构建时就会获取任何须要的数据。相比之下，服务器端生成的网站在运行时获取所需数据。
Gatsby
Gatsby 并不关怀您的数据来自哪个 API，但它会获取并获取它返回的任何数据，并将其作为 GraphQL API 提供给您。然而，为了拜访数据，您须要在代码中编写 GraphQL 查问。
GraphQL 的平凡之处在于，它容许获取十分具体的数据 – 例如，具备特定标签的所有博客文章的名称。这是为了通过缩小网络应用来进步性能。然而，如果你正在建设一个 SSG Gatsby 网站，所有的数据都是在构建时获取的，对运行时的性能没有影响。
Next
Next 在获取数据方面很灵便，让用户来决定他们想要应用的办法。当波及到数据获取时，惟一须要的局部是应用其生命周期办法之一（getServerSideProps 以启用 SSR 或 getStaticProps 用于 SSG），以取得预渲染页面数据所需的初始 prop。
如果你打算获取大量的数据，SSR 是更好的抉择。大量数据可能会导致 SSG 应用程序构建迟缓。然而，SSR 中应用的服务器要弱小得多，并且可能疾速反复地执行这些简单的操作。
4. 插件、扩大和生态系统
Gatsby 和 Next 如此受欢迎的一个起因是它们都能够轻松与您曾经相熟的其余工具和语言集成。通过他们的合作伙伴生态系统，这些框架容许您进一步扩大应用程序的性能，而不会产生意外的副作用。
Gatsby
除非你应用的是启动器，否则大多数附加性能都不包含在你的 Gatsby 文件中。然而，Gatsby 与 WordPress 十分类似，因为它领有宏大的插件生态系统，让您能够轻松地应用您想要增加的任何性能来加强您的应用程序。压缩图片、增加 TypeScript 编译器和应用预建主题，都是 Gatsby 的插件库中可用的性能实例。
通过插件库，Gatsby 领有所有框架中最大的合作伙伴生态系统。插件可用于大多数你曾经在应用的工具和库，使 Gatsby 与其余工具的整合非常简单。如果你想要自定义性能或主题，你也能够建设一个自定义的主题或插件，并将其托管在插件库中。
Next
传统上手动增加到 React 的性能，如页面路由、图像优化和代码拆分，都是开箱即用的默认性能，能够在 Next.js 配置文件中轻松定制。
Next 是由风行的部署和合作平台 Vercel 创立的。因而，Next 公司从 Vercel 公司令人难以置信的合作伙伴工具生态系统中受害。当然，下一步是优化以与 Vercel 一起应用，但也能够与您曾经用于托管、款式设置和构建的其余工具和库配合应用，从而能够轻松地将其合并到您的技术堆栈中。
5. 伸缩
你将是惟一接触你的应用程序的人，还是会有其他人来保护它？你是否冀望每天有大量的用户流动？在 Gatsby 和 Next.js 之间的抉择将取决于你冀望在将来将你的应用程序倒退到多大。
Gatsby
Gatsby 最适宜集体博客和较小的动态站点。当应用程序变得太大时，它们在构建过程中可能会变得十分迟缓或根本无法构建。在他们的扩大问题文档页面上，Gatsby 指出，“大型”通常是指页面超过 10 万的利用，或者从 GraphQL API 获取大量数据的状况。
Next
Next 是轻量级和易于应用的，可供业余爱好者应用，但也足够弱小，能够扩大以供企业应用。Netflix、Hulu、耐克等每天网站访问量达数万人次的大型企业都在应用 Vercel 托管的 Next 应用程序。在构建大型企业级应用程序时，应该应用 Next.js。
6. 托管
当初你曾经建设了你的应用程序，当初是时候把它托管在某个中央，让人们应用和互动。让咱们来谈谈 Gatsby 和 Next.js 应用程序能够托管在哪里。
Gatsby
在构建过程中，Gatsby 生成可在浏览器中应用并托管在任何中央的动态资产。您能够灵便地决定最适宜您的托管平台：Netlify、Firebase、Azure、AWS、Vercel 或您想要的任何平台。
Next
与 Gatsby 相似，Next 的 SSG 选项生成能够托管在任何中央的动态资产。然而，如果你抉择 SSR 路线，你必须找到一个 Node.js 服务器来托管它。Vercel–Next.js 的创造者 – 当然是为了做这个而优化的。大多数你喜爱的托管平台也都反对 SSR（Firebase、Netlify、AWS），但在你第一次学习时，请确保应用专门针对 SSR 托管的教程。
7. 在 Gatsby 和 Next 之间做出抉择
在这两个框架之间做出决定归结为以下问题：
我的页面多久须要更新一次？ 通过动静路由，Next 针对须要常常更新页面的应用程序进行了优化，例如商店或监听音讯的应用程序。相比之下，动态站点每次更新时都须要重建。如果您正在创立一个页面不常常更改的博客或网站，您能够应用 Gatsby。
我是在构建博客还是动态站点？ 长期以来，Gatsby 始终被认为是集体博客和小型动态网站的绝佳工具。因而，它有一个带有主题的扩大插件库，能够为您提供博客中须要的性能，这样您就不用从头开始构建它们。如果你正在建设一个小型网站或博客，但不想从头开始建设每个性能，Gatsby 是你的一个很好的抉择。
这个应用程序须要扩大吗？ 家喻户晓，当 Gatsby 应用程序变得太大或获取大量数据时，它们会遇到谬误和迟缓的构建。如果你的应用程序将有超过 100K 的页面，或须要获取大量的数据（如一个蕴含许多产品的变体的商店），Next.js 是你最好的抉择。
完结
对于优化大型、企业级的应用程序或有大量更新的网站，能够抉择 Next.js。对于小型或动态网站和博客，Gatsby 是最佳抉择。然而，无论你抉择哪种，你都能够期待一个优化的 React 应用程序，它具备开箱即用的性能，能够进步性能，集成最风行的第三方工具，并进步搜索引擎优化。