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 文件再輸出到瀏覽器。

適用場景

• 客戶端的網(wǎng)絡(luò)比較慢
• 客戶端運行在老的或者直接沒有 JavaScript 引擎上

NUXT

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

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

NUXT 能為我們做什么

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

安裝流程

$ 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，包含了多種情況下的源碼，讓學習者很容易搭建起一個多功能的Next框架，客戶端有的東西，服務(wù)端基本都有。

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

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

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

簡單地說，很適合快速搭建簡單站點，但自由度不高，且?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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論