VUE基于NUXT的SSR 服務端渲染

Server Side Rendering（服務端渲染）

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

原理

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

適用場景

NUXT

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

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

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框架，客戶端有的東西，服務端基本都有。

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

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

其他方法

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

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

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

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

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