為什么現在又流行服務端渲染html？

不了解web的發展歷史很難理解為什么現在又流行服務端渲染html了。現在的服務端渲染html和過去的渲染方式并不相同，所采用的技術、方式、方法也不相同，并不是舊瓶裝舊酒，而是舊瓶裝新酒。技術的更迭很大一部分原因在于出現了瓶頸無法滿足當下的網絡數據供應。

渲染一詞起源于游戲領域、3D設計領域，渲染的意義在于并不是簡單地畫一張畫呈現在其他人面前，而以數據的形式保存物體的位置，顏色、法線、紋理、光照等，當有人需要查看的時候，就會重新再次準確地重現，重現的過程就是渲染。

渲染流程會接受使用定點描述3D物體的原始數據作為輸入用于處理，再計算它的片段（fragment），片段就是一個個像素的3D投射，片段包含了位置、顏色、法線、紋理、光照等等，渲染好的像素輸出到顯示屏上。

瀏覽器端渲染和服務器端渲染的區別頁面渲染的本質就是瀏覽器將HTML文本轉換成頁面的過程。頁面渲染大致需要走過下面幾個步驟：

1、用戶輸入網址后瀏覽器請求服務器端得到一個HTML文本。

2、接著就到了HTML文本解析的過程了，先構建DOM樹。如果遇到了內聯樣式、樣式腳本，就需要下載并構建樣式規則。如果遇到JavaScript腳本就會下載并執行。

3、DOM樹、樣式規則構建完后渲染進程就會將他們兩合并成渲染樹，然后渲染進程就會對渲染樹進行布局，生產布局樹。渲染進程對布局樹進行繪制并生成繪制記錄。

4、渲染進程對布局樹分成并柵格化每一層得到合成幀，再發給GPU進程顯示到瀏覽器的頁面中。

服務器端渲染（SSR）會在瀏覽器請求頁面的URL的時候，就會把我們需要的HTML文本組裝好，然后返回給瀏覽器，瀏覽器不需要再經過JavaScript執行就可以直接構建出DOM樹并展示到頁面中。客戶端渲是當瀏覽器請求URL時服務器端直接返回一個空的靜態HTML文件，服務器端不需要任何查數據庫和模板組裝的操作。瀏覽器拿到這個HTML文件后就開始樣式表和腳本，腳本會請求服務器端提供的API來獲取數據，獲取完數據后JavaScript腳本就會動態地將數據渲染到頁面中，完成頁面的顯示。

web的發展史web1.0時代沒有AJAX，幾乎所有的應用都是服務器端渲染，瀏覽器請求頁面URL之后，服務器端會將所有的東西準備好，包括了數據庫查詢到的數據、組件模板（PHP、ASP、JSP等）等，返回給瀏覽器，瀏覽器不需要任何的JavaScript參與。

但隨著人們的期許值越來越大，web業務也變得越來越復雜了，再加上AJAX的出現，web1.0服務器端渲染暴露出了很多缺點，比如我們每次點擊頁面的一個小模塊都需要重新請求一次頁面，重新查詢數據庫，重新組裝加載一次html。JavaScript、jsp、php、asp代碼混在一起更是使得web應用很難進行維護。

nodejs出現之后網頁開始被當成了SPA，即獨立應用程序。前端接管了所有頁面渲染的事情，而服務器端只負責數據查詢和處理API。

SPA發展過程中也逐漸暴露出很多問題，比如不利于搜索引擎SEO，JavaScript日益臃腫導致首批渲染速度還不及web1.0時代的服務器端渲染，于是服務器端渲染再次被應用，當瀏覽器請求URL時，前端服務器會根據不同的URL向后端服務器請求數據，請求完前端服務器會組裝一個攜帶具體數據的HTML文本返回給瀏覽器。瀏覽器會同時渲染頁面、加載執行JavaScript腳本。當我們請求跳轉到別的頁面的時候，瀏覽器會執行JavaScript腳本，同時向后端服務器請求數據，獲取完數據后再次執行JavaScript腳本動態渲染頁面。

綜上所述服務器端渲染、客戶端渲染的進化史其實也是前、后端工程師血淚發展史。早期后端總是鄙視前端js太簡單，前端也無非是切切圖、寫寫js特效，前端工程師根本算不上一個程序員。

如今前端翻身了徹底地擺脫了后端的指指點點。如今一份代碼，既可以由服務端渲染，也可以由客戶端渲染。

以上個人淺見，歡迎批評指正。

認同我的看法，請點個贊再走，感謝！

喜歡我的，請關注我，再次感謝！