--- # System prepended metadata title: CSR與SSR概述比較 tags: [Web, Front End] --- ###### tags: `Web` `Front End` # CSR與SSR概述比較 此文章針對SSR與CSR作個解釋與比較 ### 名詞解釋 #### SSR,CSR - SSR(Server-Side Rendering) : 由Server端的 CPU 收到請求後，解析完整的 HTML 返回到使用者接收端，然後呈現網頁。 - CSR(Client-Side Rendering) : 由Server端回傳資料，再由前端利用 Javascript 產生 HTML 。 在執行期間「動態」去跟後端Server拿資料，再動態產生看到的那些元素。 #### 一般Web前端評估Performance - TTFB(Time to First Byte) : 關係到網路速度、Server 處理時間，具體計算是從使用者發出 Request 到接收到第一個 Byte 的時間。 - FP(First Paint) : 瀏覽器將像素渲染到螢幕上的開始時間，通常使用者會在此時看到白屏。 - FCP(First Contentful Paint) : 覽器將使用者看得見的內容渲染到螢幕上的開始時間，例如：文字、圖片。 - TTI(Time To Interactive) ：　使用者是否可與畫面互動，白話說就是使用者除了可看到畫面渲染完成外，還可進行輸入的動作。 ### Server Side Rendering (SSR) #### 簡述 每當有 client 發起對某個頁面的 request 時，server 會抓取對應的資料，建立完整的 HTML，最後再回傳給 client。簡單來說client不用下載大量的javascript，因為HTML渲染整個是在Server端完成在將HTML傳至client端的瀏覽器顯示。 ![](https://i.imgur.com/LlMqYnb.png) #### 優點 因為執行js渲染HTML在Server端完成，解析完整的HTML後傳回到使用者接收端呈現。在Server設備比Client設備性能好的情況下，他具有較好的FP與FCP性能，且因可直接避免傳送大量Javascript給Client。藉此可達到較好的TTI性能。 還有一點是SSR可以解決 SEO 的問題，因為爬蟲爬到的都是從 server 建立好並帶上資訊的完整 HTML。純CSR設計只有HTML Tag，Goole爬蟲抓不到相對應關鍵字，所以在熱搜效果上SSR的效果來的比CSR還好。 #### 缺點 因渲染在Server端，這樣的作法不論點擊什麼網頁上什麼功能，每一次都是將整個畫面重新繪製，如果在頻寬網路較差的情況下，會是一個較不好的體驗，因為要一直重新 loading 整個頁面。另外因伺服器取得資料後，需要計算畫面並整頁送出，運算及流量的負荷都太大。 SSR架構與邏輯會變得十分複雜，許多程式會需要分別在 server 與 client 做處理，也要特別小心不能在 server 端執行到包含如 window 等 browser 的 API，會將專案複雜度往上提高一個層級。 SSR Sample Code(Not MVC) ![](https://i.imgur.com/hgXsANJ.png) ### Client-Side-Rendering (CSR) #### 簡述 Client透過 Router 決定該渲染出哪些元素在畫面上或是該抓哪些 API data，當前端拿到資料以後，才用 JavaScript 動態的把那些內容填到網頁上面。而 routing 的過程也不再像以往ㄧ樣要重新去 server 抓取頁面造成頁面反白。 ![](https://i.imgur.com/z3FF28o.png) #### 優點 輕量好維護，不會跟後端的code參在一起。要拿掉或者修改某一支API會比SSR簡單。如果要動到前端的話，關注點分離，要解Bug會很明確清楚知道前後端哪邊的問題，且單元測試撰寫方便。 另外CSR最大的好處就是大量的工作都在瀏覽器中完成，服務端承擔更少的工作，這樣就可以處理更多的請求。 #### 缺點 需要仰賴前端下載大量 JavaScript 檔案，隨後才計算、渲染畫面，造成FP與FCP相對來說會比較差，在性能較差的行動裝置上更明顯；除此之外，也因為伺服器僅提供載入 JavaScript 的空殼 HTML，因此SEO效益很差。 ### Summary 現今Client端的設備(手機，電腦)都具有相當的水準，故SSR只剩SEO與FP較具優勢，但SEO的問題就算使用CSR角度開發，使用Hybrid也能將SEO的問題解決掉。故網頁開發上目前大都是選擇在Client Run Javascript渲染Html Code。且目前前端框架已非常成熟，除了常見MVC Pattern，大都也開始轉向MVVM Pattern，且也具有DI機制，可以彈性抽換真實的後端Data與MockData，在開發測試過程中是具有較佳的管理機制。 ### 參考 [Rendering on the Web](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) [Performance - Web Vitals](https://ithelp.ithome.com.tw/articles/10248039) [跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR](https://www.bnext.com.tw/article/49172/code-mvc-spa-ssr-html)