客戶端渲染（CSR）：

• 在客戶端渲染中，初始HTML內容很小，不包含頁面的完整內容。
• 頁面作為空殼加載，JavaScript捆綁負責渲染和填充內容。
• 渲染過程發生在客戶端，通常在瀏覽器中使用JavaScript。
• 數據獲取和渲染是動態執行的，隨著用戶與應用程序的交互而進行。
• 這種方法提供了更交互式的用戶體驗，但可能導致初始頁面加載時間較慢。
• 示例：單頁面應用程序（SPA），內容豐富的動態應用程序。

服務器端渲染（SSR）：

• 服務器端渲染涉及在服務器上呈現組件並將生成的HTML發送到客戶端。
• 服務器執行組件代碼並將完全呈現的HTML響應返回給客戶端。
• 這種方法提供更快的初始頁面加載時間和更好的搜索引擎優化，因為完整的HTML內容可供搜索引擎爬蟲使用。
• 數據可以在服務器上獲取和呈現，為客戶端提供預填充狀態。
• 服務器端渲染適用於需要快速提供初始內容並具有良好的搜索引擎可發現性的應用程序。
• 示例：通用或同構應用程序，內容驅動的網站。

渲染策略的選擇取決於諸如應用程序要求、性能目標、動態內容、SEO考慮以及開發者偏好等各種因素。在某些情況下，可以使用這些渲染方法的組合，例如在初始頁面加載時使用服務器端渲染，然後在後續交互中切換到客戶端渲染。

評估應用程序的具體需求並考慮每種渲染方法的權衡，以確定最合適的渲染方式是至關重要的。

為什麼SSR比CSR更快？

在比較服務器端渲染（SSR）和客戶端渲染（CSR）時，重要的是考慮性能的不同方面：

初始頁面加載時間：

• SSR可以提供更快的初始頁面加載時間，因為服務器呈現完整的HTML內容並將其發送到客戶端。客戶端接收到一個完全呈現的頁面，準備顯示。
• 另一方面，CSR需要客戶端下載最小的HTML內容，然後執行JavaScript進行渲染和填充頁面。這一額外步驟可能導致內容對用戶可見的時間較長。

交互時間（TTI）：

• TTI指的是頁面變得交互和對用戶輸入響應的時間點。
• SSR可以提供更快的TTI，因為初始HTML內容可能已包含一些預渲染的數據和功能。用戶可以在頁面加載後立即開始與頁面交互。
• CSR可能具有較慢的TTI，因為需要下載、執行JavaScript，然後獲取附加數據，頁面才能完全交互。

後續頁面導航：

• 一旦初始頁面加載完成，CSR中的後續頁面導航可能更快，因為客戶端JavaScript框架可以處理導航和渲染，無需往返服務器。
• 另一方面，SSR可能涉及每次頁面導航都需要額外的服務器請求，這可能引入一些延遲。

值得註意的是，感知速度和性能可能根據網絡條件、服務器響應時間和應用程序的復雜性等因素而有所不同。SSR的性能優勢在於初始頁面加載，特別是對於內容豐富或數據驅動的應用程序。

最終，SSR和CSR之間的選擇取決於您的應用程序的具體需求。一些應用程序可能更適合SSR，以提供更快的初始呈現和更好的SEO，以更好地說明：搜索引擎主要爬行和索引HTML內容。通過使用SSR，服務器將完全呈現的HTML頁面發送到搜索引擎爬蟲，使其能夠輕松解析和理解內容。然而，其他應用程序可能更傾向於CSR，

因為它具有動態和交互性。混合方法，例如在關鍵頁面使用SSR，然後在後續交互中使用CSR，也可以考慮，以在性能和交互性之間取得平衡。