這三個(gè)框架都是服務(wù)器端渲染，它們分別與React、Vue和Angular(三個(gè)目前最流行的前端框架)密切相關(guān)

我們的比較將基于一下幾點(diǎn)：

? GitHub Stars和npm下載

? 安裝

? 基本的Hello World應(yīng)用程序

? 好處

? 缺點(diǎn)

? 性能

? 社區(qū)活躍度

Next

Next是一個(gè)React框架，允許使用React構(gòu)建SSR和靜態(tài)web應(yīng)用

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文件，并解析成頁(yè)面路由

?Hello World

項(xiàng)目?jī)?nèi)創(chuàng)建目錄文件 ./pages/index.js? ? ?

function?Home()?{??

return<div>Hello?world!</div>;??

????????}???

?????????export?default?Home;?????

?????????//?npm?run?dev??

????????//?然后訪(fǎng)問(wèn)?http://localhost:3000?

好處

? 默認(rèn)情況下，每個(gè)組件都是服務(wù)器渲染的

? 自動(dòng)代碼拆分，加快頁(yè)面加載速度

? 不加載不必要的代碼

? 簡(jiǎn)單的客戶(hù)端路由（基于頁(yè)面）

? 基于Webpack的開(kāi)發(fā)環(huán)境，支持模塊熱更新（HMR）

? 獲取數(shù)據(jù)非常簡(jiǎn)單

? 支持任何Node HTTP服務(wù)器實(shí)現(xiàn)，如Express

? 支持Babel和Webpack自定義

? 能夠部署在任何能運(yùn)行node的平臺(tái)

? 內(nèi)置頁(yè)面搜索引擎優(yōu)化（SEO）處理

缺點(diǎn)

? Next不是后端服務(wù)，應(yīng)該與后臺(tái)操作獨(dú)立開(kāi)

? 如果你只想創(chuàng)建一個(gè)簡(jiǎn)單的WEB應(yīng)用，那么它可能會(huì)是牛刀殺雞

? 數(shù)據(jù)會(huì)在客戶(hù)端和服務(wù)器重復(fù)加載

? 沒(méi)有實(shí)現(xiàn)前后分離的項(xiàng)目，遷移到Next是一件痛苦的事，可能需要雙倍工作

? ? 性能

性能基于一下兩點(diǎn)

? ? ? 1、使用Apache Bench測(cè)試吞吐量。

? ? ? 2、使用 lighthouse測(cè)試 Preformance、Accessibility、Best Practices、SEO

這是Next基本HelloWorld程序。每秒能處理550.87個(gè)請(qǐng)求。每個(gè)請(qǐng)求花費(fèi)的平均時(shí)間為18.153ms

ighthouse測(cè)試報(bào)告中可以看到Preformance、Accessibility、Best Practices、SEO都高于70，雖然比其他兩個(gè)框架低，但不得不說(shuō)已經(jīng)是一個(gè)比較好的數(shù)據(jù)，Best Practices 得分nuxt則是高于其他倆個(gè)

社區(qū)活躍度

? 貢獻(xiàn)者數(shù)量：678

? Pull Requests: 3,029

? 社區(qū)相當(dāng)活躍

Nuxt

Nuxt是一個(gè)基于Vue的通用應(yīng)用框架，預(yù)設(shè)了利用Vue開(kāi)發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置，主要關(guān)注的是應(yīng)用的UI渲染

star

? GitHub stars：+19,000

? npm weekly downloads: +100,000

? ? 安裝

為了快速入門(mén)，Nuxt.js團(tuán)隊(duì)創(chuàng)建了腳手架工具 create-nuxt-app? ? ?

//?確保安裝了npx（npx在NPM版本5.2.0默認(rèn)安裝了）??

npx?create-nuxt-app<項(xiàng)目名>?

它會(huì)讓你進(jìn)行一些選擇:在集成的服務(wù)器端框架如:Express、Koa、Hapi、Feathers、Micro、Adonis (WIP)；選擇您喜歡的UI框架:Bootstrap、Vuetify、Bulma、Buefy等等

?Hello World

Nuxt依據(jù) pages 目錄結(jié)構(gòu)自動(dòng)生成 vue-router 模塊的路由配置? ? ?

//?./pages/index.vue??

<template>??

<div>??

<h1>Hello?world!</h1>??

<NLink?to="/about">??

??????????????About?Page??

</NLink>??

</div>??

</template>?

好處

? 它的主要范圍是UI渲染，同時(shí)抽象出客戶(hù)端/服務(wù)器分布

? 靜態(tài)渲染、前后分離

? 自動(dòng)代碼分層

? 服務(wù)、模板皆可配置

? 項(xiàng)目結(jié)構(gòu)清晰

? 組件與頁(yè)面無(wú)縫切換

? 默認(rèn)支持得ES6 / ES7

? 支持開(kāi)發(fā)熱更新

