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