現代前端渲染機制: SSR vs. CSR

by Ben
SSR vs. CSR

前言

雖然是在當後端工程師
但不知怎的還是一直碰到前端渲染的東西……
不過沒關係
多學多健康 就讓我們來看看所謂 SSR (Server Side Render 後端渲染)
以及 CSR (Client Side Render 前端渲染)
兩者到底有什麼不同、優劣勢在哪,以及分別會被應用在什麼地方吧!

渲染機制

  • SSR: 渲染結果於 Server 產生
    意即 browser 在接到 server 傳來的資料時
    收到的就是完整的、渲染過後的HTML

  • CSR: 渲染結果於 Browser 產生
    意即 browser 在接受到 server 傳來的資料時
    收到的是 data (通常是json格式) 以及 template
    須要透過 JS 才會渲染成 HTML

  • 圖解
    file

影響

SEO

  • SSR: 有利
    由於 browser 是拿到渲染後、可以直接展示的結果
    意即,server 端傳到 browser 時傳送的是一個"真實"的頁面
    因此,當爬蟲爬到該頁面時,就可以分析這個頁面
    並進一步 index 頁面中的關鍵資料,於是有利 SEO

  • CSR: 不利
    有別於 SSR
    CSR 從上圖可知,browser 在展示完整頁面的過程中會發起兩次請求
    也就是說,爬蟲爬到該頁面時,無法拿到完整的資料並進行解析
    因此不利於 SEO

效能

  • SSR:
    "組版"的工作發生在 server,所以對 server 負擔較重

  • CSR:
    "組版"的工作發生在 browser,所以對 browser 負擔較重
    每次更新時只更新資料,所以使用者感覺速度較快

頁面應用

  • SSR: 主內容
    由於需要 SEO

  • CSR: 廣告、個人化內容
    由於畫面更新頻率較高或不須 SEO

比較

file

參考資料

https://medium.com/@hulitw/introduction-mvc-spa-and-ssr-545c941669e9
https://noob.tw/client-server-side-render/

You may also like

Leave a Comment