服務端渲染基礎

語言: CN / TW / HK

什麼是渲染

一般而言大家提到“渲染”,可能會說:“凡是從伺服器返回的 HTML 頁面,均算作是服務端渲染。”這可能讓不少人還是覺得迷惑,簡單說渲染就是“資料”和“模板”拼接到一起。舉個例子:我們前端開發最常見的一個場景,請求後端介面資料,然後將資料通過模板繫結語法繫結到頁面中,最終呈現給使用者。這個過程就是我們這裡所指的渲染。

總結來說,渲染本質其實是字串的解析替換,實現方式有很多種。但是我們這裡要關注的並不是如何渲染,而是在哪裡渲染的問題。

傳統的服務端渲染

最早期,Web 頁面渲染都是在服務端完成的,即服務端執行過程中將所需的資料結合頁面模板渲染為

HTML 響應給客戶端瀏覽器。所以瀏覽器呈現出來的是直接包含內容的頁面。

服務端渲染工作流程

這種方式對於沒有玩過後端開發的同學來說可能會比較陌生,所以下面通過我們前端同學比較熟悉的 Node.js 來了解一下這種方式。

安裝依賴:

// 建立 http 服務 
npm i express 

// 服務端模板引擎 
npm i art-template express-art-template

服務端程式碼部分,我們可以在基本的 Web 服務,使用模板引擎,然後渲染一個頁面,具體如下:'


const express = require('express')
const fs = require('fs')
const template = require('art-template')
const app = express()
app.get('/', (req, res) => {
  // 1. 得到模板內容
  const templateStr = fs.readFileSync('./index.html', 'utf-8')
  // 2. 得到資料
  const data = JSON.parse(fs.readFileSync('./data.json', 'utf-8'))
  // 3. 渲染:資料 + 模板 = 完整結果
  const html = template.render(templateStr, data)
  console.log(html)
  // 4. 把渲染結果傳送給客戶端
  res.send(html)
)}
app.listen(3000, () => console.log('running...'))

客戶端程式碼:

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>Document</title>
    </head>
    <body>
      <h1>{{ message }}</h1>
      <ul>
        {{ each todos }}
        <li>{{ $value.title }}</li>
        {{ /each }} 
      </ul>
    </body>
</html>

這是最早的網頁渲染方式,也是動態網站的核心工作步驟。

缺點:

  • 前後端程式碼完全耦合在一起,不利於開發和維護;

  • 前端沒有足夠的發揮空間;

  • 服務端的壓力較大;

  • 使用者體驗一般;

但是不得不說,在網頁應用並不複雜的情況下,這種方式也是可取的。

客戶端渲染

傳統的服務端渲染的有很多問題,而這些問題客戶端 Ajax 技術可以有效解決。Ajax 技術使得客戶端動態獲取資料變為可能,也就是說原本服務端渲染這件事也可以拿到客戶端做了。

下圖是基於客戶端渲染的 SPA 應用的基本工作流程:

我們以一個 Vue.js 建立的單頁面應用為例,簡單瞭解一下這種方式的渲染過程。

通過這個示例瞭解到我們可以把【資料處理】和【頁面渲染】這兩件事分開了。由後端負責處理資料介面,而前端只負責將介面資料渲染到頁面中,這讓前端不再受限於後端,更為獨立。

缺點:

  • 首屏渲染慢

  • 不利於 SEO

現代化服務端渲染

現代化伺服器端一般會選擇同構渲染,也就是一份程式碼,在伺服器端執行一次,用於實現伺服器端渲染(首屏直出),然後在在客戶端再執行一次,用於接管頁面互動。簡單來說,同構渲染就是“後端渲染”和“前端渲染”的結合,同構渲染同時擁有傳統服務端渲染和客戶端渲染的優點,可以有效解決 SEO 和首屏渲染慢的核心問題。

同構渲染流程圖

  • 客戶端發起請求

  • 服務端渲染首屏內容 + 生成客戶端 SPA 相關資源

  • 服務端將生成的首屏資源傳送給客戶端

  • 客戶端直接展示服務端渲染好的首屏內容

  • 首屏中的 SPA 相關資源執行之後會啟用客戶端 Vue

  • 之後客戶端所有的互動都由客戶端 SPA 處理

如何使用同構渲染

如何使用同構渲染有兩種方式,一種是官方解決方案,一種是使用第三方的方案。

使用 Vue、React 等框架的官方解決方案:

  • 優點:有利於理解原理

  • 缺點:需要搭建環境比較麻煩

使用第三方解決方案:

  • React 生態中的 Next.js

  • Vue 生態中的 Nuxt.js

  • Angular 生態中的 Angular Universal

同構渲染應用的問題

同構渲染在應用上也存在以下問題:

  • 開發條件有限

  • 涉及構建設定和部署的要求更高

  • 更多的服務端負載

以上就是我對於服務端渲染的一些淺談,希望能夠對大家有所幫助。

推薦閱讀

CSS 盒子的邊距塌陷

熱門劇本殺與 SaaS 的不解之緣