服務端渲染（SSR)

時間 2019-11-05

標籤服務渲染 ssr 简体版

原文原文鏈接

導讀

本文主要是從三個方面學習服務端渲染，內容整理自多個博客。

服務端渲染是什麼？什麼是服務端渲染？（服務端渲染的運行機制）

爲何使用服務端渲染？服務端渲染解決了什麼問題？

什麼狀況下使用服務端渲染？（服務端渲染的應用實例與使用場景）

1、概念

首先，說到服務端渲染咱們要先對渲染這個概念有一個大概的瞭解css

渲染：就是將數據和模版組裝成htmlhtml

客戶端渲染（CSR）VS服務端渲染(SSR)

那麼，爲了更好的理解服務端渲染，咱們也頗有必要去了解一下客戶端渲染。將客戶端渲染與服務端渲染同時進行學習理解。前端

1.客戶端渲染

1.1概念

解釋一：客戶端渲染模式下，服務端把渲染的靜態文件給到客戶端，客戶端拿到服務端發送過來的文件本身跑一遍js，根據JS運行結果，生成相應DOM，而後渲染給用戶。vue

解釋二：html 僅僅做爲靜態文件，客戶端在請求時，服務端不作任何處理，直接以原文件的形式返回給客戶端客戶端，而後根據 html 上的 JavaScript，生成 DOM 插入 html。react

延伸：前端渲染的方式起源於JavaScript的興起，ajax的大熱更是讓前端渲染更加成熟，前端渲染真正意義上的實現了先後端分離，前端只專一於UI的開發，後端只專一於邏輯的開發，先後端交互只經過約定好的API來交互，後端提供json數據，前端循環json生成DOM插入到頁面中去。ajax

1.2.利弊

好處：網絡傳輸數據量小、減小了服務器壓力、先後端分離、局部刷新，無需每次請求完整頁面、交互好可實現各類效果json

壞處：不利於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}}）替換。

2、爲何使用服務端渲染，它解決的是什麼問題

簡單總結起來就是兩點：

首屏加載快 相比於加載單頁應用，我只須要加載當前頁面的內容，而不須要像 React 或者 Vue 同樣加載所有的 js 文件 SEO 優化 對於單頁應用，搜索引擎並不能收錄到 ajax 爬取數據以後而後再動態 js 渲染出來的頁面。

爲了更便於理解，下面幾段話摘自掘金小冊：

事實上，不少網站是出於效益的考慮才啓用服務端渲染，性能卻是在其次。假設 A 網站頁面中有一個關鍵字叫「前端性能優化」，這個關鍵字是 JS 代碼跑過一遍後添加到 HTML 頁面中的。那麼客戶端渲染模式下，咱們在搜索引擎搜索這個關鍵字，是找不到 A 網站的——搜索引擎只會查找現成的內容，不會幫你跑 JS 代碼。A 網站的運營方見此情形，感到很頭大：搜索引擎搜不出來，用戶找不到咱們，誰還會用個人網站呢？爲了把「現成的內容」拿給搜索引擎看，A 網站不得不啓用服務端渲染。但性能在其次，不表明性能不重要。服務端渲染解決了一個很是關鍵的性能問題——首屏加載速度過慢。在客戶端渲染模式下，咱們除了加載 HTML，還要等渲染所需的這部分 JS 加載完，以後還得把這部分 JS 在瀏覽器上再跑一遍。這一切都是發生在用戶點擊了咱們的連接以後的事情，在這個過程結束以前，用戶始終見不到咱們網頁的廬山真面目，也就是說用戶一直在等！相比之下，服務端渲染模式下，服務器給到客戶端的已是一個直接能夠拿來呈現給用戶的網頁，中間環節早在服務端就幫咱們作掉了，用戶豈不「美滋滋」？

3、什麼狀況下使用服務端渲染？

經過服務端渲染的概念以及它的兩個特色：首屏加載速度快、SEO優化。咱們知道，服務端渲染其實就是由瀏覽器作的一些事情，咱們放到了服務端去作，那麼對於掘金、簡書、CSDN、知乎等網站的搭建，這種在網上一搜搜出一堆東西的網站，SEO作的很好，應該多少都用到服務端渲染了吧？固然，作服務端渲染成本是高昂的。 vue全家桶或者react全家桶，都是推薦經過服務端渲染來實現路由的。服務端渲染並不是徹底之策（服務器稀少而寶貴），關於首屏渲染體驗以及SEO的優化方案不少，在不使用服務端渲染這個操做下，咱們最好的處理方式就是找尋替代優化方案。

關於在server端仍是在browser端渲染的選擇，更多的是要看業務場景。