大多数人对 SSR 一词的误解

# Web 开发# JavaScript

术语 **服务器端渲染 (SSR)** 经常被误解，许多人用它来描述早于其创建或技术上不符合要求的做法。从 PHP 模板到 React 的同构应用，SSR 的定义已经演变 — 围绕它的困惑也随之演变。

本文深入探讨了 SSR 的起源、它的真正含义以及为什么理解它的区别在现代 Web 开发中如此重要。

事情是这样的

在 PHP 时代，我们还没有 SSR。这个术语不存在。它是在 2010 年代创建的。在那之前没有人把这个东西称为 SSR。

他们怎么称呼它？如果你相信维基百科，它被称为**服务器端脚本**（与客户端脚本相对）。

有趣的事实：如果你查看 Wikipedia，你会发现直到 2021 年，他们才将“SSR”添加到 **服务器端脚本** 文章中。这就是区别所在。说实话？我认为这是错误的。

在 SSR 之前，有...

在 React 引入“渲染”一词之前，我们从未使用过这个词。我们最接近的词是**服务器端模板**。这是一张旧快照。

这个想法很简单：您可以使用**静态站点生成器**或**服务器脚本**来构建动态网页。

有些人争辩说：“好吧，如果我使用服务器模板，我就会在服务器上渲染它们。”

问题在于

React 中的渲染并不总是意味着生成 HTML 或 DOM。它生成 **VDOM**（虚拟 DOM）。调用“renderToString”时，界限变得模糊，因为组件实际上被渲染为 HTML。

这就是人们开始声称他们的 PHP 应用程序正在执行 SSR 的原因。但问题是：这失去了实际 SSR 和常规动态脚本之间的区别。

主要区别

您只能对可以在客户端上呈现的部分执行 SSR。

例如：

const App = () => 
Hello
;

您可以运行此应用程序两次：一次在服务器上，一次在客户端上。

但：

这无法在客户端上运行。这里没有渲染——没有“客户端”或“服务器端”的区别。这只是老式的动态脚本。

SR 与 SSR

Image description

由于没有人再使用这些旧术语（也许除了 ASP），我想我放弃并只将其称为**服务器渲染（SR）**与**服务器端渲染（SSR）**。

一个巨大的区别是**水合**。

在 PHP 世界中，没有 hydration，但他们仍然确信他们有 SSR。这没有道理。只有拥有 hydration 才能拥有 SSR。

补水：关键

React 有两个关键方法：

  • renderToStaticMarkup：生成不需要合并的 HTML。这更接近于服务器模板。
  • renderToString：生成在客户端上可用的 HTML。这就是 SSR。

    • Angular Universal 直到 2023 年才拥有 SSR。他们所拥有的是 SR：在服务器上生成 HTML，然后在脚本加载后将其删除，并将应用程序作为 SPA 呈现到空的 `` 标签中。

    这与 PHP 不一样，但也与真正的 SSR 不一样。

    早期

    早期，React 应用使用 Headless Chrome 进行“预渲染”，以将其保存为 HTML 字符串。该快照进入 CDN。从技术上讲，甚至不需要服务器来实现这一点。😂

    这是一次毫无意义的努力，但谷歌曾一度推荐它用于 SEO。我曾经找到过那篇文章，但不确定是否还能再次找到它。

    为什么要关心这个？

    React Server Components（RSC）迫使我们重新审视这个主题。

    从技术上讲，RSC 不做 SSR。这让很多人感到惊讶。

    React 团队曾尝试解释，但最终放弃了。要点是服务器组件只是模板——它们生成静态 HTML。客户端组件通过 SSR 生成 HTML 和 DOM。

    Inertia.js 和 SSR

    Inertia.js 也做了类似的区分。PHP 在服务器上运行，但 JavaScript 应用则通过在服务器上运行生成 HTML 然后在客户端上进行处理来实现 SSR。

    那么，PHP 可以做 SSR 吗？

    不。与 RSC 一样，PHP 正在执行 **动态脚本 (SR)**，其中有一个执行 SSR 的步骤。

    如果你使用像 Hono 这样的中间件来运行 React 应用，将一些动态代码注入 HTML，然后调用“renderToString”，感觉类似。在这两种情况下，都是 SR，并带有 SSR 的步骤。

    这就是为什么当人们声称“我们在 90 年代用 PHP 做过 SSR”时会感到疯狂。

    SSG 怎么样？

    每次我提起这件事，总有人问起 SSG。我不关心。

    术语“静态站点生成 (SSG)”实际上早于 React。SSG 表示生成 HTML — 无需渲染或水合。您生成了 HTML 吗？恭喜，您正在使用 SSG。

    React 创新

    React 框架引入了**同构应用程序**，使用 hydration 在客户端上采用 HTML 而无需重新创建它。

    该 HTML 必须由 SSR 生成。

    Qwik 和“可恢复性”

    Qwik 能补水吗？这是个大问题。

    Qwik 开发人员说“不”，但我倾向于“是”。如果您喜欢 Qwik，则需要砍掉另一部分 SSR 并将其称为 **可恢复性**。

    如果你更喜欢听讨论而不是阅读，那么你可以从有关 Go 中的 React Server Components 的播客节目中以音频形式听到更多这些论点