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

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

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

原理

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

適用場景

NUXT

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

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

NUXT 能為我們做什么

安裝流程

$ npm install -g vue-cli

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

$ npm run dev

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

Next.js

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

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

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

簡單地說，很適合快速搭建簡單站點，但自由度不高，且?guī)邮交驁D片的 React 組件無法直接使用，個人看法是一個用自由度和通用性來換取易用性的框架。

其他方法

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

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

掘金是未登錄用戶使用 SSR，不錯的思路。

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com