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 js代码以在网页上生成上述HTML结构。但是您始终可以直接在html文件中直接创建该html结构，而无需使用react。

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

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

现在要牢记服务器端渲染（SSR）和客户端渲染（CSR），将html发送到用户的浏览器，并使用<script>标签发送javascript。但是在CSR中，html文件[大多数时候]仅包含一个空的<body>。在CSR中，通过执行js在浏览器浏览器中创建必要的html节点。另一方面，在SSR中，在服务器中执行javascript只会将生成的html文件发送给客户端。这并不意味着html文件客户端接收到的不包含scripts。服务器上仅构建html结构。

更实际的情况...

请考虑html文件需要从外部API提取数据的情况。在CSR中，js发送到Web浏览器。浏览器执行该js并从浏览器中的API获取数据。在SSR中，服务器从API获取所需的数据，将其适当地包装在HTML标记周围，然后仅将html发送给客户端。不需要客户端从API提取数据，这已经由服务器完成。

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

客户端在服务器端渲染中究竟收到什么？

2 个答案: