在現代 Web 開發領域，經常會出現幾個縮寫詞：SSR、CSR、ISR 和 SSG。這些術語對于理解 Web 應用程序的構建和交付方式至關重要。在本文中，我們將深入探討這些縮寫詞的含義以及它們如何影響 Web 開發。

1.SSR（服務器端渲染）

「服務器端渲染」（SSR）是一種在服務器上渲染網頁，然后將完全渲染的 HTML 頁面發送到客戶端瀏覽器的技術。它的工作原理如下：

當用戶請求網頁時，服務器會獲取數據、生成 HTML，并將完整的頁面發送到瀏覽器。
然后瀏覽器立即顯示頁面，同時下載并執行 JavaScript 和 CSS 文件。
SSR 以其 SEO 優勢而聞名，因為搜索引擎可以輕松抓取 HTML 內容并為其建立索引。

2.CSR（客戶端渲染）

「客戶端渲染」（CSR）是一種將網頁最初作為空 HTML shell 傳遞給瀏覽器的技術。然后，客戶端 JavaScript 動態獲取數據并在瀏覽器中呈現頁面。企業社會責任的運作方式如下：

當用戶請求頁面時，服務器會發送最小的 HTML 結構以及 JavaScript 和 CSS 文件。
瀏覽器加載這些文件并執行 JavaScript，從而獲取數據并生成內容。
CSR 提供了更具交互性的用戶體驗，但可能會導致初始頁面加載速度變慢和 SEO 挑戰。

3.ISR（增量靜態再生）

「增量靜態再生」（ISR）是一種結合了 SSR 和 SSG 優點的混合方法。它允許在構建時和運行時部分重新生成靜態頁面。ISR 的工作原理如下：

在構建過程中，某些頁面被預呈現為靜態 HTML，而其他頁面則被標記為“過時”。
當用戶請求“過時”頁面時，服務器會即時重新生成該頁面并緩存結果以供后續請求使用。
ISR在性能和實時數據之間取得了平衡，使其適合動態但經常訪問的頁面。

4.SSG（靜態站點生成）

「靜態站點生成」（SSG）是一種在構建時生成網頁并用作純 HTML 文件的技術。SSG 是最直接的方法：

在構建過程中，所有頁面都預渲染為靜態 HTML 文件，包括構建時已知的任何數據。
當用戶請求頁面時，服務器僅提供預先構建的 HTML 文件。

SSG 提供出色的性能、可擴展性和安全性，但可能不適合高度動態的內容。

何時使用每種方法

• 「SSR」：當 SEO 至關重要并且需要盡快向用戶交付內容時，請使用 SSR。它非常適合內容驅動的網站和電子商務平臺。
• 「CSR」：當您需要高度交互和動態的 Web 應用程序時，請考慮 CSR。它非常適合單頁應用程序 (SPA) 和嚴重依賴用戶交互的 Web 應用程序。
• 「ISR」：當您需要性能和實時數據更新之間的平衡時，選擇 ISR。它適用于產品可用性不斷變化的博客、新聞網站和電子商務網站。
• 「SSG」：當您的內容不經常更改且性能優先時，請選擇 SSG。它非常適合博客、文檔網站和營銷頁面。

結論

了解 SSR、CSR、ISR 和 SSG 對于在 Web 開發中做出明智的決策至關重要。每種方法都有其優點和缺點，選擇取決于項目的具體要求。通過有效地利用這些技術，您可以創建提供最佳用戶體驗和性能的 Web 應用程序。

原文鏈接：

https://dev.to/dj1samsoe/understanding-ssr-csr-isr-and-ssg-a-comprehensive-guide-add