思凡资源网

思凡资源网

Next.js vs. Gatsby 谁更优?_next和data

sifan10 0 16 次浏览 技术文章

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

今天给大家带来的是Next.js 和 Gatsby的比较，话不多说，直接进入正题。

前言

近年来，React 生态有两个框架主导其用户群：Next.js 和 Gatsby。 直到最近，它们之间还存在一些相当大的差异，这使得开发人员可以轻松从两者中选择自己真正需要的框架。 但是，随着时间的推移，这两个框架变得越来越紧密，以至于无从选择。

Gatsby 和 Next 都允许开发者使用服务器端渲染和静态站点生成等功能以及 React 本身不支持的诸多功能来创建非常通用且功能强大的 React 网站。 但是，即便如此，这两个框架仍然存在一些明显差异， 而这正是本文的关注点。

1.SSG vs. JAMstack

1.1 静态站点生成SSG

静态站点生成器SSG将内容与将显示内容的模板分开。通过将模板与从外部 API 获取的内容相结合，在构建时生成 HTML 页面，然后将这些页面部署到 Web 服务器，该服务器以渲染的 HTML 进行响应。

通过以这种方式构建和提供网页，静态站点生成器提供了几个明显优势。 最重要的是，消除与数据库相关的延迟，大大提高了基于此架构构建的网站速度和可靠性。 不仅在浏览器中加载速度更快，而且消除了流量高峰导致数据库崩溃的风险。

SSG的另一个关键优势是开发者无需绑定到单个 CMS 或数据库来提供网站内容。 相反，可以从正在使用的静态站点生成器兼容的任何外部 API 中提取内容。 虽然一些静态网站生成器仅限于从 Markdown 文件加载内容，但Gatby更灵活。

最后，由于显著的性能提升，在SSG上运行的网站往往兼具可用性以及 SEO 方面的优势。

1.2 JAMstack

JAMstack 是 JavaScript、API 和标记（Markup）的组合，是构建托管和服务 Web 内容所需的不同资源的现代方法。

  • JavaScript 处理将数据和内容与 UI 模板相结合所涉及的动态功能。 JAMstack 架构对可用于实现此目的的框架或库没有任何限制。
  • API 是一块拼图，它允许通过第三方服务（如内容交付网络、带有外部插件的 CMS）或自定义构建的功能来抽象掉传统的服务器端操作。
  • Markup：JAM 中的“M”指的是这些网站使用 Markdown 文件作为提供静态 HTML 文件的来源。 对于 Gatsby，这些 Markdown 文件是通过连接到其他 API、CMS 或数据库的插件获取的。

2.什么是Next.js

Next.js 是一个基于 React 的开源框架，用于创建混合应用程序，使用 React 将服务器渲染的网页和静态生成的网页结合起来。

Next.js的作者将其描述为 React 项目的零配置、单命令工具链。Next.js 使开发人员能够使用 React 完成用户友好且功能强大的网站和应用程序。Next.js有一些开发者特别看重的优势，比如：

  • 基于文件的系统路由
  • 支持包括服务器端渲染、预渲染的静态生成，以及在运行时更新或生成内容的增量静态重新生成ISR
  • 预取（Prefetching）
  • 自动代码拆分等等

3.什么是Gatsby

Gatsby 是一个开源框架，它将 React、GraphQL 和 Webpack 的功能组合到一个用于构建静态网站和应用程序的工具中。 由于具有站点性能好、代码拆分等令人印象深刻的开箱即用功能以及友好的开发人员体验，Gatsby 正在迅速成为现代 Web 开发的主要工具。

Gatsby 是现代网络的产物，即JAMstack架构、静态站点生成器和其他使网站加载速度更快、运行更流畅的新世界。

4.Next.js和Gatsby的差异

了解了什么是Next.js和Gatsby，已经各自的特点。接下来一起来看看Next.js和Gatsby在几个关键点上的差异。

4.1 数据请求

数据请求是在使用任一框架时会遇到的较大差异之一。 Next.js 与使用的数据获取方法无关，开发者可以根据需要定义、实现和使用它，无论是通过 REST API、GraphQL API 还是其他方式， Next.js 都支持。

但是Gatsby就不同。 虽然 Gatsby 支持在不使用其 GraphQL 数据层的情况下获取数据，但是 Gatsby 不推荐这种做法。 这意味着如果开发者想在页面上或在构建阶段在 Gatsby 中查询数据，那么几乎GraphQL会是首选。

const query = graphql
  query BlogPostQuery {
    site {
      title
      content 
    }
  }

这是因为Gatsby将重点放在GraphQL带来的诸多好处上。例如：自动优化图像并允许开发者在使用数据的同一位置加载数据。即，GraphQL简化了构建和优化页面的过程。

因此，如果您不喜欢 GraphQL，那么 Next.js 可能更适合。 但是，如果喜欢使用 GraphQL 或希望有机会熟悉它，那么 Gatsby 可能更优。

4.2 插件和生态系统

Next.js和Gatsby都有非常活跃的社区，它们为框架的整体发展和进步做出了贡献。 但是，Gatsby 严重依赖其社区创作的插件，任何人都可以在应用程序中使用这些插件来进行诸如转换数据、设置站点样式等操作。

从本质上讲，Gatsby 使模板化和创建新网站变得非常容易。 如果想创建一个博客，例如，使用 Markdown，可以使用 gatsby-source-filesystem 插件将所有的博客文章作为 GraphQL 的来源，然后在页面上查询它们。其他功能也可以通过插件快速集成，例如：使用
gatsby-plugin-google-analytics插件将Google Analytics 添加到网站等等诸如此类。

