在現(xiàn)代 Web 開發(fā)領(lǐng)域，經(jīng)常會出現(xiàn)幾個縮寫詞：SSR、CSR、ISR 和 SSG。這些術(shù)語對于理解 Web 應(yīng)用程序的構(gòu)建和交付方式至關(guān)重要。在本文中，我們將深入探討這些縮寫詞的含義以及它們?nèi)绾斡绊?Web 開發(fā)。

1.SSR（服務(wù)器端渲染）

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

當(dāng)用戶請求網(wǎng)頁時，服務(wù)器會獲取數(shù)據(jù)、生成 HTML，并將完整的頁面發(fā)送到瀏覽器。
然后瀏覽器立即顯示頁面，同時下載并執(zhí)行 JavaScript 和 CSS 文件。
SSR 以其 SEO 優(yōu)勢而聞名，因為搜索引擎可以輕松抓取 HTML 內(nèi)容并為其建立索引。

2.CSR（客戶端渲染）

「客戶端渲染」（CSR）是一種將網(wǎng)頁最初作為空 HTML shell 傳遞給瀏覽器的技術(shù)。然后，客戶端 JavaScript 動態(tài)獲取數(shù)據(jù)并在瀏覽器中呈現(xiàn)頁面。企業(yè)社會責(zé)任的運作方式如下：

當(dāng)用戶請求頁面時，服務(wù)器會發(fā)送最小的 HTML 結(jié)構(gòu)以及 JavaScript 和 CSS 文件。
瀏覽器加載這些文件并執(zhí)行 JavaScript，從而獲取數(shù)據(jù)并生成內(nèi)容。
CSR 提供了更具交互性的用戶體驗，但可能會導(dǎo)致初始頁面加載速度變慢和 SEO 挑戰(zhàn)。

3.ISR（增量靜態(tài)再生）

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

在構(gòu)建過程中，某些頁面被預(yù)呈現(xiàn)為靜態(tài) HTML，而其他頁面則被標(biāo)記為“過時”。
當(dāng)用戶請求“過時”頁面時，服務(wù)器會即時重新生成該頁面并緩存結(jié)果以供后續(xù)請求使用。
ISR在性能和實時數(shù)據(jù)之間取得了平衡，使其適合動態(tài)但經(jīng)常訪問的頁面。

4.SSG（靜態(tài)站點生成）

「靜態(tài)站點生成」（SSG）是一種在構(gòu)建時生成網(wǎng)頁并用作純 HTML 文件的技術(shù)。SSG 是最直接的方法：

在構(gòu)建過程中，所有頁面都預(yù)渲染為靜態(tài) HTML 文件，包括構(gòu)建時已知的任何數(shù)據(jù)。
當(dāng)用戶請求頁面時，服務(wù)器僅提供預(yù)先構(gòu)建的 HTML 文件。

SSG 提供出色的性能、可擴展性和安全性，但可能不適合高度動態(tài)的內(nèi)容。

何時使用每種方法

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

結(jié)論

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

原文鏈接：

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