什么是渲染
一般而言大家提到“渲染”，可能會說：“凡是從服務器返回的 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
同構渲染應用的問題
同構渲染在應用上也存在以下問題：
-
開發條件有限
-
涉及構建設置和部署的要求更高
-
更多的服務端負載
以上就是我對於服務端渲染的一些淺談，希望能夠對大家有所幫助。