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

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的轮廓（导航，要填充的空白框等），然后发送该轮廓。具体评论和文章内容将在客户端填充。这就是所谓的CSR。
3. 发回带有附件的脚本的空html文档，该脚本将填写全部内容。这绝对是企业社会责任。

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

最后一条注释，要查看您的浏览器中呈现了多少html，可以在开发工具中将view source与element inspector进行比较。如果右键单击->查看源，则将确切看到服务器发送的内容。但是，如果右键单击-> inspect元素并使用开发工具查看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以获得概述。