前端渲染HTML與後端渲染HTML的區別

讀書不是爲了雄辯和駁斥，
也不是爲了輕信和盲從，
而是爲了思考和權衡。

        —— 培根
複製代碼

兩種渲染方式

  爲何會有後端渲染(服務器渲染SSR)與前端渲染(客戶端渲染CSR)

首先理解服務器和瀏覽器客戶端之間傳遞的是什麼: HTML、CSS、JavaScript的文件以及數據載體json(xml)等文件。

  一開始，Web App 直接由若干 HTML、CSS、 JS 組成，每個頁面須要特殊的邏輯，所以隨着App規模的擴大，後端網站目錄下的代碼文件就愈來愈多，並且，彼此之間是沒有同步的。好比你改了站點的佈局風格，那麼你極可能須要改動成百上千的HTML文件，這勞動量太大了。既然如此多的HTML具備必定的邏輯聯繫，何不使用代碼生成代碼？因而後端模板語言誕生了，因而人們開始普遍使用模板語言代替手寫HTML。

  目前接觸到的模板語言有pug(jade)跟go template   

• pug模板示例以下：

  

• go template模板示例以下：

  

  經過後端渲染HTML，前端不須要配置路由那些步驟，只須要在須要填充內容的地方佔位便可。須要對字段比較熟悉，還須要先後端一塊兒聯調。   

後端渲染

  互聯網早期，用戶使用瀏覽器瀏覽的都是一些沒有複雜邏輯的、簡單的頁面，服務器進程從數據庫獲取數據後，後端的程序在把HTML頁面吐給前端以前，先把HTML頁面上的特定區域、特定符號，先用數據填充，將數據加載進來生成HTML，而後經過網絡傳輸到用戶的瀏覽器中解析成可見的頁面。

所謂渲染，你能夠理解一種修改，渲染這詞最先來源於遊戲領域，遊戲領域又來源於現實畫畫，渲染嘛，拿着顏料往紙上塗即是。之前絕大部分服務器都是這個模式

前端渲染

  隨着前端頁面的複雜性提升，前端就不只僅是普通的頁面展現了，而可能添加了更多功能性的組件，複雜性更大，另外，彼時ajax的興起，使得業界就開始推崇先後端分離的開發模式，即後端不提供完整的HTML頁面，而是提供一些API使得前端能夠獲取到JSON數據，而後前端拿到JSON數據以後再在前端進行HTML頁面的拼接，而後展現在瀏覽器上，這就是所謂的前端渲染。

  這樣前端就能夠專一UI的開發，後端專一於邏輯的開發。表明是如今流行的SPA單頁面應用，例如Vue、React框架，只須要後端給咱們提供接口API，前端UI、交互等全在前端進行，先後端只須要約定接口。

後端渲染和前端渲染最重要的區別在於數據填充上的區別，也就是到底是誰來完成HTML文件的完整拼接，若是是在後端完成的，直接填充到HTML後傳給前端，而後返回給客戶端，就是後端渲染；而若是是前端作了更多的工做完成了HTML的拼接，經過ajax或者fetch從後臺拿數據再本身填充或進行其餘數據操做，則就是前端渲染

  下面幾個是在網上搜到的網友對先後端渲染比較形象的比喻：

簡單來講：
後端渲染html 叫吐或者噴，機器人能夠看到完整的呈現源碼
前端模板渲染html叫填，機器人看不到完整的呈現源碼

好比畫一張帶房子的畫：
後端渲染：後端都畫好，前端直接拿來展現給你看
前端渲染：後端把畫布，房子，房子位置等一系列數據發給前端，前端現場畫一個給你看

前端渲染和後端渲染路線

前端渲染路線

1. 請求一個HTML
    2. 服務端返回一個HTML
    3. 瀏覽器下載html裏面的JS/CSS文件 
    4. 等待JS文件下載完成 
    5. 等待JS加載並初始化完成 
    6. JS代碼終於能夠運行，由JS代碼向後端請求數據(ajax/fetch) 
    7. 等待後端數據返回 
    8. 客戶端從無到完整地，把數據渲染爲響應頁面
複製代碼

後端渲染路線

