在Gatsby和Next之间做出选择时，您如何决定哪个框架最好？让我们探讨一下两者之间的主要区别。我们将以一些问题结束，要求我们自己做出最佳选择。让我们首先看看使用Gatsby和Next.js启动网站是什么感觉。1.入门Gatsby除了全面的文档外，Gatsby的网站还包括一个迷你教程，向新用户展示构建和部署Gatsby站点只需几个简单的步骤。开发人员可以使用GatsbyCLI启动一个基本站点，或者从Gatsby的入门站点库中选择一个预先设计的模板。Starter模板允许用户快速创建美观实用的博客，而无需对设计大惊小怪。虽然入门很容易，但定制可能涉及一些学习曲线。Gatsby严重依赖GraphQL进行页面路由、获取API信息和使用插件（稍后我们将详细讨论）。如果您以前从未使用过GraphQL，那么学习一个快速教程来学习基础知识是值得的。Next开始使用Next应用程序就像在终端中键入命令一样简单。Next的CLI工具create-next-app的工作方式与create-react-app相同，允许您启动一个完整的应用程序，并具有图像优化和页面路由等附加功能作为一组可自定义的默认值。从这里开始，需要对React有基本的了解才能构建和自定义Next站点。Next.js网站提供了全面的文档，其中包含有关使用React或TypeScript构建Next应用程序的详细信息。他们甚至提供免费的“入门”教程来帮助新用户迈出第一步。有关如何将Next与许多其他流行工具、库和语言一起使用的示例，也可以在其GitHub页面上找到。2.SEOReact应用程序在没有像Gatsby或Next这样的框架的情况下构建，其SEO结果非常差。他们使用客户端呈现（CSR）来呈现页面；当浏览器请求页面时，HTML、CSS和脚本标记将传递给浏览器。此脚本标签包含您的浏览器在您的站点上构建所有React内容所需的指令。为了让搜索引擎正确索引和找到您的网站，网络爬虫需要能够在您的网站上线之前读取内容。但是，大多数网络爬虫在爬取时不会运行该浏览器脚本，因此它们无法及时获取有关您页面内容的所有信息以对其进行索引。Gatsby和Next通过处理页面渲染的方式解决了这个问题。在网页在浏览器中运行之前，两者都会为网络爬虫提供您网站的全部内容，从而使您的网站出现在Google搜索结果中。让我们谈谈每个框架如何帮助SEO。GatsbyGatsby使用静态站点生成(SSG)来预呈现页面。在部署使用Gatsby构建的网站之前，您的代码会经历一个构建过程，在该过程中，在收到浏览器请求之前会预先构建完整的HTML网站。当用户访问在Gatsby中构建的页面时，Gatsby会在构建文件夹中找到该页面的HTML文件并重新填充该页面，使其成为一个完整的React应用程序。在对您的网站进行任何更新后，构建过程需要再次运行，以便CDN具有最新的更新。因此，Gatsby更适合全天变化不大的网站，例如登陆页面、公司网站和博客。NextNext.js可用于静态站点生成，但它针对纯服务器端渲染进行了优化。服务器端渲染(SSR)多年来一直使用PHP和.NET等语言完成，但Next允许我们利用SSR和JavaScript和Node.js作为运行时服务器。与Next的主要区别在于它使用动态呈现（一种奇特的说法“页面在浏览器请求时构建”）。您网站的所有信息（路由、页面数据等）都位于Node.js服务器上。当您从浏览器导航到Next.js页面时，服务器会查找您请求的页面。正是在这一点上构建了页面，然后将数据发送到浏览器供用户查看。因此，动态呈现非常适合每天更新多次的站点，例如电子商务商店和在线论坛。3.获取和处理数据用于获取数据的方法的最大区别取决于您的应用程序是静态生成的还是服务器端呈现的。由于静态生成的网站在浏览器中呈现之前会预先构建页面，因此它们会在构建时获取所需的任何数据。相反，服务器端生成的网站在运行时获取所需的数据。GatsbyGatsby不关心你的数据来自哪个API，但它获取并获取它返回的任何数据，并将其作为GraphQLAPI提供给你。但是，为了访问数据，您需要在代码中编写GraphQL查询。GraphQL的伟大之处在于它允许获取非常具体的数据——例如，所有带有特定标签的博客文章的名称。这是为了通过减少网络使用来提高性能。但是，如果您正在构建SSGGatsby站点，所有数据都将在构建时获取，而不会影响运行时性能。NextNext在获取数据的方式上很灵活，让用户决定他们想使用哪种方法。在数据获取方面，唯一需要的部分是使用其生命周期方法之一（getServerSideProps启用SSR或getStaticProps启用SSG）来获取预渲染页面数据所需的初始道具。如果您计划获取大量数据，SSR是更好的选择。大量数据会导致SSG应用程序构建缓慢。然而，SSR中使用的服务器功能要强大得多，能够快速、重复地执行这些复杂的操作。4.插件、扩展和生态系统Gatsby和Next如此受欢迎的一个原因是它们都可以轻松地与您已经熟悉的其他工具和语言集成。通过他们的合作伙伴生态系统，这些框架允许您进一步扩展应用程序的功能，而不会产生意外的副作用。Gatsby除非您使用启动器，否则大多数附加组件都不包含在您的Gatsby文件中。然而，Gatsby与Wordpress非常相似，因为它有一个庞大的插件生态系统，可以轻松地使用您想要添加的任何功能来增强您的应用程序。压缩图像、添加TypeScript编译器和使用预构建的主题只是Gatsby插件存储库中可用功能的几个示例。通过插件库，Gatsby拥有所有框架中最大的合作伙伴生态系统。插件可用于您已经使用的大多数工具和库，这使得Gatsby与其他工具的集成变得非常简单。如果您想要自定义功能或主题，您还可以构建自定义主题或插件并将其托管在插件存储库中。Next传统上手动添加到React的功能，例如页面路由、图像优化和代码拆分，是开箱即用的默认功能，可以在Next.js配置文件中轻松自定义。Next由流行的部署和协作平台Vercel创建。因此，Next受益于Vercel令人难以置信的合作伙伴工具生态系统。当然，下一步是优化与Vercel的使用，而且还要与您已经用于托管、样式和构建的其他工具和库一起使用，从而使其易于融入您的技术堆栈。5.扩展你是唯一接触你的应用程序的人，还是其他人维护它？您是否期望每天有很多用户活动？在Gatsby和Next.js之间做出选择将取决于您希望将来将应用程序扩展到多大。GatsbyGatsby最适合个人博客和小型静态站点。当应用程序变得太大时，它们的构建速度可能会非常慢或根本无法构建。在他们的缩放问题文档页面上，Gatsby指出“大”通常是指页面超过100,000的应用程序，或者从GraphQLAPI获取大量数据的情况。NextNext是轻量级的，易于爱好者使用，但功能强大到足以扩展为企业使用。Netflix、Hulu、Nike等日访问量达数万次的大型企业都在使用Vercel托管的Next应用。构建大型企业应用程序时应使用Next.js。6.托管现在您已经构建了您的应用程序，是时候将它托管在某个地方供人们使用和交互了。让我们谈谈可以在哪里托管Gatsby和Next.js应用程序。在Gatsby构建过程中，Gatsby生成可在浏览器中使用并托管在任何地方的静态资产。您可以灵活地决定最适合您的托管平台：Netlify、Firebase、Azure、AWS、Vercel或您想要的任何平台。Next与Gatsby类似，Next的SSG选项生成可以在任何地方托管的静态资产。但是，如果您选择SSR路线，则必须找到一个Node.js服务器来托管它。Vercel——Next.js的创造者——当然是为此而优化的。您最喜欢的大多数托管平台也支持SSR（Firebase、Netlify、AWS），但请务必在初次学习时使用SSR托管专用教程。7.在Gatsby和Next之间做出决定在这两个框架之间做出决定归结为以下问题：我的页面需要多久更新一次？通过动态路由，Next针对需要频繁更新页面的应用程序进行了优化，例如商店或侦听消息的应用程序。相比之下，静态站点每次更新都需要重新构建。如果您要创建页面不经常更改的博客或网站，则可以使用Gatsby。我是在构建博客还是静态站点？长期以来，Gatsby一直被认为是个人博客和小型静态网站的绝佳工具。因此，它有一个带有主题的扩展库，可为您提供博客中所需的功能，因此您不必从头开始构建它们。如果您正在构建一个小型网站或博客，但又不想从头开始构建所有功能，那么Gatsby是您的绝佳选择。这个应用程序需要扩展吗？众所周知，Gatsby应用程序在变得太大或获取大量数据时会遇到错误和构建速度变慢。如果您的应用程序将有超过100K的页面，或者需要获取大量数据（例如具有许多产品变体的商店），Next.js是您的最佳选择。End要优化具有大量更新的大型企业级应用程序或网站，Next.js是不二之选。对于小型或静态网站和博客，Gatsby是最佳选择。但是，无论您选择哪种，您都可以期待经过优化的React应用程序具有开箱即用的功能，可以提高性能，与最流行的第三方工具集成，并改进SEO。
