客户端在服务端渲染中到底接收到什么？

Question

我一直在研究服务器端与客户端渲染，但大多数资料都在非常基础的层面上解释了这两个概念。

我了解服务器端呈现在服务器中呈现网页并将其发送到客户端。这样，当浏览器在后台下载相关的 JS 时，客户端可以立即查看页面。

但是在服务器上究竟呈现了什么？根据我的阅读，渲染网页涉及多个步骤，包括创建 DOM 树，然后是 CSSOM 树和渲染树。然后是排版、绘画、合成等操作。

服务器在向客户端发送响应之前是否处理了所有这些步骤或其中的一部分？最终，客户端在请求网页时会收到什么？

Answer 1

HTML 已组装，但没有布局、绘画、合成或类似的东西。

唯一的渲染是 HTML 文档。

通常，这种技术最引人注目的原因是 SEO。即使是运行您的 JavaScript 不会一直这样做的爬虫（例如 Google），它们往往对运行会做什么以及如何做有严格的限制长.

Answer 2

考虑以下反应代码。

class Square extends React.Component {
  render() {
    return (
      <button className="square">
         {this.props.value}      
      </button>
   );
  }
}

ReactDOM.render(
  <React.StrictMode>
    <Square />
  </React.StrictMode>,
  document.getElementById('root')
);

这段代码没有任何神奇之处。 它只是使下面的html代码。

<div id="root">
    <button class="square">
       /* What ever the props passed to square lives here. */
    </button>
</div>

我不知道上面的 react 代码是否正常工作，因为我什至没有花时间审查它。这只是一个示例代码，但您可以理解。

react js代码执行后在网页上生成上述HTML结构。但是您始终可以直接在 html 文件中创建 html 结构，而无需使用 react。

在客户端渲染，服务器发送客户端javascript（不是html）。然后客户端的网络浏览器执行 javascript 并根据 js 代码创建 html 结构。

在服务器端渲染，服务器执行提供的javascript并创建适当的html结构并将其放入index.html（或适当的 html 文件）。当用户请求 html 文件时，服务器直接将 html 发送给用户，而不是 javascript.

现在请记住，在服务器端呈现 (SSR) 和客户端呈现 (CSR) 中，html 发送到用户浏览器，javascript 使用 <script> 标记发送.但在 CSR 中，html 文件只包含一个空的 <body> [大多数时候]。在CSR中，通过执行js在浏览器browser中创建必要的html节点。另一方面，SSR 在服务器中执行 javascript 只将结果 html 文件发送给客户端。这并不意味着客户端收到的 html 文件不包含 scripts。服务器上仅构建了 html 结构。

更实际的场景...

考虑 html 文件需要从外部 API 获取数据的情况。在 CSR 中，js 被发送到 web broswer。浏览器执行该js并从浏览器中的API获取数据。在 SSR 中，服务器从 API 中获取所需的数据，将其适当地包裹在 HTML 标签周围，并且只将 html 发送给客户端。客户端不需要从 API 抓取数据，服务器已经完成了。

渲染意味着组装html。不渲染像素或绘画或其他任何东西。在 SSR 中，渲染发生在服务器和 CSR 中，渲染发生在浏览器中。

客户端在服务端渲染中到底接收到什么？

What exactly does client receive in server-side rendering?

html

javascript

css

dom

server-side-rendering