如何选择正确的Node框架：Next, Nuxt, Nest?

简介

在上一篇文章中，我探讨了三种最流行的Node框架:Express、Koa和Hapi的区别、优点和缺点。在这篇文章中，我们将研究另外三种非常流行的框架之间的区别:Next、Nuxt和Nest。这三个框架都是服务器端渲染，它们分别与React、Vue和Angular(三个目前最流行的前端框架)密切相关

•     我们的比较将基于一下几点：
  •   GitHub Stars和npm下载
  •   安装
  •   基本的Hello World应用程序
  •   好处
  •   缺点
  •   性能
  •   社区活跃度

Next

Next是一个React框架，允许使用React构建SSR和静态web应用

•  start
  •   GitHub Stars: +36,000
  •   npm weekly downloads: +300,000
•     安装

next react react-dom是必不可少的

npm install --save next react react-dom 

package.json 中添加脚本，如下所示：     

{  
         "scripts": {  
           "dev": "next",  
           "build": "next build",  
           "start": "next start"  
         }  
       } 

next 将读取page目录下的js文件，并解析成页面路由

•  Hello World

项目内创建目录文件 ./pages/index.js     

function Home() {  
          return <div>Hello world!</div>;  
        }   
         export default Home;     
         // npm run dev  
        // 然后访问 http://localhost:3000 

•  好处
  •   默认情况下，每个组件都是服务器渲染的
  •   自动代码拆分，加快页面加载速度
  •   不加载不必要的代码
  •   简单的客户端路由（基于页面）
  •   基于Webpack的开发环境，支持模块热更新（HMR）
  •   获取数据非常简单
  •   支持任何Node HTTP服务器实现，如Express
  •   支持Babel和Webpack自定义
  •   能够部署在任何能运行node的平台
  •   内置页面搜索引擎优化（SEO）处理
•  缺点
  •   Next不是后端服务，应该与后台操作独立开
  •   如果你只想创建一个简单的WEB应用，那么它可能会是牛刀杀鸡
  •   数据会在客户端和服务器重复加载
  •   没有实现前后分离的项目，迁移到Next是一件痛苦的事，可能需要双倍工作
•     性能

性能基于一下两点

      1、使用Apache Bench测试吞吐量。

      2、使用 lighthouse测试 Preformance、Accessibility、Best Practices、SEO

这是Next基本HelloWorld程序。每秒能处理550.87个请求。每个请求花费的平均时间为18.153ms

lighthouse测试报告中可以看到Preformance、Accessibility、Best Practices、SEO都高于70，虽然比其他两个框架低，但不得不说已经是一个比较好的数据，Best Practices 得分nuxt则是高于其他俩个

•  社区活跃度
  •   贡献者数量：678
  •   Pull Requests: 3,029
  •   社区相当活跃

Nuxt

Nuxt是一个基于Vue的通用应用框架，预设了利用Vue开发服务端渲染的应用所需要的各种配置，主要关注的是应用的UI渲染

•  star
  •   GitHub stars：+19,000
  •   npm weekly downloads: +100,000
•     安装

（编辑：我爱故事小小网_铜陵站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!