CSR 與 SSR：網頁怎麼生成的秘密

當你用瀏覽器打開一個網站時，網頁上的內容是怎麼跑出來的呢？這裡我們來介紹兩個重要的方式：CSR（客戶端渲染）和SSR（伺服器端渲染）。它們就像是兩種不同的方式，讓網頁內容在螢幕上呈現。

•	CSR：Client Side Rendering（客戶端渲染）
•	SSR：Server Side Rendering（伺服器端渲染）

什麼是 SSR（伺服器端渲染）？

想像你點餐，餐廳廚師幫你做好整份菜，然後端上桌。
SSR 就像是廚師先幫你準備完整的網頁（HTML檔案），直接送到你的瀏覽器。

• 當你請求網頁時，伺服器會先把整個網頁內容做好，然後傳給瀏覽器。
• 瀏覽器收到已經完成的網頁，可以馬上顯示出內容。
• 優點是載入快，對搜尋引擎（SEO）友善，因為網頁內容是完整的。
• 缺點是伺服器工作量大，如果很多人同時使用，伺服器可能會變慢。

什麼是 CSR（客戶端渲染）？

現在想像你點完菜，廚師先給你冷凍食材，然後你自己回家慢慢煮。
CSR 就像是伺服器只給你一些資料或空架構，由瀏覽器自己組裝並顯示網頁。

• 伺服器主要傳送一個空白的頁面和一些資料（像是JSON格式）。
• 瀏覽器利用JavaScript程式，在你自己的裝置上把網頁內容「組裝」起來。
• 優點是伺服器少負擔，頁面互動流暢，更新迅速。
• 缺點是開始看到內容的時間比較晚，且早期對搜尋引擎不太友好（但現在狀況已提升）。

簡單比較表

為什麼要了解 CSR 和 SSR？

不同網站和應用程式會根據需求選擇不同的渲染方式。有些重視搜尋排名和快速顯示，就偏向SSR；有些強調使用者操作流暢，就會用CSR。也有時候會混合使用，發揮兩者優點。

這裡分享到的CSR與SSR，是網頁世代的重要知識，幫助你更了解背後的運作。下一篇，我們會繼續介紹HTTP和API的基礎知識，敬請期待！