服务端渲染基础
什么是渲染
一般而言大家提到“渲染”，可能會說：“凡是從服務器返回的 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
同構渲染應用的問題
同構渲染在應用上也存在以下問題：
-
開發條件有限
-
涉及構建設置和部署的要求更高
-
更多的服務端負載
以上就是我對于服務端渲染的一些淺談，希望能夠對大家有所幫助。
總結
- 上一篇： Ansible：Ansibl项目生产环境
- 下一篇： 云原生灰度更新实践