術(shù)語伺服器端渲染（SSR）經(jīng)常被誤解，許多人用它來描述早於其創(chuàng)建或技術(shù)上不合格的實(shí)踐。從 PHP 模板到 React 的同構(gòu)應(yīng)用程序，SSR 的定義不斷發(fā)展，圍繞它的混亂也隨之而來。

本文深入探討了 SSR 的起源、它的真正意義，以及為什麼理解其差異在現(xiàn)代 Web 開發(fā)中很重要。

所以這就是交易

在 PHP 時(shí)代我們還沒有 SSR。這個(gè)詞不存在。它創(chuàng)建於 2010 年代。在此之前沒有人稱這個(gè)東西為SSR。

他們叫它什麼？如果您相信維基百科，它被稱為伺服器端腳本（與客戶端腳本相對）。

有趣的事實(shí)：如果你查看維基百科，他們甚至沒有在 2021 年之前將“SSR”添加到 伺服器端腳本 文章中。以下是差異。老實(shí)說？我認(rèn)為這是錯(cuò)誤的。

---

在SSR之前，有...

在 React 引入「渲染」這個(gè)術(shù)語之前，我們沒有使用過這個(gè)詞。我們擁有的最接近的東西是伺服器端模板。這是一張舊快照。

這個(gè)想法很簡單：您可以使用靜態(tài)網(wǎng)站產(chǎn)生器或伺服器腳本來建立動態(tài)網(wǎng)頁。

有些人爭論道：「好吧，如果我使用伺服器模板，我就會在伺服器上渲染它們。」

---

問題所在

React 中的渲染並不總是意味著會產(chǎn)生 HTML 或 DOM。它產(chǎn)生 VDOM （虛擬 DOM）。當(dāng)您呼叫 renderToString 時(shí)，線條會變得模糊，因?yàn)樵?shí)際上會呈現(xiàn)為 HTML。

這就是為什麼人們開始聲稱他們的 PHP 應(yīng)用程式正在執(zhí)行 SSR。但問題是：這失去了實(shí)際 SSR 和常規(guī)動態(tài)腳本之間的差異。

---

主要區(qū)別

您只能對也可以在客戶端渲染的部分進(jìn)行 SSR。

例如：

您可以執(zhí)行此應(yīng)用程式兩次：一次在伺服器上，一次在客戶端上。

但是：

這不能在客戶端運(yùn)作。這裡沒有渲染——沒有「客戶端」或「伺服器端」的區(qū)別。這只是老式的動態(tài)腳本。

---

SR 與 SSR

由於沒有人再使用這些舊術(shù)語（也許在ASP 中除外），我想我要放棄並稱之為伺服器渲染(SR) 與伺服器端渲染( SSR）。

一個(gè)巨大的差別是保濕。

在 PHP 世界裡，沒有水合，但他們?nèi)匀淮_信自己有 SSR。這沒有道理。只有補(bǔ)充水分才能獲得SSR。

---

補(bǔ)水：關(guān)鍵

React 有兩個(gè)關(guān)鍵方法：

• renderToStaticMarkup：產(chǎn)生您不希望水合的 HTML。這更接近伺服器模板。
• renderToString：產(chǎn)生在客戶端上進(jìn)行水合的 HTML。這就是SSR。

Angular Universal 直到 2023 年才擁有 SSR。他們擁有的是 SR：在伺服器上產(chǎn)生 HTML，然後在腳本載入後將其丟棄，並將應(yīng)用程式作為 SPA 渲染到空的

中。標(biāo)籤。

這和 PHP 不一樣，但也跟真正的 SSR 不一樣。

---

早期

早期，React 應(yīng)用程式使用無頭 Chrome 進(jìn)行“預(yù)先渲染”，將其儲存為 HTML 字串。該快照進(jìn)入 CDN。從技術(shù)上講，甚至不需要伺服器來完成這項(xiàng)工作。 ？

這是一項(xiàng)毫無意義的努力，但Google曾經(jīng)推薦它用於搜尋引擎優(yōu)化。我曾經(jīng)找到那篇文章，但我不確定是否可以再次找到它。

---

為什麼關(guān)心這個(gè)？

React 伺服器元件 (RSC) 迫使我們重新檢視這個(gè)主題。

從技術(shù)上來說，RSC 不做 SSR。這讓很多人感到驚訝。

React 團(tuán)隊(duì)嘗試解釋它但放棄了。重點(diǎn)是伺服器元件只是模板－它們產(chǎn)生靜態(tài) HTML?？蛻舳嗽高^ SSR 產(chǎn)生 HTML 和 DOM。

---

Inertia.js 和 SSR

Inertia.js 也做了類似的區(qū)分。 PHP 在伺服器上運(yùn)行，但您的 JavaScript 應(yīng)用程式透過在伺服器上運(yùn)行以產(chǎn)生 HTML，然後在客戶端上進(jìn)行水化來獲得 SSR。

---

那麼，PHP可以做SSR嗎？

不。與 RSC 一樣，PHP 正在使用執(zhí)行 SSR 的步驟來執(zhí)行動態(tài)腳本 (SR)。

如果你使用 Hono 這樣的中間件運(yùn)行 React 應(yīng)用程序，將一些動態(tài)程式碼注入 HTML，然後呼叫 renderToString，感覺很相似。在這兩種情況下，都是帶有 SSR 步驟的 SR。

這就是為什麼當(dāng)人們聲稱「我們在 90 年代用 PHP 進(jìn)行了 SSR」時(shí)，會感到很瘋狂。

---

SSG 怎麼樣？

每次我提起這個(gè)問題，都會有人問起SSG。我不在乎。

術(shù)語靜態(tài)站點(diǎn)產(chǎn)生（SSG）實(shí)際上早於React。 SSG 意味著產(chǎn)生 HTML — 無需渲染或水合作用。你製作了 HTML 嗎？恭喜，您正在執(zhí)行 SSG。

---

反應(yīng)創(chuàng)新

React 框架引入了同構(gòu)應(yīng)用程式，使用水合作用在客戶端採用 HTML，而無需重新建立它。

HTML 必須由 SSR 產(chǎn)生。

---

Qwik 和“可恢復(fù)性”

Qwik 可以補(bǔ)水嗎？這是個(gè)大問題。

Qwik 開發(fā)人員說“不”，但我傾向於“是”。如果您喜歡 Qwik，則需要砍掉另一塊 SSR 並將其命名為 Resumability。

---

如果你喜歡聽討論而不是閱讀，你可以從這個(gè)關(guān)於 Go 中的 React 伺服器元件的播客節(jié)目中以音頻形式聽到更多這些論點(diǎn)

以上是大多數(shù)人對 SSR 一詞的誤解是什麼的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！