客户端在服务器端渲染中到底接收到了什么？
我一直在研究服务器端渲染与客户端渲染，但大多数资料来源都在非常基本的层面上解释了这两个概念。
据我了解，服务器端渲染会在服务器中渲染网页并将其发送到客户端。这样，客户端可以立即查看页面，同时浏览器在后台下载相关的 JS。
但服务器上到底渲染了什么？据我所知，渲染网页涉及多个步骤，包括创建 DOM 树、CSSOM 树和渲染树。然后是布局、绘画和合成操作。
服务器在向客户端发送响应之前是否处理这些步骤的全部或子集？最终，客户端请求网页时会收到什么？
三国纷争浏览 92回答 2
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）。然后客户端的 Web 浏览器执行该 javascript 并根据 js 代码创建 html 结构。在服务器端渲染中，服务器执行提供的javascript并创建适当的html结构并将其放入index.html（或适当的html文件）中。当用户请求html文件时，服务器直接将html发送给用户，而不是javascript。现在请记住，在服务器端渲染 (SSR) 和客户端渲染 (CSR) 中，html 会发送到用户的浏览器，而 javascript 会使用<script>标签发送。但在 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中，渲染发生在浏览器中。 -
狐的传说
HTML 已组装，但没有布局、绘画或合成或类似的东西。唯一的渲染是 HTML 文档。通常，这种技术最令人信服的原因是搜索引擎优化。即使是运行 JavaScript 的爬虫（如 Google）也不会一直这样做，而且它们往往对运行内容和运行时长有严格的限制。
随时随地看视频慕课网APP
相关分类
JavaScript