1. 請求一個HTML
    2. 服務端請求數據(內網請求快)
    3. 服務器初始渲染(服務端性能，較快）
    4. 服務端返回已經有正確內容的HTML
    5. 客戶端請求JS/CSS文件
    6. 等待JS文件下載完成
    7. 等待JS加載並初始化完成
    8. 客戶端把剩下一部分渲染完成(內容小，渲染快)
複製代碼

從後端渲染到前端渲染的變化

• 計算任務轉移
    本來由服務器執行的渲染任務轉移給了客戶端，這在大量用戶訪問的時候大大減輕後端的壓力。讓後端專一作後端應該作的事情，性能將大大提升，由於服務器作的事情確實減少了，而如今隨着客戶端軟硬件的發展，也能處理好大多數的渲染工做了。

• 放棄前端權限
    將整個UI邏輯交給客戶端之後，一些有經驗有能力的用戶可能會劫持UI，使得他們可以看到一些不應看到的界面。這彷佛違反了安全的原則。可是「一切在前端談安全都是耍流氓」，後端不能輕信一切從前端傳來的數據，切記必定要作好過濾與驗證。只要使用SSL、屏蔽XSS、後端不出漏洞，想僞造身份劫持App仍是難以作到的。

後端渲染與前端渲染的優缺點對比

後端渲染優缺點

• 優勢：

  • 前端耗時少，由於後端拼接完了HTML，不須要先下載一堆JS和CSS 後才能看到頁面，瀏覽器只須要直接渲染出來
  • 搜索引擎優化，由於在後端有完整的HTML頁面，因此爬蟲更容易爬取得到信息，更有利於SEO
  • 無需佔用客戶端資源。即解析模板的工做徹底交由後端來作，客戶端只要解析標準的HTML頁面便可，這樣對於客戶端的資源佔用更少，尤爲是移動端，也能夠更省電
  • 後端生成靜態化文件。即生成緩存片斷，這樣就能夠減小數據庫查詢浪費的時間了，且對於數據變化不大的頁面很是高效

• 缺點：

  • 不利於先後端分離，開發效率低。使用服務器端渲染，則沒法進行分工合做，則對於前端複雜度高的項目，不利於項目高效開發
  • 服務器端渲染，則前端通常就是寫一個靜態HTML文件，而後後端再修改成模板，這樣是很是低效的，而且還經常須要先後端共同完成修改的動做
  • 若是後端改了模板，前端還須要根據改動的模板再調節CSS，這樣使得先後端聯調的時間增長
  • 佔用服務器端資源，即服務器端完成HTML模板的解析，若是請求較多，會對服務器形成必定的訪問壓力。而若是使用前端渲染，就是把這些解析的壓力分攤了前端，而這裏確實徹底交給了一個服務器

前端渲染優缺點

• 優勢：  

  • 先後端分離，前端專一於前端UI，後端專一於API開發，且前端有更多的選擇性，而不須要遵循後端特定的模板
  • 體驗更好，好比，咱們將網站作成單頁Web應用（single page web application，SPA，是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序）或者部份內容作成SPA，這樣，尤爲是移動端，可使體驗更接近於原生APP
  • 局部刷新，無需每次都進行完整頁面請求
  • 懶加載，如在頁面初始時只加載可視區域內的數據，滾動後再加載其它數據，能夠經過 react-lazyload 實現
  • 富交互，使用 JS 實現各類酷炫效果
  • 節約服務器成本，省電省錢，JS 支持 CDN 部署，且部署極其簡單，只須要服務器支持靜態文件便可

• 缺點：

  • 前端響應較慢，若是是客戶端渲染，前端還要進行拼接字符串的過程，須要耗費額外的時間，不如服務器端渲染速度快
  • 不利於SEO，目前好比百度、谷歌的爬蟲對於SPA都是不認的，只是記錄了一個頁面，因此SEO不好

使用場景

  不談業務場景而盲目選擇使用何種渲染方式都是耍流氓。好比企業級網站，主要功能是展現而沒有複雜的交互，而且須要良好的SEO，則這時咱們就須要使用後端渲染；而相似後臺管理頁面，交互性比較強，不須要SEO的考慮，那麼就可使用前端渲染。

  另外，具體使用何種渲染方法並非絕對的，好比如今一些網站採用了首屏後端渲染，即對於用戶最開始打開的那個頁面採用的是後端渲染，這樣就保證了渲染速度，而其餘的頁面採用前端渲染，這樣就完成了先後端分離。  

• 後端渲染：相對模塊化，很是適用於偏向展現性的頁面，利於SEO。並且因爲是在後端就已經渲染好，因此加載體驗相對好，在網速差的時候表現明顯。
• 前端渲染：比較靈活，適用於dom操做比較頻繁或者交互比較複雜的業務場景。能夠很好地維護一份model，而不用反覆請求。理論上更符合先後端分離。

爲何前端渲染不利於SEO

  若是進行了先後端分離，那麼前端就是經過JS來修改DOM使得HTML拼接徹底，而後再顯示，或者是使用SPA，這樣，SEO幾乎沒有。那麼這種狀況下如何作SEO優化呢？

SEO(Search Engine Optimization)，中文通常譯做：搜索引擎優化。SEO是一種經過了解搜索引擎的運做規則(如何抓取網站頁面，如何索引以及如何根據特定的關鍵字展示搜索結果排序等)來調整網站，以提升該網站在搜索引擎中某些關鍵詞的搜索結果排名

  前面咱們談到的SPA不利於SEO，由於就目前而言，部分搜索引擎如Google、bing等，它們的爬蟲雖然已經支持執行JS甚至是經過AJAX獲取數據了，可是對於異步數據的支持也還不足。   
  
  由於單頁面的狀況下的頁面中的不少內容都是根據匹配到的路由動態生成並展現出來的，並且不少頁面內容是經過ajax異步獲取的，網絡抓取工具並不會等待異步請求完成後再行抓取頁面內容，對於網絡抓取工來講去準確模擬相關的行爲獲取複合數據是很困難的，它們更擅長對靜態資源的抓取和分析。

vue和react實現的路由不是新的頁面，只是動態切換了頁面內容，頁面沒有重載，也就沒有網頁爬蟲爬去取數據的過程

• 後端渲染爬蟲看到的頁面長這樣：

能夠看到是一個完整的HTML文件

• 前端渲染爬蟲看到的頁面長這樣：

能夠看到除了title沒有其餘關鍵數據

參考資料：

1. 前端後分離深刻分析 ——瀏覽器渲染和服務器渲染區別
2. 實現基於 Nuxt.js 的 SSR 應用
3. 服務端渲染 vs 客戶端渲染