我一直在研究服务器端渲染与客户端渲染，但大多数资料来源都在非常基本的层面上解释了这两个概念。据我了解，服务器端渲染会在服务器中渲染网页并将其发送到客户端。这样，客户端可以立即查看页面，同时浏览器在后台下载相关的 JS。但服务器上到底渲染了什么？据我所知，渲染网页涉及多个步骤，包括创建 DOM 树、CSSOM 树和渲染树。然后是布局、绘画和合成操作。服务器在向客户端发送响应之前是否处理这些步骤的全部或子集？最终，客户端请求网页时会收到什么？
2 回答
暮色呼如
TA贡献1853条经验 获得超9个赞
考虑以下反应代码。
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中，渲染发生在浏览器中。
狐的传说
TA贡献1804条经验 获得超3个赞
HTML 已组装，但没有布局、绘画或合成或类似的东西。
唯一的渲染是 HTML 文档。
通常，这种技术最令人信服的原因是搜索引擎优化。即使是运行 JavaScript 的爬虫（如 Google）也不会一直这样做，而且它们往往对运行内容和运行时长有严格的限制。
添加回答
举报
0/150
提交
取消