前言
服務端渲染的概念這幾年可以說是炒得火熱，它不是一種新型的技術，而是網際網路最開始時所使用的載入技術。
那麼到底是什麼原因，使得人們願意拭去歷史的塵埃，讓服務端渲染這一古老的概念重新綻放光芒呢？
什麼是服務端渲染？
服務端渲染簡稱 SSR，全稱是 Server Side Render，是指一種傳統的渲染方式，就是在瀏覽器請求頁面URL的時候，服務端將我們需要的HTML文字組裝好，並返回給瀏覽器，這個HTML文字被瀏覽器解析之後，不需要經過 JavaScript 指令碼的執行，即可直接構建出希望的 DOM 樹並展示到頁面中。
SSR 有兩種模式，單頁面和非單頁面模式，第一種是後端首次渲染的單頁面應用，第二種是完全使用後端路由的後端模版渲染模式。他們區別在於使用後端路由的程度。
與之相對的是 CSR（Client Side Render），是一種目前流行的渲染方式，它依賴的是執行在客戶端的JS，使用者首次傳送請求只能得到小部分的指引性HTML程式碼。第二次請求將會請求更多包含HTML字串的JS檔案。
為什麼需要 SSR ？
目前前端流行的框架大都是適用於構建 SPA（單頁面應用程式），在SPA這個模型中，是透過動態地重寫頁面的部分與使用者互動，而避免了過多的資料交換，響應速度自然相對更高。
但是，SPA應用的首屏開啟速度一般都很慢，因為使用者首次載入需要先下載SPA框架及應用程式的程式碼，然後再渲染頁面，並且 SPA 應用不利於 SEO 最佳化。
這時候，人們想著是不是可以將應用首頁先載入出來，然後讓首頁用不到的其他 JS 檔案再慢慢載入。但是由於 JS 引擎是單執行緒的，資料的組裝過程會受到阻塞，單靠瀏覽器端的話不容易實現。
SSR 重新煥發活力的契機就在於此，如果將組裝資料、渲染 HTML 頁面的過程放在服務端，而瀏覽器端只負責顯示接收到的 HTML 檔案，那首屏的開啟速度無疑會快很多。
SSR 的優缺點
那麼，SSR 技術到底有哪些優點呢？我們來列舉一下：
- 更快的響應時間，相對於客戶端渲染，服務端渲染在瀏覽器請求URL之後已經得到了一個帶有資料的HTML文字，瀏覽器只需要解析HTML，直接構建DOM樹就可以。
- 有利於 SEO ，可以將 SEO 的關鍵資訊直接在後臺就渲染成 HTML，而保證搜尋引擎的爬蟲都能爬取到關鍵資料，然後在別人使用搜尋引擎搜尋相關的內容時，你的網頁排行能靠得更前，這樣你的流量就有越高。
以上是 SSR 技術最主要的兩大優點，雖有優勢，但缺點也不容忽視：
- 相對於僅僅需要提供靜態檔案的伺服器，SSR中使用的渲染程式自然會佔用更多的CPU和記憶體資源。
- 一些常用的瀏覽器API可能無法正常使用，比如
window、docment和alert等，如果使用的話需要對執行的環境加以判斷。 - 開發除錯會有一些麻煩，因為涉及了瀏覽器及伺服器，對於SPA的一些元件的生命週期的管理會變得複雜。
- 可能會由於某些因素導致伺服器端渲染的結果與瀏覽器端的結果不一致。
總結
以上就是對 SSR 技術的一些簡要介紹，總結一下就是：
- SSR 提高 SPA 應用的首屏響應速度，有利於 SEO 最佳化。
- SSR 最適用於靜態展示頁面，如果頁面動態資料較多時需要謹慎使用。
- 是否使用 SSR、使用到什麼程度都需要開發者仔細權衡。
~
~本文完，感謝閱讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！
你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以餘韻相贈！
知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！
本作品採用《CC 協議》，轉載必須註明作者和本文連結