Server Side Rendering（服務端渲染）

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

原理

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

適用場景

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

NUXT 

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

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

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。

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()的元件生命週期鉤子方法，框架能夠在伺服器上進行初始渲染，如果需要的話，還可以在客戶端繼續進行渲染。不過這個高階特性是一個很小卻功能強大的框架所額外提供的。

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。

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