讀本文前，請先熟讀nuxt官方文檔，并且具備一定的vue.js相關(guān)開發(fā)經(jīng)驗(yàn)

創(chuàng)新互聯(lián)成立于2013年，我們提供高端成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站定制、營銷型網(wǎng)站建設(shè)、微信小程序、微信公眾號開發(fā)、營銷推廣服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計(jì)、程序開發(fā)來完成項(xiàng)目落地，為發(fā)電機(jī)維修企業(yè)提供源源不斷的流量和訂單咨詢。

中文文檔
英文文檔
vue SSR指南

一、CSR和SSR對比

在SPA之前的時代，我們傳統(tǒng)的Web架構(gòu)大都是SSR，如：Wordpress（PHP）、JSP技術(shù)、JavaWeb等這些程序都是傳統(tǒng)典型的SSR架構(gòu)，即：服務(wù)端取出數(shù)據(jù)和模板組合生成 html輸出給前端，前端發(fā)生請求時，重新向服務(wù)端請求html資源。

SPA（CSR）:

SPA應(yīng)用，到了Vue、React，單頁面應(yīng)用優(yōu)秀的用戶體驗(yàn)，逐漸成為了主流，頁面整體是javaScript渲染出來的，稱之為客戶端渲染CSR。SPA渲染過程。由客戶端訪問URL發(fā)送請求到服務(wù)端，返回HTML結(jié)構(gòu)（但是SPA的返回的HTML結(jié)構(gòu)是非常的小的，只有一個基本的結(jié)構(gòu)）?？蛻舳私邮盏椒祷亟Y(jié)果之后，在客戶端開始渲染HTML，渲染時執(zhí)行對應(yīng)javaScript，最后渲染template，渲染完成之后，再次向服務(wù)端發(fā)送數(shù)據(jù)請求，注意這里時數(shù)據(jù)請求，服務(wù)端返回json格式數(shù)據(jù)?？蛻舳私邮諗?shù)據(jù)，然后完成最終渲染。

CSR原理圖

CSR多數(shù)是基于webpack構(gòu)建的項(xiàng)目，編譯出來的html文件，資源文件都被打包到j(luò)s中，這樣的頁面是不利于搜索引擎優(yōu)化(SEO, Search Engine Optimization)，并且內(nèi)容到達(dá)時間(time-to-content) （或稱之為首屏渲染時長）也有很大的優(yōu)化空間

簡單來講，SPA雖然給服務(wù)器減輕了壓力，也存在比較明顯的兩個缺點(diǎn)：

• 首屏渲染時間比較長：必須等待JavaScript加載完畢，并且執(zhí)行完畢，才能渲染出首屏。
• SEO不友好：爬蟲只能拿到一個div元素，認(rèn)為頁面是空的，不利于SEO。

什么是SEO呢？SEO即通過各種技術(shù)（手段）來確保，你的Web內(nèi)容被搜素引擎大化收錄，大化提高權(quán)重，帶來更多流量。大部分的搜索引擎僅能抓取URI直接輸出的數(shù)據(jù)資源，對于 Ajax 類的異步請求的數(shù)據(jù)無法抓取

因此，對于那些展示宣傳型頁面，如官網(wǎng)，必須進(jìn)行服務(wù)端渲染

SSR:

為了解決如上兩個問題，出現(xiàn)了SSR解決方案，后端渲染出首屏的DOM結(jié)構(gòu)返回，前端拿到內(nèi)容帶上首屏，后續(xù)的頁面操作，再用單頁面路由和渲染，稱之為服務(wù)端渲染(SSR)。

SSR渲染流程是這樣的，客戶端發(fā)送URL請求到服務(wù)端，在服務(wù)端做出html和數(shù)據(jù)的渲染，渲染完成之后返回html結(jié)構(gòu)，客戶端拿到頁面的html結(jié)構(gòu)渲染首屏。所以用戶在瀏覽首屏的時候速度會很快，因?yàn)榭蛻舳瞬恍枰俅伟l(fā)送ajax請求。并不是做了SSR我們的頁面就不屬于SPA應(yīng)用了，它仍然是一個獨(dú)立的spa應(yīng)用。

