Server Side Rendering（服務端渲染）
SSR 目的是爲了解決單頁面應用的 SEO 的問題，對於一般網站影響不大，但是對於論壇類，內容類網站來說是致命的，搜索引擎無法抓取頁面相關內容，也就是用戶搜不到此網站的相關信息。
原理
將 html 在服務端渲染，合成完整的 html 文件再輸出到瀏覽器。
適用場景
- 客戶端的網絡比較慢
- 客戶端運行在老的或者直接沒有 JavaScript 引擎上
作用就是在 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
最後
爲了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成爲全棧工程師，乃至架構師的路上披荊斬棘。在這裏給大家推薦一個前端全棧學習交流圈：866109386.歡迎大家進羣交流討論，學習交流，共同進步。
當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有有效資源還是很有必要的。
最後祝福所有遇到瓶疾且不知道怎麼辦的前端程序員們，祝福大家在往後的工作與面試中一切順利。