Next.js没有像 Gatsby 这样的插件生态，开发人员必须自己完成这些工作。 如果想要一个使用 Markdown 的博客，那么需要开发者自己请求、转换数据。如果不介意，可以使用Next.js。而如果想要Gatsby的优秀插件生态，那么Gatsby可能更加适合你。

4.3 排障

由于 Gatsby 非常依赖插件生态，因此排障是一个很痛苦的过程。 此时可以采用以下策略：

  • 等待他人解决问题并更新，那么网站错误存在的时间更长。
  • 积极参与开源社区并自行解决问题

因此，如果愿意接受上面的任何一情况，那么 Gatsby 是一个不错的选择。否则，还是选择Next.js吧。

4.4 推陈出新

Next.js 和 Gatsby 都支持最新的 React 版本，比如 React V18 。 当 React V18 仍处于测试阶段时，开发者可以将 React 18 与这两个框架一起使用，一旦有了稳定版本，这两个框架很快就会发布支持它的新版本。

Next.js 和 Gatsby也积极支持测试版beta功能，并可以通过实验性标志选择性启用。比如：React Server Components等新功能在两个框架中都已经集成。

4.5 渲染方法

Next.js 和 Gatsby 都支持静态站点生成 (SSG)、服务器端渲染 (SSR) 和客户端渲染 (CSR)。 也都支持延迟静态渲染，但在实现方式上有一个细微但重要的区别。 正是这种差异可能会帮助开发者在 Gatsby 和 Next 之间做出选择。

Gatsby 和 Next.js 在渲染方法上的主要区别在于它们如何处理服务器上页面的混合渲染。 Next 为开发者提供增量静态再生 (ISR)，而 Gatsby 则称为延迟静态生成 (DSG)。

Incremental Static Regeneration (ISR)

ISR 是一种渲染方法，开发者可以在构建和部署应用程序后在 Next.js 应用程序上使用它来创建或更新静态页面。 通过使用 ISR，可以逐页使用静态生成，而无需每次都重新部署整个网站。 ISR可以在用户请求时按需生成静态页面，而不是全部在构建时生成。

假如有一个包含 1000 篇文章的大型博客，可能不希望在构建时静态构建每一篇文章，因为这会增加时间。 但是，如果使用 ISR，可以选择静态呈现最近的 100 个帖子，然后在用户请求时渲染剩余的 900 个帖子。

然而，ISR 有一个潜在的缺点。 想象一个购物网站，它有一个静态主页和通过 ISR 呈现的商品页面。 由于 ISR 页面可能会从 API 获取最新的可用数据，因此当主页显示“有货”时，商品页面可能会显示“缺货”。 这种不一致是因为主页使用来自静态构建的数据，与稍后生成的页面使用的最新数据相比，这些数据可能已经过时了。

值得注意的是，Next.js 最近宣布了一项新功能，即按需 ISR，目前仍处于测试阶段。 有了这个功能，开发者可以告诉 Next.js 根据更新内容出现的位置重建网站上的哪些页面，从根本上解决上述问题。

Deferred Static Generation (DSG)

Gatsby 的 DSG 的关键亮点是使用以前的完整构建来为用户请求发生的延迟构建提供数据。 当数据更新时，可以利用webhook使构建时数据的缓存失效，并确保页面被重建、或部署为最新内容。

在上面的示例中看到了这一点的潜在重要性。 如果不使用与静态构建相同的数据，可能会有多个页面显示相互冲突的信息。 但是，如果在该示例中使用 DSG 而不是 ISR，页面将永远不会不同步，因为 DSG 对项目页面使用与静态主页相同的数据。

DSG 和 ISR选择

ISR 和 DSG 都允许推迟在网站上生成静态内容，但哪个更适合实际场景取决于具体需求。 Next.js 的按需 ISR 将这些选项更加紧密地结合在一起； 但是，与 Gatsby 的功能不同，它仍处于测试阶段。

最后值得一提的是，由于 Gatsby 使用了上次完整构建的数据，因此它是一个更健壮的产品，它不依赖于任何第三方 API。 使用 Next.js，如果任何第三方 API 在 ISR 尝试渲染页面时脱机，则构建可能失败，并且页面将停留在之前使用过时数据成功构建的状态。

4.6 开发热度

从Github数据来看，目前Gatsby有54k的star，而next已经有102K的star，但是考虑到next项目已经创建了超过12年，而Gatsby只有8年时间，似乎Gatsby的表现也是非常亮眼。

而从过去一年的NPM下载数据来看则更加易于选择，next似乎要比Gatsby更加火热，而且上升趋势非常明显，而Gatsby则整体趋于平缓。

所以，从这一点来看，Gatsby似乎是落于下风。在下一个项目中，我会考虑next，不知道你会如何选择呢？

5.本文总结

本文主要和大家介绍Next.js vs. Gatsby，以及各自特点，两者如何选择，同时引入了ISR 和 DSG等新技术。因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！


参考资料

https://medium.com/eincode/next-js-vs-gatsby-js-frameworks-all-you-need-to-know-4147f36ed915

https://www.mparticle.com/blog/what-is-gatsby/

https://prismic.io/blog/compare-nextjs-vs-gatsby

https://www.gatsbyjs.com/features/jamstack/gatsby-vs-nextjs

https://radixweb.com/blog/next-js-vs-gatsby

封面图来自“Filip Jerga”的文章《Next.JS vs. Gatsby.JS Frameworks- All You Need To Know》

原文链接：，转发请注明来源！
思凡资源网 › 技术文章 › Next.js vs. Gatsby 谁更优?_next和data