Next.js vs. Gatsby：完整的比较
#javascript #初学者 #nextjs #gatsby

许多React Meta-Frameworks有助于提供复杂的网站，但两个远远超出了其他网站：Gatsby和NextJ。 Gatsby允许您使用其广泛的插件生态系统创建几乎所有网站，而Next.js则提供了轻松的开发过程和出色的可扩展性。他们一起考虑了前1000个网站的市场份额的~30 %。

这两个框架同样适合大多数项目，尽管有时可能更适合一个框架。这篇博客文章将讨论Gatsby和Next.js之间的关键差异，并详细说明特定情况。

但是，首先，为什么要使用元框架而不是限制自己做出反应？让我们更多地了解Next的辩论。JSvs Gatsby。

这篇文章涵盖了

为什么要将元框架与React一起使用？

meta-frameworks允许开发人员比单独使用React更快地创建功能丰富的应用程序。

React在为您处理数据状态方面做得非常出色。但是，当涉及其他功能时，许多功能仅在基本级别上实现。因此，您可能需要额外付出更多的时间才能获得所需的东西 - 决定如何处理路由，渲染方法，布局，兑现和集成。

一种方法是研究所有可用的库，并选择最适合您项目的库。坦白地说，它类似于制作您自己的Linux发行。

这是Meta-Frameworks发挥作用的地方：它们提供了许多需要便利地组装成一个整洁包装的功能。您仍然需要在项目中包括其他库，例如Bootstrap等UI库。然而，您将不需要像普通的反应一样多。

与其他元框架一样，Next.js和Gatsby具有各种功能和优化。让我们一次介绍每个框架，并探索谁更好地在图像优化，渲染，数据获取等方面介绍。

什么是什么。

Next.js是一家名为Vercel的平台服务公司于2016年发布的元框架。 Meta-Framework在Vercel平台和方便的服务器端渲染（SSR）上提供零置配置部署。

谈到渲染，客户端（CSR）在2013年被React流行。但是，它存在负载速度和搜索引擎优化的问题。因此，这次是由元框架提供的。

SSR现在已经随着部分水合，进行性水合和streaming的所有创新而变得迅速燃烧。但这不再是Next.js中的默认渲染方法。现在，您可以同样选择静态站点生成（SSG）或结合方法。通过这种方式，可以在内容交付网络（CDN）或Edge上构建和兑现网站。

尽管有了SSG，但带有许多产品的大型电子商务网站花费了非常长的时间。在这种情况下，您可以进行增量静态再生（ISR），因为它可以在保留短加载时间时解决缩放问题。

除了多种渲染策略外，Next.js提供了以下优化：

  • 代码拆分（也称为动态导入）：根据路由或组件将JS和CSS代码分隔为较小的捆绑包，并在需要时加载它们。<<<<<<<<<<<<<<<< /p>

  • 脚本优化：使您能够决定何时将第三方脚本生效以及何时等待其他组件呈现。 （第三方脚本可以是资源密集型的，可能会锁定渲染敏感的组件）。

  • 图像优化：根据设备尺寸调整图像大小，在加载图像时显示占位符等等。我们在下面讨论其他图像优化。

Next.js确实是表现的。这就是为什么more than 100 000网站在其上建立的，包括Netflix和Uber等大型企业的网站。然后，Gatsby必须提供什么？

阅读更多： What is Next.js?

什么是盖茨比？

盖茨比是2015年创建的元框架，旨在与静态网站结婚。

在Gatsby出版之前，老式的SSG占据了领域：他们将页面模板与Markdown文件组合在一起，以创建使用HTML代码构建的页面。他们的主要缺点是他们缺乏动态行为。然后，盖茨比（Gatsby）用其 dynamic Jamstack体系结构和水合以提供单页应用程序体验彻底改变了领域。

要提及的一个重要的事情是，所有数据均在构建时间的特定GraphQL数据层中累积。通过这种方式，您可以通过GraphQl API查询从不同来源查询所有数据。 GraphQl helps可以自动优化图像，并将数据加载在使用的同一位置。

通常不建议使用

盖茨比（Gatsby）用于大型网站，因为您的网站增长可能会持续很长时间。但是这个问题是common for all static sites，包括基于Next.js的common for all static sites。

为了解决问题，盖茨比在最新版本（V5）中增强了其增量构建。最近，盖茨比还提供其他渲染方法，例如SSR和递延静态生成（DSG），类似于ISR，用于更好的缩放。

Gatsby拥有~54 000 GitHub星和~4 000贡献者。它的handles高流量站点非常好。这就是为什么Cloudflare基于Gatsby。

阅读更多： What is Gatsby?

框架如何比较？

Next.js和Gatsby同样提供了易于开发和出色的用户体验。如果您最佳地结合渲染方法，它们可能会快速燃烧。有了快速的刷新机制，Meta-FrameWorks允许您在引入更改时无需构建即可预览更改。

另外，您将在SEO上登上这两个选项。内容优化，良好的站点地图和有意义的路径名使您在核心Web Vitals上得分很高。

Meta-FrameWorks在体系结构中也非常相似：您可以将它们与成熟的后端，无头CMS或无服务器云进行搭配。

在这里，我们来到了我们博客文章的中心问题：有什么区别？

