如何選擇正確的後端渲染框架：Next, Nuxt, Nest?

時間 2019-11-06

標籤如何選擇正確後端渲染框架 nuxt nest 简体版

原文原文鏈接

摘要： 後端渲染3大框架。javascript

原文：如何選擇正確的Node框架：Next, Nuxt, Nest?
做者：Random

簡介

在上一篇文章中，我探討了三種最流行的Node框架:Express、Koa和Hapi的區別、優勢和缺點。在這篇文章中，咱們將研究另外三種很是流行的框架之間的區別:Next、Nuxt和Nest。這三個框架都是服務器端渲染，它們分別與React、Vue和Angular(三個目前最流行的前端框架)密切相關前端

咱們的比較將基於一下幾點：vue

GitHub Stars和npm下載
安裝
基本的Hello World應用程序
好處
缺點
性能
社區活躍度

Next是一個React框架，容許使用React構建SSR和靜態web應用java

startnode
- GitHub Stars: +36,000
- npm weekly downloads: +300,000

安裝react

next react react-dom是必不可少的git

npm install --save next react react-dom
複製代碼

package.json 中添加腳本，以下所示：github

{
      "scripts": {
        "dev": "next",
        "build": "next build",
        "start": "next start"
      }
    }
複製代碼

next 將讀取page目錄下的js文件，並解析成頁面路由web

Hello Worldvue-router

項目內建立目錄文件 ./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是一件痛苦的事，可能須要雙倍工做
性能

性能基於一下兩點
- 一、使用Apache Bench測試吞吐量。
- 二、使用 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
安裝

爲了快速入門，Nuxt.js團隊建立了腳手架工具 create-nuxt-app
```
// 確保安裝了npx（npx在NPM版本5.2.0默認安裝了）
    npx create-nuxt-app <項目名>
複製代碼
```
它會讓你進行一些選擇:在集成的服務器端框架如:Express、Koa、Hapi、Feathers、Micro、Adonis (WIP)；選擇您喜歡的UI框架:Bootstrap、Vuetify、Bulma、Buefy等等

Hello World

Nuxt依據 pages 目錄結構自動生成 vue-router 模塊的路由配置

// ./pages/index.vue
    <template>
      <div>
        <h1>Hello world!</h1>
        <NLink to="/about">
          About Page
        </NLink>
      </div>
    </template>
複製代碼

好處
- 它的主要範圍是UI渲染，同時抽象出客戶端/服務器分佈
- 靜態渲染、先後分離
- 自動代碼分層
- 服務、模板皆可配置
- 項目結構清晰
- 組件與頁面無縫切換
- 默認支持得ES6 / ES7
- 支持開發熱更新
- 路由級別的異步數據獲取
- 支持靜態文件服務
- 樣式預處：Sass，Less，Stylus等
缺點
- 周邊資源較少
- 開發複雜的組件可能會很麻煩
- 自定義配置顯得很麻煩
- 不少具備反作用的數據操做this.items[key]=value
- 高流量可能會給服務器帶來壓力
- 只能在某些掛鉤中查詢和操做DOM
性能

Nuxt中的基本HelloWorld應用。每秒能處理190.05個請求。平均一個請求時間爲52.619毫秒。在此度量標準上，Nuxt與其餘兩個框架相比表現最差

Lighthouse測試報告中Preformance、Accessibility、SEO三項中得分最高

社區活躍
- 貢獻者數量：191
- Pull Requests：1,385

Nest

Nest是一個漸進式Node框架,深受Angular的啓發。用於構建高效，可擴展的Node.服務器端應用程序的框架。使用TypeScript構建,保留與純JS的兼容性，集OOP（面向對象編程）,FP（函數式編程）,FRP（響應式編程）一身。服務引擎蓋默認使用Express但也提供與各類其餘庫的兼容性，例如Fastify，容許輕鬆使用可用的無數第三方插件

安裝

nest提供cli使用該cli命令安裝Nest並建立新項目

npm i @nestjs/cli
    nest new project-name
複製代碼

或者，使用Git安裝TypeScript啓動項目：

git clone https://github.com/nestjs/typescript-starter.git project
    cd project
    npm install
    npm run start
複製代碼

Hello World

使用該npm cli命令建立新項目後,src目錄下會出現幾個核心文件，main.ts是咱們的入口

// 建立一個服務而後監聽3000端口
    import { NestFactory } from '@nestjs/core';
    import { ApplicationModule } from './app.module';
    
    async function bootstrap() {
      const app = await NestFactory.create(ApplicationModule);
      await app.listen(3000);
    }
    bootstrap();
    
    // 啓動起來 
    npm start

複製代碼

好處
- 做爲基於TypeScript的Web框架，能夠進行嚴格的類型定義
- 自動生成Swagger文檔
- Nest中的文件夾結構主要基於Angular
- 基於模塊的框架，代碼可複用
- 項目結構清晰,只須要關注業務無需關注架構
- 使用最新版本的TypeScript，意味着JS的型特性基本均可用
- 爲開發人員提供更少的上下文切換。從Angular代碼到Nest的過渡相對容易
- 與Angular相似，Nest也有一個不錯的命令行工具
缺點
- 缺少文檔。該框架與其餘框架有很好的集成，但文檔不多
- 背後沒有大型企業的支持力
- 整體而言，與其餘框架相比，Nest的社區規模較小
性能

Nest中的基本HelloWorld應用。每秒能處理928.18個請求。每一個請求的平均時間爲10.774毫秒。在此指標上，Nest在咱們比較的三個框架中表現最佳

Lighthouse提供的報告中，Nest具備很是高的性能,可是accessibility, best practices,SEO得分較低

Nest不是最流行的框架但值得一試！
社區參與
- 貢獻者數量：81
- Pull Requests：469