suhao
commented
2 years ago Next.js和Gatsby的比较，我们该如何选择？
在 Gatsby 和 Next 之间做出决定时，您如何确定哪个框架最好？让我们探讨一下两者之间的主要区别。我们将以一些问题结束，问自己做出最好的选择。
让我们先来看看用 Gatsby 和 Next.js 来启动一个网站是什么感觉。
- 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 与许多其他流行工具、库和语言一起使用的示例。
- 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页面时，服务器会去寻找你请求的页面。正是在这个时候建立了页面，然后将数据发送到浏览器供用户查看。因此，动态呈现非常适合一天更新多次的网站，例如电子商务商店和在线论坛。
- 获取和处理数据
用于获取数据的方法的最大区别将取决于你的应用程序是静态生成的还是服务器端渲染的。由于静态生成的网站在浏览器中呈现之前就已经预先构建了页面，因此它们在构建时就会获取任何需要的数据。相比之下，服务器端生成的网站在运行时获取所需数据。
Gatsby Gatsby并不关心您的数据来自哪个API，但它会获取并获取它返回的任何数据，并将其作为GraphQL API提供给您。然而，为了访问数据，您需要在代码中编写GraphQL查询。
GraphQL的伟大之处在于，它允许获取非常具体的数据--例如，具有特定标签的所有博客文章的名称。这是为了通过减少网络使用来提高性能。然而，如果你正在建立一个SSG Gatsby网站，所有的数据都是在构建时获取的，对运行时的性能没有影响。
Next Next 在获取数据方面很灵活，让用户来决定他们想要使用的方法。当涉及到数据获取时，唯一需要的部分是使用其生命周期方法之一（ getServerSideProps 以启用SSR或 getStaticProps 用于SSG），以获得预渲染页面数据所需的初始prop。
如果你打算获取大量的数据，SSR是更好的选择。大量数据可能会导致 SSG 应用程序构建缓慢。然而，SSR 中使用的服务器要强大得多，并且能够快速重复地执行这些复杂的操作。
- 插件、扩展和生态系统
Gatsby 和 Next 如此受欢迎的一个原因是它们都可以轻松与您已经熟悉的其他工具和语言集成。通过他们的合作伙伴生态系统，这些框架允许您进一步扩展应用程序的功能，而不会产生意外的副作用。
Gatsby 除非你使用的是启动器，否则大多数附加功能都不包括在你的Gatsby文件中。然而，Gatsby 与 Wordpress 非常相似，因为它拥有庞大的插件生态系统，让您可以轻松地使用您想要添加的任何功能来增强您的应用程序。压缩图片、添加TypeScript编译器和使用预建主题，都是Gatsby的插件库中可用的功能实例。
通过插件库，Gatsby 拥有所有框架中最大的合作伙伴生态系统。插件可用于大多数你已经在使用的工具和库，使Gatsby与其他工具的整合非常简单。如果你想要自定义功能或主题，你也可以建立一个自定义的主题或插件，并将其托管在插件库中。
Next 传统上手动添加到React的功能，如页面路由、图像优化和代码拆分，都是开箱即用的默认功能，可以在Next.js配置文件中轻松定制。
Next 是由流行的部署和协作平台 Vercel 创建的。因此，Next公司从Vercel公司令人难以置信的合作伙伴工具生态系统中受益。当然，下一步是优化以与 Vercel 一起使用，但也可以与您已经用于托管、样式设置和构建的其他工具和库配合使用，从而可以轻松地将其合并到您的技术堆栈中。
- 伸缩
你将是唯一接触你的应用程序的人，还是会有其他人来维护它？你是否期望每天有大量的用户活动？在Gatsby和Next.js之间的选择将取决于你期望在未来将你的应用程序发展到多大。
Gatsby Gatsby 最适合个人博客和较小的静态站点。当应用程序变得太大时，它们在构建过程中可能会变得非常缓慢或根本无法构建。在他们的扩展问题文档页面上，Gatsby指出，“大型”通常是指页面超过10万的应用，或者从GraphQL API获取大量数据的情况。
Next Next 是轻量级和易于使用的，可供业余爱好者使用，但也足够强大，可以扩展以供企业使用。Netflix、Hulu、耐克等每天网站访问量达数万人次的大型企业都在使用Vercel托管的Next应用程序。在构建大型企业级应用程序时，应该使用Next.js。
- 托管
现在你已经建立了你的应用程序，现在是时候把它托管在某个地方，让人们使用和互动。让我们来谈谈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托管的教程。
- 在 Gatsby 和 Next 之间做出选择
在这两个框架之间做出决定归结为以下问题：
我的页面多久需要更新一次？通过动态路由，Next 针对需要经常更新页面的应用程序进行了优化，例如商店或监听消息的应用程序。相比之下，静态站点每次更新时都需要重建。如果您正在创建一个页面不经常更改的博客或网站，您可以使用 Gatsby。
我是在构建博客还是静态站点？长期以来，Gatsby 一直被认为是个人博客和小型静态网站的绝佳工具。因此，它有一个带有主题的扩展插件库，可以为您提供博客中需要的功能，这样您就不必从头开始构建它们。如果你正在建立一个小型网站或博客，但不想从头开始建立每个功能，Gatsby是你的一个很好的选择。
这个应用程序需要扩展吗？众所周知，当 Gatsby 应用程序变得太大或获取大量数据时，它们会遇到错误和缓慢的构建。如果你的应用程序将有超过100K的页面，或需要获取大量的数据（如一个包含许多产品的变体的商店），Next.js是你最好的选择。
结束
对于优化大型、企业级的应用程序或有大量更新的网站，可以选择Next.js。对于小型或静态网站和博客，Gatsby是最佳选择。然而，无论你选择哪种，你都可以期待一个优化的React应用程序，它具有开箱即用的功能，可以提高性能，集成最流行的第三方工具，并提高搜索引擎优化。
NextJS vs. NuxtJS vs. GatsbyJS
所谓服务端渲染，就是将原先运行在客户端的 JavaScript 框架的渲染过程放在服务器上，渲染出静态的 HTML 和 CSS 的过程。
为什么说它很重要呢？
我们都想提升网站的加载速度 —— 而服务端渲染技术就是这么一个可以加速页面渲染的工具。下面我们来看一看页面渲染的关键步骤：浏览器渲染页面的关键步骤是接受服务端发送的关键数据并渲染成可视化的页面，如果我们能更快地将这些关键资源分发到浏览器，那么页面就可以更快地渲染好并呈现给用户。
服务端渲染的原理
浏览器渲染你的应用的速度，取决于你如何构建它。浏览器收到的第一个东西是 HTML 文档。文档包括了指向各种资源的引用 —— 如图片、CSS 和 JavaScript 代码。在浏览器解析 HTML 文档时，它知道要去获取并下载这些资源。所以，即使浏览器已经下载好了 HTML，也还是会在 CSS 解析完成之后才会开始渲染页面。
一旦 CSS 解析结束，浏览器便进一步地渲染页面。也就是说，只需要 HTML 和 CSS，浏览器就能渲染页面。我们都知道浏览器就擅长这个，所以这个过程是很快的。
现在，最后的一步是 JavaScript。HTML 文档解析结束后，浏览器会下载你的 JavaScript 文件。如果文件很大，或者网络状况很差，那下载时间会很长，而且浏览器还得解析 JavaScript。在硬件配置较差的设备上，这部分的时间消耗会很可观。并且，如果你的首次渲染依赖于 JavaScript，你还会多次地看到慢的加载过程。JavaScript 应被看作 HTML 和 CSS 的一个增强，因为它的加载是可以延迟的。然而，情况并不总是这么简单。有的网站需要一些严重依赖于 JavaScript 的功能 —— 这类网站使用了 JavaScript 框架。
服务端渲染的过程
上面提到的 JavaScript 框架的渲染过程其实也是可以优化的，比如可以在服务端提前完成其渲染过程，再将生成好的 HTML 下发至浏览器。
所以，用户几乎能立刻看到你之前在服务端提前生成好的 HTML 页面，同时 JavaScript 在后台启动执行。这不一定能让你的页面比非服务端渲染的版本加载的要快，但它确实能在 JavaScript 还在后台下载的过程中给用户一些能看到的内容 —— 这挺好的。
调查与统计
在我们进一步讨论之前，让我们来看看一些来自不同网站的统计信息。
JavaScript 的情况
根据一项关于 JavaScript 情况的调查，我们可以看到，Next 排在了 Nuxt 和 Gatsby 之前。在本文中，我们不会考虑 Express 等，因为我们只关注用于服务端渲染的 JavaScript 框架。
根据下面的统计，我们可以看到用户对与 JavaScript 相关的后端框架的关注度。可以看出，NextJS 比起 NuxtJS 和 GatsbyJS，用户的使用量和兴趣都是最高的。
GitHub 仓库统计信息
依据这些 GitHub 仓库，我们可以看到开发者越来越被 NextJS 所吸引 —— 不管是 Watch、Fork 还是 Star 数，NextJS 都来得高一些。但 Gatsby 在开发者之间也差不多受欢迎。
为什么选 NextJS？
Next 是快速成长的 React 框架之一，尤其是在服务端渲染方面。作者把 NextJS 称作一个轻量级框架。我个人认为把它看作一个平台或者是起始模板更合适。
NextJS 的优点
不该用 NextJS 的地方
如果你在构建一个简单的应用，我估计 NextJS 会过犹不及。
如果你打算把一个服务端的应用集成到 NextJS 应用中，我不建议你立即就开始这么做，因为实际上是做不到的 —— 工作量太大了。
为什么选 NuxtJS？
NuxtJS 是在 VueJS 上层构建的高层次框架，能帮助你构建适用于生产环境的 Vue 应用。
NuxtJS 的优点
不该使用 NuxtJS 的地方
如果你使用自定义的库来构建应用，使用 Nuxt 可能会颇具挑战性。
如果你第一次使用 Nuxt，同时你的 Vue 应用的开发计划排期比较紧，你可能会遇到一些问题。
应用调试会很痛苦 —— 这是开发者社区中的常见问题。
为什么选 GatsbyJS？
Gatsby 也是一个基于 React 的、GraphQL 驱动的静态站点生成器。更简单地说，Gatsby 是一个静态站点生成器。这是什么意思呢？静态站点的意思是我们放在服务器上的东西是由 Gatsby 生成的静态的 HTML 文件。这与许多网站的工作方式不同。
需要指出的是，静态站点并不意味着不可互动和非动态。我们可以在 Gatsby 服务器上的 HTML 文件中加载 JavaScript，发起 API 请求、进行交互、构建丰富大型的网站等，尽管它们是静态的。
GatsbyJS 的优点
不该使用 GatsbyJS 的地方
如果你要和 WordPress 一起使用 Gatsby，你需要换用很多 WordPress 内置的功能 —— 比如，你不能使用主题的自定义布局。
由于 Gatsby 站点是静态的，所以每个改动都需要一次新的部署。
结论
基于上面的优缺点和调查，我们可以得出结论：NextJS 是未来最好的服务端渲染框架。然而，如果我们看看前端开发的未来，我们可以看到，Vue 在实际项目开发中也表现得不错。基于上面的各项因素，我建议你学习和使用 NextJS。
感谢阅读。
资源