每当我们想建立一个速度快、对搜索引擎友好、能够提供良好用户体验的静态网站时，我们会选择两个最常用的React框架之一：Next.js与Gatsby。
Next.js是动态渲染的，而Gatsby是事先静态生成和渲染的。如果你想建立一个React网站或应用程序，而不需要处理路由、配置或服务器端渲染，请看一下Next.js与Gatsby的区别、其应用以及何时使用哪一个。
目录
什么是 Next.js？
➤为什么要使用 Next.js？
什么是 Gatsby？
➤Gatsby 是 SSR 还是 CSR？
➤什么时候不应该使用 Gatsby？
Next.js vs Gatsby。哪个是最好的？
结论
什么是Next.js？
正如我们在以前的博文中所介绍的，Next.js是一个基于React的框架，可以构建服务器端渲染的应用程序，并使搜索引擎能够轻松地优化React应用程序，而无需配置。它一般用于部署登陆页面、有利于SEO的网站、电子商务商店和各种需要高性能加载时间的网络应用。
为什么要使用Next.js？
挑选最好的框架来开发网络应用，通常取决于你的项目的生产要求和中/长期目标。然而，这些是使用Next.js的一些主要优势：
- 使得编码更容易
- 速度快
- 渲染速度快
- 它有内置的CSS
- 允许更好的图像优化
- 它有助于提高SEO
- 它与ESLint兼容
- 能够方便地进行定制和部署
- 有API支持
什么是Gatsby？
就像Next.js一样，Gatsby也是基于React的，是一个静态网站生成器，这意味着Gatsby将为我们生成静态HTML文件，我们将其加载到服务器上。这与很多网站的工作方式不同，你访问一个网站，它必须查询数据库或在服务器上做一些编程，以提供你的网页。盖茨比将打破这一惯例，提前预设好所有的东西，并提供给你。
值得一提的是，静态网站并不意味着互动或不动态。例如，我们可以将JavaScript加载到Gatsby提供的HTML文件中，也可以进行API调用，进行互动，并建立非常丰富和沉浸式的网站，尽管它们的性质是静态的。
Gatsby的优点之一是它使用**GraphQL，一种查询语言，可以从任何地方获得数据，这是对如何使API调用更简单、更有效的一种进化--这种功能被称为数据层**。
Gatsby还使用React和CSS。虽然React将被用于所有的模板，但CSS将被用于样式设计。
为什么我应该使用Gatsby？
简单地说，你使用Gatsby是为了速度、安全和改善开发者体验。
可以说，你使用Gatsby得到的最大收益之一，因为它生成的是一个静态网站，是速度。你会看到它要比许多替代品，如甚至使用WordPress的缓存网站快得多，因为这种静态的东西真的很难被打败。这是因为Gatsby是基于可调整的插件和主题，就像我们在下面看到的那样，使得开发网络应用或软件的过程比Next.js快得多。
另外，由于是静态的，只是运送HTML文件，这在本质上会更安全。没有数据库可供入侵或访问，没有用户数据会被存储在服务器上的盖茨比网站，所以即使有人能够入侵服务器本身，他们也只能访问HTML文件，其破坏力将远远低于他们能够访问的，例如，用户数据、购买、信用卡号码等等。
最后，对于开发人员来说，在过时的堆栈中工作可能真的很累，而现代开发环境是与Gatsby合作的一个巨大优势。工具是简单和强大的，语言是现代和干净的，总的来说，它是一个真正无缝的工作环境。
什么是Gatsby插件？
更重要的是，根据StackOverflow的调查，在过去几年中，JavaScript一直是最常用的编程语言。然而，Python的排名一直在上升，与Typescript并列，是开发人员最想使用的两种语言。
Gatsby是用插件架构构建的，它有一个巨大的**插件生态系统，以及Gatsby主题**。
插件位于编写的代码和输出的代码之间，正如我们前面所说的，所有的东西都要经过Gatsby，这使得它能够在所有的东西之间介入，并且只是压缩它--无论是图片还是需要编译的CSS代码，等等。
Gatsby是一个SSR还是CSR？
简单的答案是，Gatsby实际上同时支持SSR（服务器端渲染）和CSR（客户端渲染）。
SSR是将内容显示在屏幕上的最常见的方法，它通过将服务器上的HTML文件转换为浏览器友好的数据来操作。简单地说，它使你能够用用户访问页面时获取的数据对页面进行预渲染。Gatsby通过异步函数支持SSR，你可以在这里看到。
另一方面，CSR对于网站渲染来说是比较新的。你可以通过它创建常规页面，使网站或应用程序的响应性和无缝性大大增强。使用CSR可以让你在浏览器中使用JavaScript渲染网站，这意味着你可以在浏览器上动态地建立每个路由，而不是每个路由都有一个不同的HTML页面。
什么时候不应该使用Gatsby？
如果你有很多内容，或者你预计你的内容会随着时间的推移而增长，那么静态生成的网站可能不是你的最佳解决方案，因为由于内容的数量，建立网站项目的时间会更长。
当创建一个有数千页的非常大的网站或应用程序时，它的重建速度会非常慢。而且，如果你在点击发布时需要等待20分钟才能上线，这不是一个很好的解决方案。
简单地说，如果你的网站内容随着时间的推移会不断增加，那么Gatsby不会为你扩展。而且，你不仅要考虑你现在有多少内容，还要考虑你将来会有多少内容，也就是说，在选择Next.js与Gatsby时，要牢记你预计将来会有多少页面。
Next.js与Gatsby。哪一个是最好的？
Next.js与Gatsby的主要对比之一是，Next.js最初是一个服务器端的渲染工具。换句话说，它从9.3版本开始只支持静态网站生成（SSG）。另一方面，Gatsby是一个静态网站生成器，所以有很多开箱即用的解决方案，比如Gatsby Themes，一个相当丰富的插件生态系统，等等。让我们来看看两者之间的主要区别，也就是它们如何处理数据和路由，以及如何部署。
它们如何处理数据
另一个区别是它们处理数据的方式。Gatsby的数据获取默认是通过GraphQL进行的，而Next.js则更灵活一些，你几乎可以自己决定如何处理数据的获取。让我们更好地了解一下。
-
Next.js对你如何处理你的数据没有意见，唯一相关的因素是它有自己的生命周期方法，称为
getInitialProps这是一个异步方法，需要在数据从服务器发送到客户端之前解决。在最后，而不是getInitialProps，文档建议使用getStaticProps或getServerSideProps因为这些总是在服务器上运行的获取方法（从不在客户端运行）允许你在静态生成和SSR之间有一个精细的选择。 -
虽然Next.js并不 "关心 "你如何获取数据，但Gatsby允许你从任何你想要的API或markdown文件中获取数据，并通过GraphQL API向你提供。当你建立你的页面时，你写下对GraphQL API的查询，以获得博客文章的列表，或关于页面内容的查询，在渲染时，它将向你提供该API，然后它将为你渲染出这些HTML页面。总而言之，Gatsby需要知道你网站上发生的一切，你所有的数据在哪里，你所有的图片，以及你所有的样式。
他们是如何处理路由的
-
Next.js：你有一个名为pages的文件夹，在这里你可以创建index.js、about.js和其他子文件夹，里面有页面。在这里，不需要配置路由，你只需在pages目录下创建页面，就可以运行了。通过括号语法，动态URL也是可能的，它允许捕捉你可能需要的所有路由。
-
Gatsby。在这里，你也可以有一个页面目录，但是，他们也有一个API，你可以动态地创建路由。例如，我们在上面谈到了GraphQL API，你可以创建一个博客文章的查询，然后通过它们进行循环，并使用
createPageAPI来动态地创建页面。在这里，你可以指定slug是什么，什么组件将被呈现出来。假设你有一个10,000篇博客文章的列表，你可以循环浏览它们，并为每篇文章动态地创建页面。
它们是如何部署的
-
Next.js：这是一个Node应用程序，你几乎可以在任何你想要的地方托管。最近版本的Node托管平台现在允许你把你的Node应用或Next.js应用变成无服务器应用。
-
Gatsby：你可以在任何你想去的地方托管它。最后，Gatsby被编译成一套CSS、HTML和JavaScript，可以部署在任何你想去的地方，而不需要特殊的配置，因为它已经为你的每一篇博客文章，以及每一个页面建立了文件夹。
结论
不管怎么说，Next.js和Gatsby都是建立静态页面的非常好的工具，而决定选择哪一个，其实是一个项目需求的问题。不过，需要考虑的最重要的事情之一是你的网站在一天内会有多少次更新。正如之前已经解释过的，Next.js是一个服务器端的渲染工具，所有的更新几乎都是动态发生的，而使用Gatsby，每一次更新都意味着你必须一次又一次地建立你的网站，除非你使用**SSR API**，允许在运行时用用户访问页面时获取的数据来渲染页面。
但一般来说，用Gatsby建网站比较容易，因为它有很多插件和现成的解决方案，所以如果你想建一个简单的网站，不需要太多日常更新，你可以选Gatsby。这些网站可以是公司网站、产品的登陆页面，甚至是个人博客。另一方面，Next.js是一个真正伟大的工具，可以建立出色的和定制的用户体验，它主要用于建立大的电子商务商店，当你的网站有大量的日常更新，或者当你想建立一个真正的大门户网站，你有很多的用户。当你的项目对服务器端渲染的要求高于静态网站生成时，Next.js是一个很好的选择。
