前言

雖然是在當後端工程師 但不知怎的還是一直碰到前端渲染的東西…… 不過沒關係 多學多健康 就讓我們來看看所謂 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/