如何判断一个网站是客户端渲染还是服务器端渲染？

Question

因此，SSR表示服务器发送打包好的HTML、CSS和JS文件，而CSR仅发送空的HTML，然后客户端再获取JS以填充页面上的数据。

我想将其可视化。是否有任何方法可以查看“空的HTML”或“打包好的HTML CSS JS”文件，以便我可以更清楚地了解我所看到的内容。

任何帮助都将不胜感激。非常感谢。

- user13618351

---

查看JS文件，看是否有进行任何AJAX调用。 - Wais Kamal

按下Ctrl+U，你会看到服务器发送的HTML文档。如果它大部分为空，那么你正在处理CSR；如果它已经包含所有内容，那么它是SSR。 - user5734311

我应该看哪里？是在昆虫元素中还是其他地方？ - user13618351

右键单击 / 查看源代码 - Robin Zigmond

嗯，我看到的所有网站都有HTML、CSS和脚本。有没有完全基于客户端渲染的网站，我可以看到一个空白文档？@ChrisG - user13618351

这里有一个React演示计算器: https://ahfarmer.github.io/calculator/ (显然不是完全空的，但是这是一个很好的最小化HTML的例子) - user5734311

Answer 1

实际上，服务器端渲染和客户端渲染之间没有明确的分界线。大多数人称为CSR的应用程序仍然在其服务器响应中发送html，有时甚至包含大量的html。而大多数人称为SSR的应用程序仍会根据用户事件对其页面的html进行微小的调整。

例如，假设您正在为底部带有用户评论的文章提供页面服务。您的服务器可以执行以下操作：

1. 在发送完成的HTML到客户端之前，在服务器端构建所有HTML，包括所有评论的内容。这就是SSR。 2. 构建一个大纲并添加很多html（导航、空框等），然后发送该纲要。特定的评论和文章内容将在客户端填充。这将被称为CSR。 3. 发送附有脚本的空HTML文档，这些脚本将填充整个内容。这绝对是CSR。

对于我来说，完全SSR应用程序最明显的特征是，如果您保存某些内容/做出持久更改，页面通常会作为保存的一部分重新加载。CSR应用程序更可能在没有完全重新加载的情况下保存，并重新绘制页面的某些部分。

最后注意一点，要查看浏览器中呈现了多少HTML，您可以将“查看源代码”与开发工具中的“元素检查器”进行比较。如果右键单击 -> 查看源代码，您将看到服务器发送的内容。但是，如果右键单击 -> 检查元素并使用开发工具查看HTML，则会看到所有内容的当前状态，即在完全客户端渲染后。如果它们是相同的，则这是一个SSR应用程序，它们越不相同，则CSR越多。

- arbuthnott

---

如果我理解正确的话，在这里，#2通常被称为最初在服务器端渲染的补水内容。至少在React中是这样。 - coppereyecat

Answer 2

使用服务器端语言（PHP/Python/perl）执行cURL并获取初始负载。或者进行wget，无论哪种方式都可以。这可能是一个HTML文件。

然后在客户端：

const ser = new XMLSerializer;
let dump = ser.serializeToString(document.documentElement);

您可以使用间隔重复上述步骤并与初始步骤进行比较。在服务器端，如果您使用nodeJS，可以使用puppeteer的无头浏览器来执行上述操作。

您可以将输出提供给git diff以获得概述。

- ibrahim tanyalcin