盖茨比有意见，而下一步

next.js因不强迫您进入任何特定的技术堆栈而被爱 - 无论您如何处理数据或喜欢哪种渲染方法，它都会有效。 Guillermo Rauch创建了this way的框架。不过，您必须做出更多决定。

相反，盖茨比通常只提供一种做事的方法，而您将写更少的代码和更多的配置行。

以创建最爱的方式为例。在Gatsby中，您可以通过修改gatsby-config.js文件来做到这一点。 Meta-Framework将为不同设备生成不同尺寸的文件的集合 -

与此同时，在Next.js中，您必须要handle favicons manually或购买third-party service才能生成所有不同的尺寸。

或获取数据获取：next.js不会强迫您使用任何协议，无论是休息，graphql，甚至肥皂。但是，您必须考虑如何实施集成。

在Gatsby中，处理数据的唯一正确方法是通过GraphQl层。 （但是，即使声称这种查询比其余的查询更易于理解，但它们通常更冗长）。

。

等等，但是您可以从gatsby中获取REST API的数据吗？是的，您可以使用插件 - 与大多数其他功能一样，可以通过插件获得集成。

插件生态系统

盖茨比简化了集成：只需提供API键即可安装和配置插件。您不需要打扰SDK或浏览API文档。

Next.js不包括插件环境。要从CMS获取数据，您必须研究其API，考虑在各个页面上集成在网站中的重复使用，并可能针对典型情况开发一些SDK包装器。

和在盖茨比（Gatsby）中，有各种需求的插件，不仅是集成。需要打字稿支持吗？有一个plugin。您要将备注文件转换为HTML吗？有一个特殊的变压器plugin。

请记住，大多数插件必须配置。听起来像很多配置，对吗？幸运的是，盖茨比（Gatsby）也有开胃菜，它是特殊的插件，可以减轻从头开始设置所有配置，盖茨比图像组件和themes的需求，可帮助您制作页面。

插件的缺点，尽管您可以知道它们如何在引擎盖下工作。如果您需要通过配置或遇到错误的行为来调整不可能的事情，则需要处理插件的源代码。

哪个框架更快地提供静态网站？

静态页面由HTML代码与一些JavaScript加固，这两个框架都是相同的。因此，没有JavaScript框架可以以这种方式影响加载速度。

用于水合，两个元框架都称为“水合物”方法并允许部分水合，因此JavaScript束几乎是相同的。

实际上，您选择的CDN可能比您选择的框架对您的网站的性能具有更大的影响，尤其是如果网站不太依赖JavaScript。

但是，一件事对水合后的网站速度产生了非常重要的影响 -

。

阅读更多： What is a static website?

Meta-FrameWorks如何比较图像优化？

这两个框架都在优化图像方面做得很好：它们支持现代轻巧的图像格式，例如。

这是两个框架支持的功能：

  • 占位符：在检索高分辨率原件的同时显示出质量降低的图像的版本。

  • 懒惰加载：仅在视图前显示图像时才加载图像。 （图像可能很重，但是您不需要一次加载它们。）

  • 图像CDN：从适合缓存和调整图像的特定CDN提供文件。

尽管Meta-FrameWorks提供了类似的优化，但它们的实现方式不同。 Next.js具有用于图像优化的专用API，该API接受查询字符串参数并返回处理的图像。 Gatsby用其GraphQl API层和transformer插件的力量来完成所有魔术（无需访问API）。

此外，盖茨比在image art direction上更好地定义了不同屏幕尺寸的不同图像源。当您拥有大量的地块，上面有许多可在台式机上看起来不错但在移动设备上不可读的可读取标签时，它会变得有用。使用图像艺术方向，您指示您的网站显示具有更大智能手机标签的不同图像。

其他差异

  • 在Next.js中，Global Middlewares使国际化（I8N）更有效。该工具使您能够建立顶级中间件并在边缘网络上检测到该国家/地区，以便将用户重定向到适合该地区的预生产页面。

  • Next.js介绍新的React功能支持更快。例如，它已经在2021年10月支持了React组件，而Gatsby仅在2022年11月支持它。

  • next.js提供low-code integration.在视觉编辑器中构建量身定制的组件，然后将其与单行集成到项目中。盖茨比还没有这样的机会。

  • 使用Gatsby，当您将新数据上传到CMS时，您可以轻松地轻松使用preview pages，而它可以使用Next.js

    • 获得harder

底线

过去，当盖茨比（Gatsby）是一个没有SSR的简单静态站点发生器时，两个框架具有更独特的功能。现在有更多的相似之处。

例如，图像优化，缓存和代码拆分都是帮助两个框架进行优化的关键要素，以供搜索引擎优化。 ，因此，如果您发现自己不喜欢它，则可以快速进行网站。

您应该选择Next.js，如果：

  • 您不喜欢GraphQl

  • 您打算依靠SSR（在Gatsby中仍然不完美）

  • 您更喜欢对Integrations的更多控制

一个标准盖茨比遇到更好的是初始设置的便利性。只需几个命令，开发人员就可以快速获取一个项目，并运行所有需要的集成。这就是为什么您可以选择盖茨比作为一个由.md文件组成的简单博客。