細說 Vue 組件的服務器端渲染

細說 Vue 組件的服務器端渲染

聲明:需要讀者對 NodeJs、Vue 服務器端渲染有一定的瞭解

現在,前後端分離與客戶端渲染已經成爲前端開發的主流模式,絕大部分的前端應用都適合用這種方式來開發,又特別是 React、Vue 等組件技術的發展,更是使這種方式深入人心。

但有一些應用,客戶端渲染就會遇到一些問題了:

  1. 需要做 SEO(搜索引擎優化),但客戶端渲染的 html 中幾乎沒有可用的信息
  2. 需要首屏快速加載,但客戶端渲染一般是長時間的加載動畫或者白屏

如果能把客戶端渲染的組件化技術(React、Vue 等)與傳統的後端渲染的方式有效的結合起來,兩者兼具,那就太完美了。

所以,這次就來聊聊 Vue 組件的服務器端渲染。

根據社區現有的一些方案,結合自己的實踐,針對團隊技術力量的不同,說說不同應用場景選擇方案時的優先級。

1. NodeJs 渲染中間層

一般前後端的工作流是 後端 -> 前端

傳統的後端渲染模式是後端負責包括 url、接口、模板渲染等,前端與後端耦合在一起,當然這種方式正在慢慢的退出歷史舞臺。

主流的客戶端渲染則是後端只提供接口(如有需要,可以提供必要的 url),前端與後端只通過接口交流數據,路由與渲染都在前端完成。

而 NodeJs 渲染中間層的工作流則是 後端 -> NodeJs -> 前端(NodeJs 渲染中間層由前端開發人員掌握)。

圖片描述

這種模式下,後端只提供接口,傳統的服務器端路由(url)、模板渲染則都有 NodeJs 層接管。這樣,前端開發人員可以自由的決定哪些組件需要在服務器端渲染,哪些組件可以放在客戶端渲染,前後端完全解耦,但又保留了服務器端渲染的功能。

這種方案最成熟的是 nuxt.js

如果有需要,大家可以自己去 nuxt.js 官方文檔 看看具體的使用方法和詳細的功能。

應該說,這種方式是目前最完美的一種方案,但也有一些隱患:

  1. 增加了一個 NodeJs 中間層,應用性能會有所降低
  2. 增加了架構的複雜度、不穩定性,也降低了應用的安全性
  3. 對於高併發應用,NodeJs 層會很容易形成瓶頸
  4. 對開發人員要求高了很多

所以,這種方式適合對併發量、安全性、穩定性等要求不高,但又需要做 SEO 或首屏快速加載的頁面。

當然,如果你能夠自己改造相關的工具,就另當別論了。

2. 保留後端模板渲染

當不能使用 NodeJs 中間層時,而又要達到 SEO 與首屏快速響應的目的時,在傳統的後端模板渲染的基礎上,就需要對前端的頁面加以適當的改造。

2.1 首屏快速響應

首屏快速響應就意味着首屏渲染所需的數據是跟 HTML 文件一起到達瀏覽器的,這些數據當前是由後端模板引擎嵌入到 HTML 頁面中的。

以 Java 的 freemarker 模板引擎爲例:

html 中以 script 的方式獲取模板的數據,這樣就算是在本地調試、開發,也不會報錯)。

<script>
  window.globalData = {
    stringValue: '${stringValueTplName}',
    intValue: parseInt('${intValueTplName}', 10),
  };
</script>

如果是複雜的 Json 數據或者其他複雜的模板數據(比如列表數據),則可以像下面這樣接收:

<script type="text/tpl" id="tpl-script-json">
  window.tmpData = {
    jsonValue: ${jsonValueTplName},
  };
</script>

<script>
  try {
    eval(document.getElementById('tpl-script-json').innerText);
  } catch (e) {
    window.tmpData = { jsonValue: {} };
  }
  
  window.globalData = {
    jsonValue: window.tmpData.jsonValue,
  };
