VUE基于NUXT的SSR 服務(wù)端渲染

Server Side Rendering（服務(wù)端渲染）

SSR 目的是為了解決單頁(yè)面應(yīng)用的 SEO 的問(wèn)題，對(duì)于一般網(wǎng)站影響不大，但是對(duì)于論壇類(lèi)，內(nèi)容類(lèi)網(wǎng)站來(lái)說(shuō)是致命的，搜索引擎無(wú)法抓取頁(yè)面相關(guān)內(nèi)容，也就是用戶(hù)搜不到此網(wǎng)站的相關(guān)信息。

原理

將 html 在服務(wù)端渲染，合成完整的 html 文件再輸出到瀏覽器。

適用場(chǎng)景

• 客戶(hù)端的網(wǎng)絡(luò)比較慢
• 客戶(hù)端運(yùn)行在老的或者直接沒(méi)有 JavaScript 引擎上

NUXT

作用就是在 node.js 上進(jìn)一步封裝，然后省去我們搭建服務(wù)端環(huán)境的步驟，只需要遵循這個(gè)庫(kù)的一些規(guī)則就能輕松實(shí)現(xiàn) SSR。

可以作為一個(gè) Node.js 應(yīng)用跑在服務(wù)器上，也可以把整站直接編譯為靜態(tài) HTML。另外這個(gè)框架支持自動(dòng)生成路由，用來(lái)寫(xiě)展示型的頁(yè)面是非常不錯(cuò)的選擇。

NUXT 能為我們做什么

• 無(wú)需再為了路由劃分而煩惱，你只需要按照對(duì)應(yīng)的文件夾層級(jí)創(chuàng)建 .vue 文件就行
• 無(wú)需考慮數(shù)據(jù)傳輸問(wèn)題，nuxt 會(huì)在模板輸出之前異步請(qǐng)求數(shù)據(jù)（需要引入 axios 庫(kù)），而且對(duì) vuex 有進(jìn)一步的封裝
• 內(nèi)置了 webpack，省去了配置 webpack 的步驟，nuxt 會(huì)根據(jù)配置打包對(duì)應(yīng)的文件

安裝流程

$ npm install -g vue-cli

$ vue init nuxt/starter <project-name>
$ cd <project-name>
$ npm install

$ npm run dev

Nuxt.js 會(huì)監(jiān)聽(tīng) pages 目錄下的改變，添加新 page 的時(shí)候不需要重啟服務(wù)

Next.js

來(lái)自Zeit的團(tuán)隊(duì)在React的基礎(chǔ)和組件模型上構(gòu)建了Next.js，同時(shí)還提供了一個(gè)關(guān)鍵擴(kuò)展：通過(guò)使用名為getInitialProps()的組件生命周期鉤子方法，框架能夠在服務(wù)器上進(jìn)行初始渲染，如果需要的話(huà)，還可以在客戶(hù)端繼續(xù)進(jìn)行渲染。不過(guò)這個(gè)高級(jí)特性是一個(gè)很小卻功能強(qiáng)大的框架所額外提供的。

Next提供了非常豐富的生態(tài)環(huán)境，特別是它的example，包含了多種情況下的源碼，讓學(xué)習(xí)者很容易搭建起一個(gè)多功能的Next框架，客戶(hù)端有的東西，服務(wù)端基本都有。

• webpack的各項(xiàng)配置，Next集成了webpack的很多配置，熱更新是必備品，還支持提供next.config.js的方式導(dǎo)入自己定義的配置。
• 你可以使用less、scss、style-in-Component、css等各種樣式寫(xiě)法。
• 支持redux、redux-saga、或者不用。
• 各種圖片的支持都包含在webpack中了。
• 支持自定義的babelrc配置。
• 對(duì)于react的版本的支持也在維護(hù)者的維護(hù)中不斷更新。
• 支持preact。

簡(jiǎn)單易用，就跟寫(xiě) PHP 一樣一個(gè)文件一個(gè)頁(yè)面了，但缺點(diǎn)也很明顯，其實(shí)它是通過(guò)改變正常 React + webpack 的代碼書(shū)寫(xiě)習(xí)慣來(lái)繞過(guò)前后端同構(gòu)的坑，所以也引入了一些新的問(wèn)題：

• 圖片等靜態(tài)文件只能放在 static 目錄下，不能通過(guò) require 來(lái)引入，也就是沒(méi)辦法通過(guò) webpack 來(lái)進(jìn)行模塊化管理，如果各個(gè)組件有自身依賴(lài)的圖片，也只能一股腦放 static 里，也很難實(shí)現(xiàn)版本管理控制瀏覽器緩存。
• 樣式同樣也沒(méi)辦法通過(guò) webpack 進(jìn)行模塊化管理，只能通過(guò) style 標(biāo)簽嵌入或直接內(nèi)聯(lián)。

簡(jiǎn)單地說(shuō)，很適合快速搭建簡(jiǎn)單站點(diǎn)，但自由度不高，且?guī)邮交驁D片的 React 組件無(wú)法直接使用，個(gè)人看法是一個(gè)用自由度和通用性來(lái)?yè)Q取易用性的框架。

其他方法

Google 可以正常爬取和渲染一個(gè)純 js 動(dòng)態(tài)生成的網(wǎng)站，上傳 sitemap 就可以了。

直接生成靜態(tài)頁(yè)面由 CDN 分發(fā)。有些新技術(shù)還可以在 static gen 同時(shí)支持 pwa，比如 gatsbyjs。

掘金是未登錄用戶(hù)使用 SSR，不錯(cuò)的思路。

要分清楚什么時(shí)候用 mvvm，mvvm 其實(shí)就是 modelview 非常方便定義頁(yè)面的各種邏輯和改變頁(yè)面數(shù)據(jù)，如果是傳統(tǒng)的網(wǎng)站，前端沒(méi)啥邏輯，就沒(méi)有必要上 mvvm

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。