Nuxt的Vue.js服務端渲染實踐

服務端渲染

服務端渲染（Server Side Render）并不是一個新的概念，在單頁應用（SPA）還沒有流行起來的時候，頁面就是通過服務端渲染好，并傳遞給瀏覽器的。當用戶需要訪問新的頁面時，需要再次請求服務器，返回新的頁面。

為了優化體驗，開發者們開始選擇采用 JavaScript 在前端完成渲染過程，用前后端分離的手段，使后端更專注于數據，而前端注重于處理展示，通過設計良好的 API 以及 Ajax 技術完成前后端的交互，jQuery、React.js、Vue.js、Angular.js 等框架應運而生。

這些框架給開發者帶來了巨大的便利，但是對于一些論壇、資訊網站、或是企業的官方網站來說，他們對 搜索引擎優化（SEO） 有強烈的要求，而前端渲染技術是無法滿足他們的需求的。如果無法通過搜索引擎的搜索輸出自身的內容，那么網站的價值就會大大受影響，要解決這類問題，還是要靠服務端渲染。

本文會介紹 Vue.js 的服務端渲染解決方案 Nuxt.js。Vue.js 推出后，其數據驅動和組件化思想，以及簡潔易上手的特性給開發者帶來了巨大的便利，Vue.js 官方提供的 vue-server-renderer 可以用來進行服務端渲染的工作，但是需要增加額外的工作量，開發體驗仍有待提高，而 Nuxt.js 推出后，這個問題被很好的解決了。

Nuxt.js 簡介

Nuxt.js 是一個基于 Vue.js 的通用應用框架，Nuxt.js 預設了利用 Vue.js 開發服務端渲染的應用所需要的各種配置，并且可以一鍵生成靜態站點。同時，Nuxt.js 的熱加載機制可以使開發者非常便捷的進行網站的開發。

Nuxt.js 于 2016 年 10 月 25 號發布，上線還不足一年，但是已經受到了廣泛的好評，最新的穩定版本是 0.10.7，目前仍在進行 1.0 版本的內測，Nuxt.js 社區也在逐步完善中，官網已經支持了中文文檔。

簡單上手

Vue.js 的 vue-cli 工具可以很方便的讓我們使用現成的模板初始化 Vue.js 項目，而 Nuxt.js 團隊已經為我們提供了初始化 Nuxt.js 項目的模板，安裝 vue-cli 后，只需在命令行中輸入

即可完成項目的創建工作，然后進入項目目錄中執行以下命令:

Nuxt.js 會使用 3000 端口運行服務，在瀏覽器中輸入 http://localhost:3000 就可以看到一個帶有 Nuxt.js 的 logo 的原始的頁面了。

項目目錄

完成了一個簡單的 Hello World 項目后，我們來進一步研究 Nuxt.js。進入 Nuxt.js 項目后，項目目錄如下：

下面簡要介紹一下各個目錄的作用：

.nuxt/ ：用于存放 Nuxt.js 的核心庫文件。例如，你可以在這個目錄下找到 server.js 文件，描述了 Nuxt.js 進行服務端渲染的邏輯（參見下一段 “Nuxt.js 的渲染流程”）， router.js 文件包含一張自動生成的路由表。

assets/ ：用于存放靜態資源，該目錄下的資源使用 Webpack 構建。

components/ ：存放項目中的各種組件。注意，只有在這個目錄下的文件才能被稱為 組件 。

layouts/ ：創建自定義的頁面布局，可以在這個目錄下創建全局頁面的統一布局，或是錯誤頁布局。如果需要在布局中渲染 pages 目錄中的路由頁面，需要在布局文件中加上 <nuxt /> 標簽。

middleware/ ：放置自定義的中間件，會在加載組件之前調用。

pages/ ：在這個目錄下，Nuxt.js 會根據目錄的結構生成 vue-router 路由，詳見下文。

plugins/ ：可以在這個目錄中放置自定義插件，在根 Vue 對象實例化之前運行。例如，可以將項目中的埋點邏輯封裝成一個插件，放置在這個目錄中，并在 nuxt.config.js 中加載。

static/ ：不使用 Webpack 構建的靜態資源，會映射到根路徑下，如 robots.txt

store/ ：存放 Vuex 狀態樹。

nuxt.config.js ：Nuxt.js 的配置文件，詳見下文。

Nuxt.js 的渲染流程