</script>

這樣,你就可以在組件裏使用 window.globalData 的數據了,而不用另外用接口獲取數據,達到加快首屏渲染的目的,而且本地開發、調試也不會報錯。

如果你使用了本地數據 Mock 功能,也可以很容易的與這種方式結合在一起,只要稍加改造:

  1. 在代碼中定義本地和服務器兩個環境,本地環境使用 Mock 數據,服務器環境使用 window.globalData
  2. 可以使用 see-ajax, see-fetch 來簡化這種方式的開發

此外,還有一些措施來進一步加快首屏渲染:

  1. 儘量減少首屏加載的腳本文件大小,其他腳本可以按需加載
  2. 如果需要,可以將 CSS、JS 內容注入到 HTML 中,這樣就只會發起一個請求,也可以加快加載速度

2.2 SEO 優化

在上面加載首屏渲染的基礎上,對於 SEO 優化也可以做相應的改造。

其實,在客戶端渲染已慢慢成爲主流開發模式的同時,搜索引擎也在跟進這種變化。

截至目前,Google 和 Bing 可以很好對同步 JavaScript 應用程序進行索引,也就是說,即使是客戶端渲染,但只要是同步數據渲染(非 Ajax 獲取數據,比如模板數據),搜索引擎也能抓取到相應的 HTML 片段。

(國內的百度搜索與360搜索等暫時還沒有跟進動態)

但爲了兼容所有的搜索引擎,可以像下面改造:

  1. 先由後端模板引擎渲染一些 HTML 片段,僅給搜索引擎抓取,不作爲給用戶展示的頁面
  2. 然後再由客戶端渲染同步或異步的數據給用戶展示真正的頁面
<div>
  <!-- 這裏放置由後端模板引擎渲染的專給搜索引擎抓取的片段,用戶不可見 -->
</div>

<script>
  // 接收同步數據
  window.globalData = {
    stringValue: '${stringValueTplName}',
    intValue: parseInt('${intValueTplName}', 10),
  };
</script>

3. 導出靜態 html

如果頁面沒有動態數據,那就好辦了,直接把組件導出爲靜態 html,然後由客戶端激活。

具體過程可以參考 官方文檔

這種方案比較好的是 nuxt.js generate 靜態 HTML 文件。

目錄結構:

- pages/                # 頁面結構目錄
  - index.vue 
  - second.vue
  - ... 
- nuxt.config.js        # 配置文件
- package.json

- dist                  # 導出靜態 HTML 文件的默認目錄 

導出靜態 HTML 文件

npx nuxt generate

如果一個項目裏有多個 pages,可以這樣構建:

目錄結構:

- nuxt.config.js        # 配置文件
- package.json

- src/
  - home/               # home 頁面 
    - pages/            # 頁面結構目錄
      - index.vue 
      - second.vue
      - ...
      
    - dist              # 導出靜態 HTML 文件的默認目錄
  - about/              # about 頁面 
    - pages/            # 頁面結構目錄
      - index.vue 
      - second.vue
      - ...
      
    - dist              # 導出靜態 HTML 文件的默認目錄   

導出靜態 HTML 文件

npx nuxt generate src/home -c ../../nuxt.config.js    # home 頁面
npx nuxt generate src/about -c ../../nuxt.config.js   # about 頁面

除了上面提到的這些方式外,當然還有其他的方式,比如:

  1. 使用 Chrome Headless 模式獲取組件的靜態 HTML,參考 react-snap, puppeteer
  2. 官方 vue-server-renderer 導出靜態 HTML

4. 總結

因爲模式的改變,服務器端渲染與傳統的後端模板渲染工作方式有很大的不同,所以在開發時需要與後端開發人員做好溝通,避免認知上的不同導致協作不協調。

後續

更多博客,查看 https://github.com/senntyou/blogs

作者:深予之 (@senntyou)

版權聲明:自由轉載-非商用-非衍生-保持署名(創意共享3.0許可證

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章