Next.js和Gatsby的比较，我们该如何选择？

在 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应用程序，它具有开箱即用的功能，可以提高性能，集成最流行的第三方工具，并提高搜索引擎优化。