服務端渲染和客戶端渲染的對比

這裏結合art-template模板引擎說明。

首先了解下前端頁面中如何使用art-template

一、script 標籤導入包，當這個標籤導入完畢後，在window全局中就有了template 函數。

二、建立一個script標籤，內部是模板字符串

<script type="text/template" id="tmpl">

三、 var htmlStr = template('tmpl',{要渲染的數據對象})

四、將建立好的HTML字符串，追加到頁面中便可

 

重點來啦！

一、服務器端渲染

     每當有客戶端請求頁面了，服務器先在後端調用art-template，把指定的頁面預先在後端渲染後，而後經過res.end把這個渲染完畢的完整頁面，

返回給客戶端直接展現。

 優勢：對SEO友好，由於咱們通過服務器端渲染的頁面，在網絡中傳輸的時候，傳輸的是一個真實的頁面。所以，爬蟲客戶端，當爬到咱們的頁面後，

會分系咱們給他提供的這個頁面，此時，咱們頁面中的關鍵數據就會被爬蟲給收錄了。

缺點： 服務器端渲染，對服務器壓力比較打，可使用服務器端的頁面緩存技術，減輕服務器的渲染壓力；不適合先後端分離開發。

 

二、客戶端渲染

     每當用戶要請求某個頁面了，

 第一步，用戶須要先把這個頁面請求到客戶端，此時用戶拿到的頁面只是一個模板頁面。

 第二步，瀏覽器在解析模板頁面的時候，會發起art-template的二次資源請求，同時要發送Ajax請求，去服務器獲取數據

 第三步，在客戶端調用art-template 渲染HTML結構，並把渲染厚的htmlStr append 到頁面指定的容器中;

缺點： 對SEO至關不友好

優勢： 減輕了服務器端的渲染壓力;同時，最大的好處就是：可以實現先後端分離開發;

 

各自應用的場景：

一、當不須要對SEO友好的時候，推薦使用客戶端渲染;

二、當須要對 SEO友好的時候，推薦使用服務器端渲染