導讀
本文主要是從三個方面學習服務端渲染，內容整理自多個博客。
- 服務端渲染是什麼？什麼是服務端渲染？（服務端渲染的運行機制）
- 爲什麼使用服務端渲染？服務端渲染解決了什麼問題？
- 什麼情況下使用服務端渲染？（服務端渲染的應用實例與使用場景）
一、概念
首先，說到服務端渲染我們要先對渲染這個概念有一個大概的瞭解
渲染：就是將數據和模版組裝成html
客戶端渲染（CSR）VS服務端渲染(SSR)
那麼，爲了更好的理解服務端渲染，我們也很有必要去了解一下客戶端渲染。將客戶端渲染與服務端渲染同時進行學習理解。
1.客戶端渲染
1.1概念
解釋一：客戶端渲染模式下，服務端把渲染的靜態文件給到客戶端，客戶端拿到服務端發送過來的文件自己跑一遍js，根據JS運行結果，生成相應DOM，然後渲染給用戶。
解釋二：html 僅僅作爲靜態文件，客戶端在請求時，服務端不做任何處理，直接以原文件的形式返回給客戶端客戶端，然後根據 html 上的 JavaScript，生成 DOM 插入 html。
延伸：前端渲染的方式起源於JavaScript的興起，ajax的大熱更是讓前端渲染更加成熟，前端渲染真正意義上的實現了前後端分離，前端只專注於UI的開發，後端只專注於邏輯的開發，前後端交互只通過約定好的API來交互，後端提供json數據，前端循環json生成DOM插入到頁面中去。
1.2.利弊
好處： 網絡傳輸數據量小、減少了服務器壓力、前後端分離、局部刷新，無需每次請求完整頁面、交互好可實現各種效果
壞處：不利於SEO、爬蟲看不到完整的程序源碼、首屏渲染慢（渲染前需要下載一堆js和css等）
2.服務端渲染
2.1.概念
解釋一：服務端在返回 html 之前，在特定的區域，符號裏用數據填充，再給客戶端，客戶端只負責解析 HTML 。
解釋二：服務端渲染的模式下，當用戶第一次請求頁面時，由服務器把需要的組件或頁面渲染成 HTML 字符串，然後把它返回給客戶端。客戶端拿到手的，是可以直接渲染然後呈現給用戶的 HTML 內容，不需要爲了生成 DOM 內容自己再去跑一遍 JS 代碼。使用服務端渲染的網站，可以說是“所見即所得”，頁面上呈現的內容，我們在 html 源文件裏也能找到。
2.2.利弊
好處:首屏渲染快、利於SEO、可以生成緩存片段，生成靜態化文件、節能（對比客戶端渲染的耗電）
壞處:用戶體驗較差、不容易維護，通常前端改了部分html或者css，後端也需要修改。
3.對比
其實前後端的渲染本質是一樣的，都是字符串的拼接，將數據渲染進一些固定格式的html代碼中形成最終的html展示在用戶頁面上。 因爲字符串的拼接必然會損耗一些性能資源。
如果在服務器端渲染，那麼消耗的就是server端的性能。
如果是在客戶端渲染，常見的手段，比如是直接生成DOM插入到html 中，或者是使用一些前端的模板引擎等。他們初次渲染的原理大多是將原html中的數據標記（例如{{text}}）替換。
二、爲什麼使用服務端渲染，它解決的是什麼問題
簡單總結起來就是兩點：
首屏加載快
相比於加載單頁應用，我只需要加載當前頁面的內容，而不需要像 React 或者 Vue 一樣加載全部的 js 文件
SEO 優化
對於單頁應用，搜索引擎並不能收錄到 ajax 爬取數據之後然後再動態 js 渲染出來的頁面。
爲了更便於理解，下面幾段話摘自掘金小冊：
事實上，很多網站是出於效益的考慮才啓用服務端渲染，性能倒是在其次。
假設 A 網站頁面中有一個關鍵字叫“前端性能優化”，這個關鍵字是 JS 代碼跑過一遍後添加到 HTML 頁面中的。那麼客戶端渲染模式下，我們在搜索引擎搜索這個關鍵字，是找不到 A 網站的——搜索引擎只會查找現成的內容，不會幫你跑 JS 代碼。A 網站的運營方見此情形，感到很頭大：搜索引擎搜不出來，用戶找不到我們，誰還會用我的網站呢？爲了把“現成的內容”拿給搜索引擎看，A 網站不得不啓用服務端渲染。
但性能在其次，不代表性能不重要。服務端渲染解決了一個非常關鍵的性能問題——首屏加載速度過慢。在客戶端渲染模式下，我們除了加載 HTML，還要等渲染所需的這部分 JS 加載完，之後還得把這部分 JS 在瀏覽器上再跑一遍。這一切都是發生在用戶點擊了我們的鏈接之後的事情，在這個過程結束之前，用戶始終見不到我們網頁的廬山真面目，也就是說用戶一直在等！相比之下，服務端渲染模式下，服務器給到客戶端的已經是一個直接可以拿來呈現給用戶的網頁，中間環節早在服務端就幫我們做掉了，用戶豈不“美滋滋”？
三、 什麼情況下使用服務端渲染？
通過服務端渲染的概念以及它的兩個特點：首屏加載速度快、SEO優化。
我們知道，服務端渲染其實就是由瀏覽器做的一些事情，我們放到了服務端去做，那麼對於掘金、簡書、CSDN、知乎等網站的搭建，這種在網上一搜搜出一堆東西的網站，SEO做的很好，應該多少都用到服務端渲染了吧？當然，做服務端渲染成本是高昂的。
vue全家桶或者react全家桶，都是推薦通過服務端渲染來實現路由的。
服務端渲染並非完全之策（服務器稀少而寶貴），關於首屏渲染體驗以及SEO的優化方案很多，在不使用服務端渲染這個操作下，我們最好的處理方式就是找尋替代優化方案。
關於在server端還是在browser端渲染的選擇，更多的是要看業務場景。
相關文章延伸閱讀
https://blog.csdn.net/b9q8e64lo6mm/article/details/79418969 （力薦）