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

2021-09-27 11:57:21 字數 849 閱讀 7959

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

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

1、script 標籤匯入包,當這個標籤匯入完畢後,在window全域性中就有了template 函式。

2、建立乙個script標籤,內部是模板字串

3、 var htmlstr = template('tmpl',)

4、將建立好的html字串,追加到頁面中即可

重點來啦!

1、伺服器端渲染

每當有客戶端請求頁面了,伺服器先在後端呼叫art-template,把指定的頁面預先在後端渲染後,然後通過res.end把這個渲染完畢的完整頁面,

返回給客戶端直接展示。

優點:對seo友好,因為我們經過伺服器端渲染的頁面,在網路中傳輸的時候,傳輸的是乙個真實的頁面。因此,爬蟲客戶端,當爬到我們的頁面後,

會分系我們給他提供的這個頁面,此時,我們頁面中的關鍵資料就會被爬蟲給收錄了。

缺點: 伺服器端渲染,對伺服器壓力比較打,可以使用伺服器端的頁面快取技術,減輕伺服器的渲染壓力;不適合前後端分離開發。

2、客戶端渲染

每當使用者要請求某個頁面了,

第一步,使用者需要先把這個頁面請求到客戶端,此時使用者拿到的頁面只是乙個模板頁面。

第二步,瀏覽器在解析模板頁面的時候,會發起art-template的二次資源請求,同時要傳送ajax請求,去伺服器獲取資料

缺點: 對seo相當不友好

優點: 減輕了伺服器端的渲染壓力;同時,最大的好處就是:能夠實現前後端分離開發;

各自應用的場景:

1、當不需要對seo友好的時候,推薦使用客戶端渲染;

2、當需要對 seo友好的時候,推薦使用伺服器端渲染

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

這裡結合art template模板引擎說明。首先了解下前端頁面中如何使用art template 1 script 標籤匯入包,當這個標籤匯入完畢後,在window全域性中就有了template 函式。2 建立乙個script標籤,內部是模板字串 3 var htmlstr template tm...

服務端渲染和客戶端渲染區別?

首先,介紹一下 spa seo ssr 三者的區別 seo search engine optimization 搜尋引擎優化,利用搜尋引擎的規則提高 在有關搜尋引擎內的自然排名。我們之前說 spa 單頁面應用,通過 ajax 獲取資料,這就難保證我們的頁面能被搜尋引擎收到。並且有一些搜尋引擎不支援...

服務端渲染和客戶端渲染的區別

1 首先先來了解三個專業名詞 1 spa 單頁面應用 只有一張web頁面的應用,是一種從web伺服器載入的富客戶端,單頁面跳轉僅重新整理區域性資源,公共資源僅需載入一次,常用於pc端 購物等 優點 頁面之間切換快,減少了伺服器的壓力 2 seo 搜尋引擎優化,利用搜尋引擎的規則提高 在有關搜尋引擎的...