为什么我选择Next.js而不是Gatsby，Gridsome或Nuxt？

当我们为新的Web项目选择框架时，我们通常会坚持使用我们熟悉的工具，而不管它们是否适合该项目。我正试图做相反的事情。只要有机会，我就会尝试新技术。这些实验后我学到了什么？为什么我最终将Next.js用作我的标准静态站点生成器（SSG）工具？ 在这篇文章中，我将讨论如何尝试不同的Web技术。这是关于在Jamstack中找到合适的工具，如何为开发人员选择正确的选项并将其很好地集成到他的项目中，以及为什么选择Next.js。

关于我在Web开发中的经验

我从使用PHP和MySQL进行Web开发开始了我的旅程，然后，当我上大学时，我切换到了.NET平台。我喜欢类型安全性，MVC模型和代码调试可能性。就是这样，我以后继续使用.NET进行编程和咨询。但是我逐渐转向JavaScript，尤其是Angular的早期版本。



大约两年前，我几乎完全转向了Jamstack。我决定仔细研究Vue.js，因为它看起来像那里最友好的JavaScript工具。我做了我的个人网站使用Nuxt.js。它是一个静态站点生成器，现在称为用于开发Vue.js应用程序的直观框架。当我完成这个项目时，Gatsby的第一个版本问世，这是一个基于React构建静态站点的系统。我在下一个项目中使用了盖茨比，创建了Kentico Advantage网站，这是一个旨在为网络代理商提供支持的简单项目。这是我第一次使用React。然后我遇到的是，我真的不喜欢它。即使有必要进行一些琐事，也出现了很大的困难。



我的下一个发展是我自己的婚礼网站。然后，我又给了盖茨比和React一个机会，但最后，仅仅几天后，我切换到了Vue.js的Gridsome框架。当时，这个静态网站生成器正在迅速普及。我几乎在每个角落都遇到了他。多亏了这个SSG，我得以在大约三个小时内建立了一个简单的工作网站。我只是着迷。 Vue.js在我眼中增长了一些。



然后出现了Sourcebit项目。它是一个用于组合各种数据源和SSG的插件，它负责转换数据并使其更易于使用。话虽如此，Sourcebit支持的唯一基于JavaScript的静态站点生成器是Next.js。... 因此，在学习了基础知识之后，我在另一个项目中使用了Next.js。

根据您自己或他人的经验选择工具

上面，我提到了过去几年中使用最多的工具。但是，如果您将它们进行比较，那么在通常情况下，就不可能在其中毫不犹豫地选择可以放在首位的那些。



假设您是一名负责为下一个项目选择正确工具的开发人员。项目开始工作的时间可能取决于您选择的项目，因此您不太可能花很多时间对这些工具进行长时间的试验。



您可以根据自己和他人的经验来选择工具。如果您以前使用过Angular，则可能会决定先看看使用Angular的工具。如果您上一次使用Angular是很久以前的事，请与您的同事联系以了解他们的用途。没错，在这种情况下，我没有向任何人询问任何事情，而是立即选择了Vue.js。问题是我的所有同事以前都曾与React合作过。因此，最后，我不得不自己使用Google解决新出现的问题。



影响框架选择的另一个因素是项目的规模。如果您通过测试个人网站来创建个人网站，那么工作中出现的问题将很简单。它们的答案通常在所选工具的文档中找到。但是，假设您正在开发公司项目。他们使用部分构建，项目的某些部分在服务器上呈现，它使用许多数据源。如果在工作过程中遇到任何困难，那么在文档的帮助下将无法解决，您将不得不通过向同事提问或通过Stack Overflow之类来寻找答案。



我在上面提到了三个JavaScript工具。但是Jamstack并不总是JavaScript。也许PHP或Ruby离您更近。要找到适合您的静态站点生成器，请查看下表。





关于尚未尝试使用的平台，我无法说什么。但是我可以分享有关Vue.js，React和相关静态站点生成器的想法。

Vue.js：比较Gridsome和Nuxt.js

Vue.js框架因其出色的文档而闻名。 Gridsome遵循相同的路径。该SSG的文档写得很好。它具有Gridsome入门人员可以期待的一切。真正。当我阅读此文档时，在我看来它的作者正在读我的思想。 Gridsome使用GraphQL。因此，必须使用特殊插件将数据源连接到站点。 Gridsome自动将数据模型与具有相应名称的模板相关联，并组织路由。对于初学者来说，这是一大优势。 Gridsome允许使用外部JavaScript资源。我知道这听起来不像是“最佳实践”，但是例如，如果您从HTML5UP.net这样的网站下载模板，这样的模板将包含一些JS代码。当我在Nuxt.js中需要这样的东西时，我遇到了困难。结果，我不得不在Vue中重写相应的功能。