SSR原理圖

SSR是處于CSR與SPA應(yīng)用之間的一個折中的方案，在渲染首屏的時候在服務(wù)端做出了渲染，注意僅僅是首屏，其他頁面還是需要在客戶端渲染的，在服務(wù)端接收到請求之后并且渲染出首屏頁面，會攜帶著剩余的路由信息預(yù)留給客戶端去渲染其他路由的頁面。

vueSSR

將本來要放在瀏覽器執(zhí)行創(chuàng)建的組件，放到服務(wù)端先創(chuàng)建好，然后生成對應(yīng)的html將它們直接發(fā)送到瀏覽器，最后將這些靜態(tài)標(biāo)記"激活"為客戶端上完全可交互的應(yīng)用程序。

在瀏覽器第一次訪問某個URI資源的時候（首屏），Web服務(wù)器根據(jù)路由拿到對應(yīng)數(shù)據(jù)渲染并輸出，且輸出的數(shù)據(jù)中包含兩部分：

• 路由頁對應(yīng)的頁面及已渲染好的數(shù)據(jù)
• 完整的SPA程序代碼

在首屏渲染完成之后，此時我們看到的其實(shí)已經(jīng)是一個和之前的SPA相差無幾的應(yīng)用程序了，接下來我們進(jìn)行的任何操作都只是客戶端的應(yīng)用進(jìn)行交互，頁面/組件由Web端渲染，路由也由瀏覽器控制，用戶只需要和當(dāng)前瀏覽器內(nèi)的應(yīng)用打交道就可以了。

vueSSR原理圖

webpack將 Source 打包出兩個bundle文件：其中 Server Bundle用于服務(wù)端渲染，服務(wù)端通過渲染器 bundleRenderer 將 bundle 生成首屏html片段；而 Client Bundle 用于客戶端渲染，首屏外的交互和數(shù)據(jù)處理還是需要瀏覽器執(zhí)行 Client Bundle 來完成

缺點(diǎn)：

• 開發(fā)條件所限。瀏覽器特定的代碼，只能在某些生命周期鉤子函數(shù)(lifecycle hook)中使用；一些外部擴(kuò)展庫(external library)可能需要特殊處理，才能在服務(wù)器渲染應(yīng)用程序中運(yùn)行。
• 更多的服務(wù)器端負(fù)載。在 Node.js 中渲染完整的應(yīng)用程序，顯然會比僅僅提供靜態(tài)文件的 server 更加大量占用 CPU 資源，因此如果你預(yù)料在高流量環(huán)境(high traffic)下使用，請準(zhǔn)備相應(yīng)的服務(wù)器負(fù)載，并明智地采用緩存策略。

二、nuxt.js介紹

1. nuxt.js是什么？

Nuxt.js 是vue官方推薦的一個基于 Vue.js的做Vue SSR的通用應(yīng)用框架（開箱即用），集成了Vue，Vue-Router，Vuex，Vue-Meta等組件/框架，內(nèi)置了webpack用于自動化構(gòu)建，使我們可以更快速地搭建一個具有服務(wù)端渲染能力的應(yīng)用。

2. nuxt.js的優(yōu)勢？

作為框架，Nuxt.js 為 客戶端/服務(wù)端 這種典型的應(yīng)用架構(gòu)模式提供了許多有用的特性，例如異步數(shù)據(jù)加載、中間件支持、布局支持等。Nuxt.js 有以下比較明顯的特性

• 支持各種樣式預(yù)編譯器SASS，LESS等等
• 本地開發(fā)支持熱加載
• HTML頭部標(biāo)簽管理（依賴vue-meta實(shí)現(xiàn)）
• 自動代碼分層
• 強(qiáng)大的路由功能，支持異步數(shù)據(jù)（路由無需額外配置）
• 內(nèi)置 webpack 配置，無需額外配置

3. nuxt.js的使用

npm create nuxt-app <project-name>

網(wǎng)站標(biāo)題：詳解Nuxt.js實(shí)戰(zhàn)集錦-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://chinadenli.net/article20/dgjjco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、App設(shè)計(jì)、虛擬主機(jī)、云服務(wù)器、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)