Next.js 与盖茨比，lequel Choisir ？

next vs gatsby

在前两篇文章中，我向您介绍了两个 React 框架， 盖茨比 等 Next.JS .但有时在两者之间做出选择可能很复杂，这就是为什么今天我们要比较它们，看看它们的优点，但也看看它们的缺点，最重要的是，它们适合什么类型的项目。

如果您想对这两个框架进行非详尽的介绍，您当然可以找到 Next.js 上的文章 ，而且在 盖茨比 .

我们将看到在做出选择之前必须了解的差异可能会影响项目的正确执行及其成功。让我们从第一个区别开始。

Le 服务器端渲染 (SSR)

我们两个框架之间的第一个显着区别是服务器端渲染或服务器端渲染。尽管差异相当微妙并且不会影响用户体验，但对于开发人员来说可能会有一些差异。

有效， Next.js 提供服务器端渲染，即页面将在客户端请求时由 NodeJS 服务器处理。至于 盖茨比 ，静态渲染是唯一可能的选择（其实可以使用SSR但不推荐）。与 Next 不同，Gatsby 将在构建时生成 HTML 和 JavaScript 页面。

知道这一点，有几件事需要考虑。

首先，您的住宿提供的选择。如果后者不为您提供使用 NodeJS 的可能性，请转而使用 Gatsby 或去看看 Vercel（由 NextJS 的开发人员创建）或 Netlify 等竞争对手（如果您有义务使用 Next）。

其次，有必要考虑到 Gatsby 的选择涉及每次修改应用程序时都重新构建应用程序，这在生产阶段可能会浪费时间。

数据管理

另一个显着的区别是我们框架之间的不同数据管理。

最大的特点之一 盖茨比 是有利于使用的事实 GraphQL 在数据恢复中。它将允许您使用来自第三方 API 的数据轻松生成您的网页。 GraphQL 带来了许多有利于社区选择的优势 盖茨比 .例如，图像的自动优化可加快页面加载并改善用户体验，或者将数据加载到使用它的组件中，这使得查看数据的来源以及如何修改数据变得更加容易。

至于 NextJS ，它给你更多的选择。确实，如果您还想使用 GraphQL ，您可以，就像您想使用 REST API 一样。为此，有一些具有不同目标的方法，其中发现了 获取静态道具 或者 获取ServerSideProps .您了解，它们取决于您为 Web 应用程序选择的呈现方式。

现在是选择的时候了。如果您希望避免使用 GraphQL ，另一方面，如果你想使用后者，那么盖茨比的选择将非常相关。
如果您希望在管理数据方面具有极大的灵活性，那么您的选择应该是 Next。如果如何获取数据以及如何管理数据对您来说并不重要，那么您可以为下一个项目自由选择所需的任何框架。

生态系统与环境

无论是 下一个 或者 盖茨比 ，两者都有一个非常活跃的社区，为后者的发展和进步做出了贡献。但是有一些不同之处不能掉以轻心，特别是如果你必须投入到你的项目上的时间对你来说是一个重要的变量

事实上，如果您想快速部署您的 Web 项目，Gatsby 将通过其庞大的插件库为您节省宝贵的时间。这些是由 Gatsby 开发者社区开发的，其中有 3000 多个，您可以在官方网站上找到它们。其中包括，例如， gatsby-源文件系统 它从本地文件系统中检索 Gatsby 应用程序的数据。然后，您可以使用查询这些文件 GraphQL .
我还可以告诉你一个事实，Gatsby 拥有市场上所有 React 框架中最大的模板和主题库，也可以在官方网站或 Github 上找到。

对于 Next.js，没有插件社区，这将迫使您自己做所有事情。例如，如果您想要使用 Markdown 的博客，则需要自己检索和转换数据。这不一定只有缺点，因为它为开发人员提供了控制其项目的所有代码行的可能性。

一般来说，这里的选择会很简单，如果开发的便捷性和速度对你来说非常重要，Gatsby 不用说，尤其是社区每天都在为你甚至不知道的用例开发新的插件和模板想象一下。当然，这样做的缺点是在出现问题时要依赖社区。是的，您将不得不等待社区修复潜在的错误，或者您自己修复它们。如果这对您来说是个问题，您应该考虑改用 Next.js。

共同点：

您已经意识到这一点，但并非所有内容都将我们的两个框架分开。

路由系统

正如我在之前的文章中已经多次告诉你的那样，React 只是为我们提供了编写应用程序的基础。实际上，为了完成一个完整的项目，我们会错过很多事情。路由系统是默认不允许我们用 React 进行项目的缺点之一。

好消息， 下一页 等 盖茨比.js 默认情况下为我们提供路由器系统。两者都基于@reach/Router，它特别允许预加载页面，或者支持在服务器端呈现。

搜索引擎优化友好

这也是前端开发者选择其中之一的原因之一。事实上，无论是 Next 还是 Gatsby，每个都带来了完全符合我们优秀的旧 Google 排名标准的功能。

例如，Next.js 允许服务器将代码转换为 HTML，或者 Gatsby 在构建期间将我们的代码转换为 HTML，因此 Google 机器人可以更好地理解代码，从而更好地引用它。再加上这两个框架提供的所有优化，最重要的是允许更快地加载页面，这在引用中也被考虑在内。

开发人员和用户体验

为了快速完成这个非详尽的共性列表，重要的是要讨论它们为开发人员提供的体验，尤其是为用户提供的体验。

对于开发人员的体验，他们的社区，以及每个提供的工具都极大地有助于改进它。它们也是完整的这一事实提供了比 React 更好的体验。

对于用户，我已经讲了一点。更快的加载、预加载……这些都是显着提升用户体验的原因。

结论

总之，这两个框架相当接近。您的选择通常会归结为细节，例如您与 GraphQL 或服务器端渲染，即使 Gatsby 可能支持。

为了简化您的选择，如果您的页面需要定期更新，建议使用 Next.js ，另一方面，如果不是这种情况，建议使用 Gatsby。

最后，这两个框架都是不错的选择，并且会经常更新，因此请尝试一下，看看您在下一个项目中更喜欢这两个框架中的哪一个。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/39254/40042511