如何选择合适的Node框架：Next、Nuxt、Nest？

介绍在上一篇文章中，我探讨了三种流行的Node框架：Express、Koa和Hapi的区别和优缺点。在这篇文章中，我们将研究其他三个非常流行的框架之间的区别：Next、Nuxt和Nest。三个框架都是服务端渲染，与React、Vue、Angular（目前流行的三个前端框架）关系密切，我们的比较会基于以下几点：GitHubStars和npm下载安装基础你好WorldapplicationBenefitsDamadvantagesPerformanceCommunityactivityNextNext是一个React框架，允许使用React启动静态Web应用程序GitHubStars：+36,000npm每周下载量：+300,000安装下一个reactreact-dom必不可少npminstall--savenextreact-dompackage.json添加脚本中，如下：{"scripts":{"dev":"next","build":"nextbuild","start":"nextstart"}}next会读取页面目录下的js文件，并解析进入一个页面路由HelloWorld项目创建一个目录文件./pages/index.jsfunctionHome(){return

;}exportdefaultHome;//npmrundev//然后访问http://localhost:3000好处默认情况下，每个组件都是服务端渲染的自动代码拆分,加速页面加载不加载不必要的代码简单的客户端路由（基于页面）基于Webpack的开发环境，支持模块热更新（HMR）获取数据非常简单支持任何NodeHTTP服务器实现，例如Express支持Babel和Webpack定制可以部署在任何可以运行node的平台内置页面搜索引擎优化（SEO）处理ConsNext不是后端服务，应该独立于后台运行如果你只是想创建一个简单的WEB应用，那么它可能大材小用数据会在客户端和服务器上重复加载。对于没有实现前后端分离的项目，迁移到Next是一件痛苦的事情，而且可能需要双倍的工作绩效。性能基于以下两点：1.使用ApacheBench测试吞吐量2.使用lighthouse测试Preformance,Accessibility,BestPractices,SEO这是Next基本的HelloWorld程序。它每秒可以处理550.87个请求。每个请求花费的平均时间为18.153毫秒。在lighthouse测试报告中可以看到Preformance、Accessibility、BestPractices、SEO都高于70，虽然低于其他两个框架，但不得不说已经是一个比较不错的数据了，BestPracticesscorenuxt高于其他两个社区活动贡献者：678PullRequests：3,029社区相当活跃主要关注应用程序的UI渲染星级GitHub星级：+19,000npm每周下载量：+100,000安装快速入门,Nuxt.js团队创建了脚手架工具create-nuxt-app//确保安装了npx(npx在NPM5.2.0版本中是默认安装的)npxcreate-nuxt-app它会让你制作一些选择：在集成的服务器端框架如：Express,Koa,Hapi,Feathers,Micro,Adonis(WIP)；选择你喜欢的UI框架：Bootstrap、Vuetify、Bulma、Buefy等。HelloWorldNuxt根据pages目录结构自动生成vue-router模块的路由配置//./pages/index.vue好处主要范围为UI渲染，同时抽象出客户端/服务端分发静态渲染，前后端分离和自动代码分发图层服务和模板都是可配置的。项目结构清晰。组件和页面可以无缝切换。默认支持ES6/ES7支持热更新开发路由级异步数据获取支持静态文件服务风格预处理：Sass、Less、Stylus等缺点外围资源少开发复杂组件可能比较麻烦自定义配置好像是很多麻烦带有副作用的数据操作this.items[key]=value高流量会给服务器带来压力只能在某些挂钩中查询和操作DOM性能Nuxt中的基本HelloWorld应用程序每秒处理190.05个请求。平均请求时间为52.619毫秒。在这个指标上，与其他两个框架相比，Nuxt表现最差活跃社区贡献者数量：191合并请求：1,385NestNest是一个深受Angular启发的渐进式Node框架。用于构建高效、可扩展的Node.js的框架。服务器端应用程序。它使用TypeScript构建，保留了与纯JS的兼容性，并集成了OOP（面向对象编程）、FP（函数式编程）和FRP（响应式编程）。服务罩默认使用Express，但也提供与各种其他库的兼容性，例如Fastify，允许轻松使用无数可用的第三方插件。安装nest提供了一个cli使用这个cli命令安装Nest并创建一个新的项目名称或者，使用Git安装TypeScript启动项目：gitclonehttps://github.com/nestjs/typescript-starter.gitprojectcdprojectnpminstallnpmrunstartHelloWorld使用这个之后npmcli命令新建一个项目，src目录下会出现几个核心文件，main.ts是我们的入口//创建一个服务，监听3000端口import{NestFactory}from'@nestjs/core';import{ApplicationModule}from'./app.module';asyncfunctionbootstrap(){constapp=awaitNestFactory.create(ApplicationModule);awaitapp.listen(3000);}bootstrap();//启动npmstart的好处作为一个基于TypeScript的web框架，严格可以自动生成类型定义。Nest中的文件夹结构主要基于Angular基于模块的框架。代码可以重用。项目结构清晰。你只需要关注业务，而不需要关注架构使用的TypeScript，这意味着JS的类型特性基本可用，为开发者提供更少的上下文切换。从Angular代码到Nest的转换相对容易与Angular类似，Nest也有一个不错的命令行工具缺点缺乏文档。该框架与其他框架有很好的集成，但文档很少没有大公司支持总的来说，与其他框架相比，Nest有一个小社区Nest中的基本HelloWorld应用程序。它每秒可以处理928.18个请求。每个请求的平均时间为10.774毫秒。在这个指标上，Nest在我们比较的三个框架中表现良好。在Lighthouse提供的报告中，Nest的性能非常高，但在可访问性、最佳实践和SEO方面得分较低。Nest不是一个流行的框架，但值得一试！社区参与贡献者数量：81拉取请求：469接下来，Nuxt，Nest在这里比较Preformance，Accessibility，BestPractices，SEO选择你最想要的