Nuxt.js 通過一系列構建于 Vue.js 之上的方法進行服務端渲染，具體流程如下:

調用 nuxtServerInit 方法

當請求打入時，最先調用的即是 nuxtServerInit 方法，可以通過這個方法預先將服務器的數據保存，如已登錄的用戶信息等。另外，這個方法中也可以執行異步操作，并等待數據解析后返回。

Middleware 層

經過第一步后，請求會進入 Middleware 層，在該層中有三步操作：

讀取 nuxt.config.js 中全局 middleware 字段的配置，并調用相應的中間件方法 匹配并加載與請求相對應的 layout 調用 layout 和 page 的中間件方法

調用 validate 方法

在這一步可以對請求參數進行校驗，或是對第一步中服務器下發的數據進行校驗，如果校驗失敗，將拋出 404 頁面。

調用 fetch 及 asyncData 方法

這兩個方法都會在組件加載之前被調用，它們的職責各有不同， asyncData 用來異步的進行組件數據的初始化工作，而 fetch 方法偏重于異步獲取數據后修改 Vuex 中的狀態。

我們在 Nuxt.js 的源碼 util.js 中可以看到以下方法：

這個方法會在 asyncData 方法調用完畢后進行調用，可以看到，組件從 asyncData 方法中獲取的數據會和組件原生的 data 方法獲取的數據做一次合并，最終仍然會在 data 方法中返回，所以得出， asyncData 方法其實是原生 data 方法的擴展。

經過以上四步后，接下來就是渲染組件的工作了，整個過程可以用下圖表示：

（圖片來源：Nuxt.js 官網）

如上文所述，在 .nuxt 目錄下，你可以找到 server.js 文件，這個文件封裝了 Nuxt.js 在服務端渲染的邏輯，包括一個完整的 Promise 對象的鏈式調用，從而完成上面描述的整個服務端渲染的步驟。

Nuxt.js 的一些使用技巧

nuxt.config.js 的配置

nuxt.config.js 是 Nuxt.js 的配置文件，可以通過針對一系列參數的設置來完成 Nuxt.js 項目的配置，可以在Nuxt.js 官網 找到針對這個文件的說明，下面舉例一些常用的配置：

head: 可以在這個配置項中配置全局的 head ，如定義網站的標題、 meta ，引入第三方的 CSS、JavaScript 文件等：

build: 這個配置項用來配置 Nuxt.js 項目的構建規則，即 Webpack 的構建配置，如通過 vendor 字段引入第三方模塊，通過 plugin 字段配置 Webpack 插件，通過 loaders 字段自定義 Webpack 加載器等。通常我們會在 build 的 vendor 字段中引入 axios 模塊，從而在項目中進行 HTTP 請求（ axios 也是 Vue.js 官方推薦的 HTTP 請求框架）。

css: 在這個配置項中，引入全局的 CSS 文件，之后每個頁面都會被引入。

router: 可以在此配置路由的基本規則，以及進行中間件的配置。例如，你可以創建一個用來獲取 User-Agent 的中間件，并在此加載。

loading: Nuxt.js 提供了一套頁面內加載進度指示組件，可以在此配置顏色，禁用，或是配置自定義的加載組件。

env: 可以在此配置用來在服務端和客戶端共享的全局變量。

目錄即路由

Nuxt.js 在 vue-router 之上定義了一套自動化的生成規則，即依據 pages 的目錄結構生成。例如，我們有以下目錄結構：

這個目錄下含有一個基礎路由（無參數）以及兩個動態路由（帶參數），Nuxt.js 會生成如下的路由配置表（可以在 .nuxt 目錄下的 router.js 文件中找到）：

對于 article-id 這個路由，路徑中帶有 :id? 參數，表明這是一個可選的路由，如果要將其設為必選，則必須在 article 的目錄下添加 index.vue 文件。

再看下面一個例子:

由于有同名文件和文件夾的存在，Nuxt.js 會為我們生成嵌套路由，生成的路由結構如下，在使用時，需要增加 <nuxt-child /> 標簽來顯示子視圖的內容。

此外，Nuxt.js 還可以設置動態嵌套路由，具體可參見Nuxt.js 的官方文檔。

總結

Nuxt.js 盡管是一個非常年輕的框架，目前也有很多待改進的問題，但它的出現為 Vue.js 開發者搭建服務端渲染項目提供了巨大的便利，期待 Nuxt.js 1.0 版本發布后，能給我們帶來更多實用的新功能。

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