后端渲染

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

前端渲染

隨著前端頁面的復雜性提高，前端就不僅僅是普通的頁面展示了，而可能添加了更多功能性的組件，復雜性更大，另外，彼時ajax的興起，使得業界就開始推崇前后端分離的開發模式，即后端不提供完整的HTML頁面，而是提供一些API使得前端可以獲取到JSON數據，然后前端拿到JSON數據之后再在前端進行HTML頁面的拼接，然后展示在瀏覽器上，這就是所謂的前端渲染。
這樣前端就可以專注UI的開發，后端專注于邏輯的開發。代表是現在流行的SPA單頁面應用，例如Vue、React框架，只需要后端給我們提供接口API，前端UI、交互等全在前端進行，前后端只需要約定接口。

前端渲染路線

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. 客戶端把剩下一部分渲染完成(內容小，渲染快)

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

SPA

SPA：單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用，是加載單個HTML 頁面并在用戶與應用程序交互時動態更新該頁面的Web應用程序。

簡單說： Web不再是一張張頁面，而是一個整體的應用，一個由路由系統、數據系統、頁面（組件）系統...組成的應用程序，其中路由系統是非必須的。

大部分的Vue項目，本質是SPA應用，Angular.js、Angular、Vue、React...還有最早的"Pjax"均如此。

SPA時代，主要是在Web端使用了history或hash（主要是為了低版本瀏覽器的兼容）API，在首次請求經服務端路由輸出整個應用程序后，接下來的路由都由前端掌控了，前端通過路由作為中心樞紐控制一系列頁面（組件）的渲染加載和數據交互。

而上面所述的各類框架則是將以：路由、數據、視圖為基本結構進行的規范化的封裝。

最早的SPA應用，由Gmail、Google Docs、Twitter等大廠產品實踐布道，廣泛用于對SEO要求不高的場景中。

SSR

SSR： 服務端渲染（Server Side Render），即：網頁是通過服務端渲染生成后輸出給客戶端。

在SPA之前的時代，我們的Web架構大都是SSR，如：Wordpress（PHP）、JSP技術、JavaWeb...或者DEDECMS、Discuz!等這些程序都是傳統典型的SSR架構，
即：服務端取出數據和模板組合生成html輸出給前端，前端發生請求時，重新向服務端請求html資源，路由也由服務端來控制。

其次，有個概念叫預渲染（Prerendering）。

如果你只是用服務端渲染來改善一個少數的營銷頁面（如 首頁，關于，聯系 等等）的SEO，那你可以用預渲染來實現。
預渲染不像服務器渲染那樣即時編譯HTML，它只在構建時為了特定的路由生成特定的幾個靜態頁面，等于我們可以通過webpack插件將一些特定頁面組件build時就編譯為html文件，直接以靜態資源的形式輸出給搜索引擎。

但實際的商業應用中，大部分時候我們需要的是即時渲染，這也是我們今天討論的主題。

后端渲染優缺點

優點：

前端耗時少，因為后端拼接完了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

如果進行了前后端分離，那么前端就是通過JS來修改DOM使得HTML拼接完全，然后再顯示，或者是使用SPA，這樣，SEO幾乎沒有。那么這種情況下如何做SEO優化呢？

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

前面我們談到的SPA不利于SEO，因為就目前而言，部分搜索引擎如Google、bing等，它們的爬蟲雖然已經支持執行JS甚至是通過AJAX獲取數據了，但是對于異步數據的支持也還不足。


因為單頁面的情況下的頁面中的很多內容都是根據匹配到的路由動態生成并展示出來的，而且很多頁面內容是通過ajax異步獲取的，網絡抓取工具并不會等待異步請求完成后再行抓取頁面內容，對于網絡抓取工來說去準確模擬相關的行為獲取復合數據是很困難的，它們更擅長對靜態資源的抓取和分析。