SSR 和 CSR 的區別

伺服器端渲染（SSR）和客戶端渲染（CSR）是網頁載入和顯示的兩種不同方式您的瀏覽器。讓我以簡單的方式為您分解：

1. 客戶端渲染（CSR）

• 工作原理：當您開啟網站時，您的瀏覽器會先下載一個空白 HTML 頁面和一些 JavaScript 程式碼。然後 JavaScript 在您的裝置（客戶端）上運行並在您的螢幕上建立網頁。

• 範例： 假設您正在開啟一盒樂高積木，系統會向您提供說明（JavaScript）。然後，您在收到區塊（來自伺服器的資料）後自行建立樂高模型（網頁）。

• 優點：

  • 頁面載入後，在頁面之間導航時速度非常快，因為它不需要不斷從伺服器載入新的 HTML。
  • 適用於 Facebook 或 Gmail 等單頁應用程式 (SPA)，這些應用程式的頁面不會經常重新載入。

• 缺點：

  • 首頁可能需要更長的時間才能顯示，因為您的瀏覽器需要下載 JavaScript 並建立頁面才能看到任何內容。
  • 不利於 SEO（搜尋引擎優化），因為搜尋引擎可能無法輕鬆閱讀使用 JavaScript 建立的頁面。

2. 伺服器端渲染（SSR）

• 工作原理：在SSR中，伺服器完成建置網頁的工作。當您造訪網站時，伺服器會直接將完整建置的 HTML 頁面傳送到您的瀏覽器，以便立即顯示。

• 範例：想像一下，不是給你樂高積木，而是有人已經為您建立了模型（伺服器），然後將其完全完成（網頁）交給您。

• 優點：

  • 初始載入時間更快，特別是對於使用較慢設備的用戶，因為伺服器承擔了大部分繁重的工作。
  • 更適合 SEO，因為搜尋引擎可以輕鬆讀取預先建立的 HTML。

• 缺點：

  • 頁面之間的導航可能會比較慢，因為每個新頁面都需要從伺服器取得並重建。
  • 如果很多人嘗試同時造訪網站，伺服器可能會變得不堪重負，因為它需要為每個使用者建立每個頁面。

概括：

• CSR： 瀏覽器使用 JavaScript 建立網頁。加載後速度更快，但開始時速度較慢。
• SSR： 伺服器建立網頁並將其傳送到瀏覽器。開始時速度較快，但頁間導航速度較慢。

許多現代應用程式使用組合這兩種技術來獲得兩全其美的效果！

以上是SSR 和 CSR 的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！