VUE基于NUXT的SSR 服務端渲染

Server Side Rendering（服務端渲染）

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

原理

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

適用場景

• 客戶端的網絡比較慢
• 客戶端運行在老的或者直接沒有 JavaScript 引擎上

NUXT

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

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

NUXT 能為我們做什么

• 無需再為了路由劃分而煩惱，你只需要按照對應的文件夾層級創建 .vue 文件就行
• 無需考慮數據傳輸問題，nuxt 會在模板輸出之前異步請求數據（需要引入 axios 庫），而且對 vuex 有進一步的封裝
• 內置了 webpack，省去了配置 webpack 的步驟，nuxt 會根據配置打包對應的文件

安裝流程

$ npm install -g vue-cli

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

$ npm run dev

Nuxt.js 會監聽 pages 目錄下的改變，添加新 page 的時候不需要重啟服務

Next.js

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

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

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

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

• 圖片等靜態文件只能放在 static 目錄下，不能通過 require 來引入，也就是沒辦法通過 webpack 來進行模塊化管理，如果各個組件有自身依賴的圖片，也只能一股腦放 static 里，也很難實現版本管理控制瀏覽器緩存。
• 樣式同樣也沒辦法通過 webpack 進行模塊化管理，只能通過 style 標簽嵌入或直接內聯。

簡單地說，很適合快速搭建簡單站點，但自由度不高，且帶樣式或圖片的 React 組件無法直接使用，個人看法是一個用自由度和通用性來換取易用性的框架。

其他方法

Google 可以正常爬取和渲染一個純 js 動態生成的網站，上傳 sitemap 就可以了。

直接生成靜態頁面由 CDN 分發。有些新技術還可以在 static gen 同時支持 pwa，比如 gatsbyjs。

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。