总结我使用Gridsome的经验，我可以说我的工作很容易。该框架帮助我实现了我所需要的，而我不必克服该平台摆在我面前的障碍。 Gridsome允许您在短短几个小时内访问一个简单的工作网站。



使用Nuxt时，最困难的事情是了解使用Vuex数据存储的细节并创建Vuex.store...这些存储库用于Nuxt.js项目。如果某个组件需要处理数据，则需要从所有数据都存储在一个地方这一事实出发。当然，您可以在组件级别存储数据，但是经常会发生不同组件使用相同数据的情况。因此，为了避免代码重复，您需要使用单个数据存储。要实现这样的存储，您不需要任何特殊的插件即可从某个地方收集必要的数据。尽管例如，尽管我使用了一个设计用于不带Kentico Kontent UI的CMS的插件。这无疑使我的生活更加轻松，但是我也可以将Fetch API与Delivery SDK一起使用。... 在一切对我有用之后，我意识到我喜欢这种模式。它是可靠和灵活的。对于大型项目，我会选择它。要使用它，您只需要在一开始就花一些时间来了解它。



Nuxt.js支持服务器端渲染和预览模式。在他周围形成了一个大社区。所有这些使我们可以说Nuxt.js比Gridsome更成熟，并且Nuxt.js更适合于严重的站点。



让我们通过在下表中列出它们的优点（用“ +”标记）和缺点（用“-”标记）来总结有关Gridsome和Nuxt.js的信息。

React: Gatsby Next.js

让我们从盖茨比开始。我相信，此框架最有趣的功能是一种称为GraphQL的用于GraphQL的工具所代表。 Gatsby使用GraphQL。 GraphiQL允许您处理站点上使用的数据。我不能足够强调这个工具的重要性和实用性。它使开发人员不必阅读正在使用的数据源的文档。 GraphiQL允许您交互式查看数据。从数据中，您可以选择所需的内容。这将导致自动生成的GraphQL查询被复制到组件中。 使用





GraphiQL



在Gatsby中使用GraphQL也意味着寻找插件适用的数据源。没错，此类插件可用于所有没有用户界面的主要CMS。 Gatsby的另一个优势是为此框架创建了大量的插件。从SEO到渐进式图像加载再到导出GraphQL模式，几乎所有插件都有。



但是，在使用Next.js时，缺少用于处理数据的标准工具。结果，开发人员不得不花时间试图弄清楚在每种特定情况下该使用什么。例如，当解决类似问题时，我受到此存储库的启发，并使用了“存储库”模式。如果您可以不使用GraphQL，那么Next.js将为您提供Gatsby可以做的一切以及更多工作。





Next.js中的路由



Next.js使用基于文件的路由模型。这使查找页面和模板变得非常容易，即使在您必须使用不熟悉的项目的情况下也是如此。该框架允许您组合静态页面和动态生成的页面。这两种页面创建机制甚至可以合并为一页。这极大地促进了材料预览功能的实现。 Gatsby和Next.js都知道如何创建增量构建。但是，对于Gatsby，您需要将站点托管在Gatsby Cloud上，并且只有在准备有特殊要求的插件时才能实现。



比较Next.js和Gatsby，可以注意到Next.js生成了较小的发行包。如果我们谈论寻找参考资料并从社区成员那里获得问题的答案，那么正如实践所示，Gatsby和Next.js在这方面看起来几乎相同。



让我们总结一下Gatsby和Next.js的优缺点。

选择平台时要考虑的其他注意事项

在决定使用哪种工具进行Web项目时，我们经常会这样想：“这里的文档很好，很多人在Twitter上谈论它，经常发布版本，有很多插件。” 通常以这种推理结束。如果您认为自己将长期使用该平台，并且认为该平台可以在多个项目中使用，甚至可以成为整个公司的正式工具，那么您还应该提出以下问题：

• , ?
• ?
• ?
• , , - ?
• ?
• - ?

在选择Web框架时，我倾向于尽可能使用Vue.js。在我看来，此框架在不干扰其标准设置的情况下，使您可以快速轻松地创建所需的内容。我通常在需要自定义元素和需要动态功能的传统网站组件的地方使用Vue.js。我正在Vue.js中建立小型网站。而且，由于我不在大型项目中使用Vue.js，因此我倾向于使用Gridsome。



对于更大，更严肃的项目，我使用React库。在Kentico，几乎所有前端开发都基于React。该公司计划将来朝这个方向发展。因此，对我来说这样做也是合乎逻辑的。如果我们谈论选择静态站点生成器，那么现在我将同时使用Next.js和Gatsby，但我更倾向于其中的第一个。对我而言，此框架的最大功能是基于文件的路由，它也支持动态路由。我还喜欢与Sourcebit的兼容性，如果需要，它可以更改数据源或SSG，而无需从头开始重写所有内容。



您使用什么静态站点生成器？