? 路由級(jí)別的異步數(shù)據(jù)獲取

? 支持靜態(tài)文件服務(wù)

? 樣式預(yù)處：Sass，Less，Stylus等

缺點(diǎn)

? 周邊資源較少

? 開(kāi)發(fā)復(fù)雜的組件可能會(huì)很麻煩

? 自定義配置顯得很麻煩

? 很多具有副作用的數(shù)據(jù)操作this.items[key]=value

? 高流量可能會(huì)給服務(wù)器帶來(lái)壓力

? 只能在某些掛鉤中查詢(xún)和操作DOM

? ? 性能

Nuxt中的基本HelloWorld應(yīng)用。每秒能處理190.05個(gè)請(qǐng)求。平均一個(gè)請(qǐng)求時(shí)間為52.619毫秒。在此度量標(biāo)準(zhǔn)上，Nuxt與其他兩個(gè)框架相比表現(xiàn)最差

?Lighthouse測(cè)試報(bào)告中Preformance、Accessibility、SEO三項(xiàng)中得分最高

社區(qū)活躍

? 貢獻(xiàn)者數(shù)量：191

? Pull Requests：1,385

Nest

Nest是一個(gè)漸進(jìn)式Node框架,深受Angular的啟發(fā)。用于構(gòu)建高效，可擴(kuò)展的Node.服務(wù)器端應(yīng)用程序的框架。使用TypeScript構(gòu)建,保留與純JS的兼容性，集OOP（面向?qū)ο缶幊蹋?FP（函數(shù)式編程）,FRP（響應(yīng)式編程）一身。服務(wù)引擎蓋默認(rèn)使用Express但也提供與各種其他庫(kù)的兼容性，例如Fastify，允許輕松使用可用的無(wú)數(shù)第三方插件

? ? 安裝

nest提供cli使用該cli命令安裝Nest并創(chuàng)建新項(xiàng)目? ? ?

npm?i?@nestjs/cli??

???????nest?new?project-name?

或者，使用Git安裝TypeScript啟動(dòng)項(xiàng)目：? ?

git?clone?https://github.com/nestjs/typescript-starter.git?project??

??????cd?project??

??????npm?install??

??????npm?run?start?

? ? Hello World

使用該npm cli命令創(chuàng)建新項(xiàng)目后,src目錄下會(huì)出現(xiàn)幾個(gè)核心文件，main.ts是我們的入口? ? ?//?創(chuàng)建一個(gè)服務(wù)然后監(jiān)聽(tīng)3000端口??

???????import?{?NestFactory?}?from?'@nestjs/core';??

???????import?{?ApplicationModule?}?from?'./app.module';??????

????????async?function?bootstrap()?{??

constapp?=?await?NestFactory.create(ApplicationModule);??

?????????await?app.listen(3000);??

???????}??

???????bootstrap();???????

????????//?啟動(dòng)起來(lái)???

???????npm?start?

好處

? 作為基于TypeScript的Web框架，可以進(jìn)行嚴(yán)格的類(lèi)型定義

? 自動(dòng)生成Swagger文檔

? Nest中的文件夾結(jié)構(gòu)主要基于A(yíng)ngular

? 基于模塊的框架，代碼可復(fù)用

? 項(xiàng)目結(jié)構(gòu)清晰,只需要關(guān)注業(yè)務(wù)無(wú)需關(guān)注架構(gòu)

? 使用最新版本的TypeScript，意味著JS的型特性基本都可用

? 為開(kāi)發(fā)人員提供更少的上下文切換。從Angular代碼到Nest的過(guò)渡相對(duì)容易

? 與Angular類(lèi)似，Nest也有一個(gè)不錯(cuò)的命令行工具

缺點(diǎn)

? 缺乏文檔。該框架與其他框架有很好的集成，但文檔很少

? 背后沒(méi)有大型企業(yè)的支持力

? 總體而言，與其他框架相比，Nest的社區(qū)規(guī)模較小

? ? 性能

Nest中的基本HelloWorld應(yīng)用。每秒能處理928.18個(gè)請(qǐng)求。每個(gè)請(qǐng)求的平均時(shí)間為10.774毫秒。在此指標(biāo)上，Nest在我們比較的三個(gè)框架中表現(xiàn)最佳

Lighthouse提供的報(bào)告中，Nest具有非常高的性能,但是accessibility, best practices,SEO得分較低

Nest不是最流行的框架但值得一試！

社區(qū)參與

? 貢獻(xiàn)者數(shù)量：81

? Pull Requests：469

Next, Nuxt, Nest比較就到這里 Preformance、Accessibility、Best Practices、SEO選擇你最想要的那個(gè)吧

歡迎工作一到五年的Java工程師朋友們加入Java架構(gòu)開(kāi)發(fā)：855801563 獲取更多免費(fèi)視頻教程。