資訊專欄INFORMATION COLUMN
摘要：細(xì)說后端模板渲染客戶端渲染中間層服務(wù)器端渲染前端與后端渲染方式的發(fā)展大致經(jīng)歷了這樣幾個(gè)階段后端模板渲染客戶端渲染中間層服務(wù)器端渲染。與后端模板渲染剛好相反，客戶端渲染的頁面渲染都是在客戶端進(jìn)行，后端不負(fù)責(zé)任何的渲染，只管數(shù)據(jù)交互。
細(xì)說后端模板渲染、客戶端渲染、node 中間層、服務(wù)器端渲染（ssr）
前端與后端渲染方式的發(fā)展大致經(jīng)歷了這樣幾個(gè)階段：后端模板渲染、客戶端渲染、node 中間層、服務(wù)器端渲染（ssr）。
1. 后端模板渲染前端與后端最初的渲染方式是后端模板渲染，就是由后端使用模板引擎渲染好 html 后，返回給前端，前端再用 js 去操作 dom 或者渲染其他動(dòng)態(tài)的部分。
這個(gè)過程大致分成以下幾個(gè)步驟：
前端請(qǐng)求一個(gè)地址 url
后端接收到這個(gè)請(qǐng)求，然后根據(jù)請(qǐng)求信息，從數(shù)據(jù)庫或者其他地方獲取相應(yīng)的數(shù)據(jù)
使用模板引擎（如 java > jsp、php > smarty）將這些數(shù)據(jù)渲染成 html
將 html 文本返回給前端
在這個(gè)過程中，前端的 html 代碼需要嵌入到后端代碼中（如 java、php），并且在很多情況下，前端源代碼和后端源代碼是在一個(gè)工程里的。
所以，不難看出，這種方式的有這樣的幾個(gè)不足：
前后端雜揉在一起，不方便本地開發(fā)、本地模擬調(diào)試，也不方便自動(dòng)化測(cè)試
前端被約束在后端開發(fā)的模式中，不能充分使用前端的構(gòu)建生態(tài)，開發(fā)效率低下
項(xiàng)目難以管理和維護(hù)，也可能會(huì)有前后端職責(zé)不清的問題
盡管如此，但因?yàn)檫@種方式是最早出現(xiàn)的方式，并且這種渲染方式有一個(gè)好處，就是前端能夠快速呈現(xiàn)服務(wù)器端渲染好的頁面，而不用等客戶端渲染，這能夠提供很好的用戶體驗(yàn)與 SEO 友好，所以當(dāng)下很多比較早的網(wǎng)站或者需要快速響應(yīng)的展示性網(wǎng)站仍然是使用這種方式。
2. 客戶端渲染隨著前端工程化與前后端分離的發(fā)展，以及前端組件化技術(shù)的出現(xiàn)，如 react、vue 等，客戶端渲染已經(jīng)慢慢變成了主要的開發(fā)方式了。
與后端模板渲染剛好相反，客戶端渲染的頁面渲染都是在客戶端進(jìn)行，后端不負(fù)責(zé)任何的渲染，只管數(shù)據(jù)交互。
這個(gè)過程大致分成以下幾個(gè)步驟：
前端請(qǐng)求一個(gè)地址 url
后端接收到這個(gè)請(qǐng)求，然后把相應(yīng)的 html 文件直接返回給前端
前端解析 js 后，然后通過 ajax 向后臺(tái)獲取相應(yīng)的數(shù)據(jù)
然后由 js 將這些數(shù)據(jù)渲染成頁面
這樣一來，前端與后端將完全解耦，數(shù)據(jù)使用全 ajax 的方式進(jìn)行交互，如此便可前后端分離了。
其實(shí)，不難看出，客戶端渲染與前后端分離有很大的好處：
前端獨(dú)立出來，可以充分使用前端生態(tài)的強(qiáng)大功能
更好的管理代碼，更有效率的開發(fā)、調(diào)試、測(cè)試
前后端代碼解耦之后，能更好的擴(kuò)展、重構(gòu)
所以，客戶端渲染與前后端分離現(xiàn)在已經(jīng)是主流的開發(fā)方式了。
但這種方式也有一些不足：
首屏加載緩慢，因?yàn)橐?js 加載完畢后，才能進(jìn)行渲染
SEO 不友好，因?yàn)?html 中幾乎沒有可用的信息
3. node 中間層為了解決客戶端渲染的不足，便出現(xiàn)了 node 中間層的理念。
傳統(tǒng)的 B/S 架構(gòu)中，是 瀏覽器 -> 后端服務(wù)器 -> 瀏覽器，上文所講的都是這種架構(gòu)。
而加入了 node 中間層之后，就變成 瀏覽器 -> node -> 后端服務(wù)器 -> node -> 瀏覽器。
這個(gè)過程大致分成以下幾個(gè)步驟：
前端請(qǐng)求一個(gè)地址 url
node 層接收到這個(gè)請(qǐng)求，然后根據(jù)請(qǐng)求信息，向后端服務(wù)器發(fā)起請(qǐng)求，獲取數(shù)據(jù)
后端服務(wù)器接收到請(qǐng)求，然后根據(jù)請(qǐng)求信息，從數(shù)據(jù)庫或者其他地方獲取相應(yīng)的數(shù)據(jù)，返回給 node 層
node 層根據(jù)這些數(shù)據(jù)渲染好首屏 html
node 層將 html 文本返回給前端
一個(gè)典型的 node 中間層應(yīng)用就是后端提供數(shù)據(jù)、node 層渲染模板、前端動(dòng)態(tài)渲染。
這個(gè)過程中，node 層由前端開發(fā)人員掌控，頁面中哪些頁面在服務(wù)器上就渲染好，哪些頁面在客戶端渲染，由前端開發(fā)人員決定。
這樣做，達(dá)到了以下的目的：
保留后端模板渲染、首屏快速響應(yīng)、SEO 友好
保留前端后分離、客戶端渲染的功能（首屏服務(wù)器端渲染、其他客戶端渲染）
但這種方式也有一些不足：
增加了一個(gè)中間層，應(yīng)用性能有所降低
增加了架構(gòu)的復(fù)雜度、不穩(wěn)定性，降低應(yīng)用的安全性
對(duì)開發(fā)人員要求高了很多
4. 服務(wù)器端渲染（ssr）大部分情況下，服務(wù)器端渲染（ssr）與 node 中間層是同一個(gè)概念。
服務(wù)器端渲染（ssr）一般特指，在上文講到的 node 中間層基礎(chǔ)上，加上前端組件化技術(shù)在服務(wù)器上的渲染，特別是 react 和 vue。
react、vue、angular 等框架的出現(xiàn)，讓前端組件化技術(shù)深入人心，但在一些需要首屏快速加載與 SEO 友好的頁面就陷入了兩難的境地了。
因?yàn)榍岸私M件化技術(shù)天生就是給客戶端渲染用的，而在服務(wù)器端需要被渲染成 html 文本，這確實(shí)不是一件很容易的事，所以服務(wù)器端渲染（ssr）就是為了解決這個(gè)問題。
好在社區(qū)一直在不斷的探索中，讓前端組件化能夠在服務(wù)器端渲染，比如 next.js、nuxt.js、razzle、react-server、beidou 等。
一般這些框架都會(huì)有一些目錄結(jié)構(gòu)、書寫方式、組件集成、項(xiàng)目構(gòu)建的要求，自定義屬性可能不是很強(qiáng)。
以 next.js 為例，整個(gè)應(yīng)用中是沒有 html 文件的，所有的響應(yīng) html 都是 node 動(dòng)態(tài)渲染的，包括里面的元信息、css, js 路徑等。渲染過程中，next.js 會(huì)根據(jù)路由，將首頁所有的組件渲染成 html，余下的頁面保留原生組件的格式，在客戶端渲染。
5. 另外不需要首屏快速加載、SEO 友好的，用全客戶端渲染
需要首屏快速加載、SEO 友好的，如果用了如 react、vue 等組件化技術(shù)，將不得不用 node 中間層與服務(wù)器端渲染
如果技術(shù)團(tuán)隊(duì)不支持，不建議在需要首屏快速加載、SEO 友好的地方使用如 react、vue 等組件化技術(shù)
前后端分離之后也可以做后端模板渲染，這樣前端的調(diào)試可以搭配 handlebars、ejs 等模板引擎進(jìn)行本地調(diào)試，而后端的調(diào)試則需要到測(cè)試機(jī)了
后續(xù)更多博客，查看 https://github.com/senntyou/blogs
作者：深予之 (@senntyou)
版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98422.html
摘要：移動(dòng)端應(yīng)用一般都運(yùn)行在微信瀏覽器中中手機(jī)瀏覽器中。因?yàn)槲⑿艦g覽器是定制的瀏覽器，一般的遠(yuǎn)程調(diào)試方式都不可用，需要配合特定的工具，如微信開發(fā)者工具。 前端如何高效的與后端協(xié)作開發(fā) 1. 前后端分離 前端與后端的分離，能使前端的開發(fā)脫離后端的開發(fā)模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應(yīng)用等。 可以參考：前后端分離、web與static服務(wù)器分離 2. 盡量避免后端模板...
摘要：移動(dòng)端應(yīng)用一般都運(yùn)行在微信瀏覽器中中手機(jī)瀏覽器中。因?yàn)槲⑿艦g覽器是定制的瀏覽器，一般的遠(yuǎn)程調(diào)試方式都不可用，需要配合特定的工具，如微信開發(fā)者工具。 前端如何高效的與后端協(xié)作開發(fā) 1. 前后端分離 前端與后端的分離，能使前端的開發(fā)脫離后端的開發(fā)模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應(yīng)用等。 可以參考：前后端分離、web與static服務(wù)器分離 2. 盡量避免后端模板...
摘要：解決思路服務(wù)器端渲染服務(wù)器端和前端公用同一個(gè)應(yīng)用，然后通過構(gòu)建工具及配置，確定哪些組件需要再服務(wù)器端渲染，那些組件需要再客戶端渲染。服務(wù)器端渲染，由框架與構(gòu)建工具配合，并依據(jù)一定的項(xiàng)目結(jié)構(gòu)和編碼方式，共同運(yùn)行。 分離 為什么需要 前后端分離、web服務(wù)器與static服務(wù)器分離: 前端與后端耦合 (需求) 自動(dòng)化、工程化的構(gòu)建前端的代碼 (基礎(chǔ)條件) 模塊化、組件化，項(xiàng)目共享代碼 (...
摘要：原作者原鏈接基于多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)法律聲明警告本作品遵循署名非商業(yè)性使用禁止演繹未本地化版本協(xié)議發(fā)布。這是什么背景現(xiàn)代化的前端項(xiàng)目中很多都使用了客戶端渲染的單頁面應(yīng)用。 原作者：@LinuxerPHL原鏈接：基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn) 法律聲明 警告：本作品遵循 署名-非商業(yè)性使用-禁止演繹3.0 未本地化版本（CC BY-...
摘要：原作者原博文地址基于多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)法律聲明警告本作品遵循署名非商業(yè)性使用禁止演繹未本地化版本協(xié)議發(fā)布。這是什么背景現(xiàn)代化的前端項(xiàng)目中很多都使用了客戶端渲染的單頁面應(yīng)用。 原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn) 法律聲明 警告：本作品遵循 署名-非商業(yè)性使用-禁止演繹3.0 未本地化版本（...
閱讀 1103·2021-09-22 15:19
閱讀 1721·2021-08-23 09:46
閱讀 2242·2021-08-09 13:47
閱讀 1418·2019-08-30 15:55
閱讀 1424·2019-08-30 15:55
閱讀 1984·2019-08-30 15:54
閱讀 2814·2019-08-30 15:53
閱讀 722·2019-08-30 11:03
