让我先声明一个事实：这两个框架都很了不起，解决了React现有的很多问题或限制。令人惊讶的是，两者都有许多类似的OOTB功能，使我们作为开发者能够创建高性能的网络应用。然而，直到最近，情况还不是这样。
就在几个更新/版本之前，这两个框架都有一些明显的差异，这使得开发者很容易从这两个框架中选择一个对他们的使用情况有意义的。但是随着最近的更新，这两个框架已经变得更加接近。
在这篇文章中，我们将深入探讨这两个框架的异同，到最后，我相信你会根据自己的使用情况来选择一个。
Gatsby与NextJS的相似之处
在我们深入了解这两个框架的差异之前，让我们评估一下它们之间的一些相似之处。
- Gatsby和NextJS都是基于React的框架，具有React不支持的许多功能。
- 由于两者都提供预渲染的HTML，网站对搜索引擎友好。
- 这两个框架都有内置的路由功能，代码拆分和代码优化是开箱即用的。
- NextJS和Gatsby的页面加载速度都很快，因为它们在用户的视口出现之前就预先获取了链接。
- 这两个框架都支持静态网站生成（SSG）、服务器端渲染（SSR）和客户端渲染（CSR）。
相同点
Gatsby与NextJS的区别
1.数据获取。
Gatsby。虽然Gatsby确实支持在不使用GraphQL的情况下获取数据，但它强烈反对这样做。它更倾向于并建议通过GraphQL来获取数据。
NextJS：它允许你通过REST API、GraphQL或其他任何方式实现数据获取。它对你希望使用的数据获取方法是不可知的。
总结。如果你希望坚持使用GraphQL，或者想把它作为一个学习的好机会，那么Gatsby就适合你。然而，如果你不喜欢GraphQL，那么NextJS可能更适合你。
2.插件和入门模板
插件是各种常见的网站功能，你可以把它们放到你的网站中。你可以把它们看作是npm包，以增加某种功能或避免重新发明车轮。
Gatsby。它提供了一个社区驱动的插件生态系统，使你能够快速入门并利用一些伟大的功能。例如，如果你想在你的网站上添加Facebook分析，你可能会或不可能找到一个node包，但你可以通过Gatsby轻松获得这个插件。
NextJS：NextJS没有像Gatsby那样的插件生态系统，开发者必须自己完成所有这些工作。
总结。如果你希望完全控制你的项目和数据系统，那么NextJS将是最好的方法。然而，如果你想避免重新发明轮子并利用伟大的插件功能，那么Gatsby就适合你。
3.弯曲的方法
尽管直到最近还不是这样，但这两个框架现在都支持静态网站生成（SSG）、服务器端渲染（SSR）和客户端渲染（CSR）。唯一的区别在于这些框架处理延迟渲染的方式，我们将在此讨论。假设你有一个博客网站，有1000个页面或博客。其中近400个是过时的或非关键的，你不希望事先建立它们。现在，让我们看看这两个框架如何处理这种情况。
Gatsby。它使用了一种叫做延迟静态生成或DSG的东西。你可以通过DSG实现的是，你可以在构建时预先渲染关键的600个页面，并在用户要求时推迟非关键页面的生成。这就加快了构建过程。然而，在这400个推迟的页面上显示的内容并不是最新的数据，而是上一次完整构建的数据。尽管如此，当数据更新时，你可以使用webhook来使缓存失效，并重新构建/部署最新的内容。
NextJS：它使用了一种叫做增量静态再生或ISR的东西。这允许你在构建和部署你的Web应用后更新或创建静态页面。当用户请求一个延迟的页面时，你可以用最新的数据按需建立页面。这有助于你避免你的应用程序上的陈旧数据问题。
总结。根据你的数据变化的频率，你可以使用两种方法。Gatsby提供了一个更强大的数据状态，而NextJS则在用户请求时提供最新的数据。然而，在NextJS中，请确保你在延迟和非延迟（预建）页面之间保持数据的一致性。
4.图像优化
Gatsby。一个整洁的Gatsby插件，叫做 gatsby-image的插件，在构建时调整你的图片大小，这意味着像智能手机这样的小屏幕设备不再需要下载桌面大小的图片。作为奖励，它可以懒惰地加载图片，意味着进一步提高网络速度。同样的图片，在桌面上是2Mb，而在手机上则是300Kb。这一切都要归功于Gatsby Image。
NextJS：它提供了一个自动图像优化的标签，将图像转换为现代图像格式WebP，提供最高质量和最佳尺寸。
5.5.安全
Gatsby。 由于Gatsby将你的文件编译成预渲染的文件，而不是在服务器上实时构建，它减少了任何攻击的机会。此外，Gatsby增加了一层间接性，掩盖了你的CMS - 因此，即使你的CMS有漏洞，坏人也不知道在哪里可以找到它。最后，有了Gatsby，你可以从一个全球CDN为你的网站提供服务，这就有效地消除了DDoS攻击的风险。
**NextJS：**用NextJS制作的网络应用程序也是安全的，在获取和更新数据时使用适当的认证方法。尽管如此，由于它与服务器或数据库直接相连，仍有一些漏洞和攻击的空间。
**6.内容管理系统 -**CMS
盖茨比:Gatsby将数据和网站分开，这意味着你的团队中除开发人员以外的成员也可以在网页上编辑数据，然后可以进行编译。通过插件连接到CMS，以及无需编程知识就能更新数据，意味着Gatsby是创建静态网站的首选框架。
NextJS：正如我们所知，NextJS没有一个插件生态系统，这使得从CMS中获取数据变得非常麻烦。我们可能需要找到他们的SDK或API，然后将它们整合到我们的系统中。此外，在创建这种可重复使用的系统时，最好记住依赖性反转的问题。
Gatsby与NextJS的对比总结
总结
现在你已经决定选择一个框架而不是另一个，我将会有几篇关于从头开始创建一个Gatsby和NextJS项目的后续文章。请在这里关注和订阅中 和 ，如果你认为这篇文章对你有价值的话。
Want to Connect?
构建可组合的网络应用
不要建立网络单体。使用 比特来创建和组成解耦的软件组件--在你喜欢的框架中，如React或Node。构建可扩展和模块化的应用程序，拥有强大和愉快的开发体验。
把你的团队带到 比特云来托管并共同协作开发组件，并作为一个团队加快、扩大和规范开发。尝试用设计系统 或微前端的可组合前端，或探索用服务器端组件的可组合后端。
了解更多
Gatsby vs NextJS: Which Should You Use?原文发表于Bits and Pieceson Medium，人们在这里通过强调和回应这个故事来继续对话。
