文章同步於it邦
前言
這兩天會講一點架構面的部分，分別是伺服器端渲染(SSR)以及客戶端渲染(CSR)
這次會從維護以及開發的角度分享這兩個架構上的區別以及各個的好處
還有我如何被SSR給弄瞎雙眼
介紹
伺服器端渲染(SSR, Server Side Render)，顧名思義就是在伺服器端做渲染的架構
有一個傳統的講法就是所謂的前後端不分離
這種作法通常會用於一個人開發的時候，或是極度要求SEO的場合
還有就是老專案非常常見這種作法
優點
- 在第一次讀取頁面的速度會比起CSR來的快
- SEO分數比較高，因為不需要載入過多的JavaScript或是CSS，但這點必須先說明，現在的Google爬蟲是可以解析JavaScript的，請不要覺得Google爬蟲完全沒辦法解析，這個已經是過時資訊了
缺點
- 第一次以外讀取的畫面的速度都比較慢，因為每次都需要重複載入
- Server Loading比起CSR來的重，畢竟渲染都在 Server
- 難以維護
- 難以維護
- 難!以!維!護!
為什麼難以維護，冷靜點好嗎
請聽我娓娓道來
SSR會將前端邏輯(顯示)以及後端邏輯(資料處理)全部混在一起
這會導致維護時需要確認的部分變得更多
再來，當這些程式緊密耦合時，連單元測試撰寫都會有困難，變成無法及早知道錯誤以及後人會不能夠確定function是否正常運作
然後要加一個新功能，更改的範圍也會比較大，因為你的程式碼緊密耦合在一起，根本不知道改了什麼會影響什麼
還有諸多問題我就不列出來了(三天三夜也講不完)
結語
當然當今越來越重視敏捷以及前端技術日新月異的狀況下，聽起來SSR能應用的場合其實真的不多
最常見的還是在一個人開發，且熟悉前後端邏輯的場合下，或許時間上比較省
明天要來講另一個渲染技術CSR，明天見
參考資料
教學 SSR 與 CSR 深度解析：從渲染方式到效能優化
[面試][前端]如何判斷專案要使用 CSR 還是 SSR？
瞭解 JavaScript 搜尋引擎最佳化 (SEO) 基礎知識