0%

【Day-14】客戶端渲染(CSR)

文章同步於it邦

前言

廢話不多說,今天直接來介紹客戶端渲染(CSR)

介紹

客戶端渲染(CSR, Client-Side Rendering),顧名思義就是在瀏覽器端(客戶)去做網頁渲染的工作

通常會和一個概念一起討論 - 前後端分離

優點

  1. 不需要一直重新載入頁面
  2. 可維護性比起SSR高出許多,通常都會導入前後端分離的方式,使各自的邏輯以及職責明確切割

缺點

  1. SEO分數會比起SSR來的低一點,不過目前前端有nuxt.js來解決普遍SEO分數過低的狀況
  2. 載入有時候會比較久,因為不論需不需要都會直接下載大量資源

從開發、維護以及商業的角度來看CSR以及前後端分離

一個軟體專案,通常花最久的時間地都不會是寫Code
而是前期的討論維護

為什麼要寫這個主體 - 軟體不是會跑就好,因為有的公司會為了快速開發而放任工程師們有寫出東西就好
通常這種公司都會是所謂的一條龍,也就是同一個人負責前後端,所以那個人就會以自己方便為主來做開發
最終的下場就是專案難以維護,程式跟人通常人跑得比程式快,還有創造富有挑戰性職缺

但你永遠不知道客戶哪天會想要增加需求,而且人的慾望是無窮無盡的,當架構以及程式碼的品質不到位的時候,就很容易持續產出爛架構跟爛扣
此時維護的時間就會呈直指數成長,最嚴重可能導致無法產出

你會說很多專案都不需要維護,交錢就了事了,當然你要以這個比較方便的角度來說,確實是如此
不過程式會寫會跑是一回事,寫得好又是另一回事

舉個例子

台灣的交通來說,有駕照是一回事,看看一堆老人駕照都放了幾百年都沒去開,但她依然能夠有開車的權利,只是極度讓人不放心

再來假設這個老人會開車,車子能跑不要出意外就會開車,不過他可能路上上演東京甩尾,轉個彎就要把你拋出去或是常常大腳油門起步就直接暴衝,搞得你沒看到正妹帥哥就暈,抱歉那是暈船

開得好的話,它可以讓你舒舒服服地抵達目的地,而且也正確的遵守駕駛的禮儀(禮讓行人、不隨意變換車道等等),這個上述的檔次就拉開來了吧

最後以商業上來說,當我的架構是彈性的,我就可以比較容易且快速地應對各種需求,此時對於在客戶間的評價也會比較高。

結語

第二週總算結束了,下星期會先講一下clean coder再接著說一些http協議的部分

參考資料

教學 SSR 與 CSR 深度解析:從渲染方式到效能優化
[面試][前端]如何判斷專案要使用 CSR 還是 SSR?
瞭解 JavaScript 搜尋引擎最佳化 (SEO) 基礎知識