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

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

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

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

2.CSR（客戶端渲染）

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

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

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

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

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

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

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

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

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

何時(shí)使用每種方法

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

結(jié)論

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

原文鏈接：

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