如何查看网站是客户端渲染还是服务器端渲染？

Question

因此，SSR意味着服务器发送完全打包的 html、css 和 js 文件，而CSR只发送空 html，客户端再次获取 js 以填充页面上的数据。

我想想象一下这一点。有什么方法可以让我看到“空的 html”或“完全打包的 html css js”文件，以便我可以更清楚地了解我所看到的内容。

任何帮助，将不胜感激。多谢。

Answer 1

实际上，服务器端渲染和客户端渲染之间并没有严格的界限。大多数调用 CSR 的应用程序仍然会在服务器响应中发送回 html，有时甚至发送大量 html。大多数称为 SSR 的应用程序仍然会对其页面的 html 进行细微调整，以响应用户事件。

例如，假设您正在为一篇文章提供一个页面，该文章的底部有用户评论。您的服务器可以：

1. 在将完整的 html 发送到客户端之前，在服务器上构建所有 html，包括所有注释的内容。这就是SSR。
2. 在那里构建一个包含大量 html 的大纲（导航、要填充的空框等），然后发送。具体评论和文章内容在客户端填写。这就是所谓的企业社会责任。
3. 发回一个带有脚本的空 html 文档，该脚本将填充整个内容。这绝对是企业社会责任。

对我来说，完全 SSR 应用程序的最大特点是，如果您保存某些内容/进行一些将持续存在的更改，则页面通常会在保存过程中重新加载。CSR 应用程序更有可能保存并重绘页面的部分内容，而无需完全重新加载。

最后一点，要查看浏览器中渲染了多少 html，您可以view source与element inspector开发工具中的进行比较。如果您右键单击 -> 查看源代码，您将准确地看到服务器发送的内容。但是，如果您右键单击 -> 检查元素并使用开发工具查看 html，您将看到现在的一切，即在完整的客户端渲染之后。如果它们相同，则这是一个 SSR 应用程序，它们越不相同，CSR 就越多。

Answer 2

使用服务器端语言（PHP/Python/perl）并执行 cURL 并获取初始负载。或者做一个 wget，无论你适合什么。这可能是一个 html 文件。

然后在客户端：

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

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

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