简体   繁体   English

在服务器端渲染的上下文中,“渲染”是什么意思?

[英]What does "rendering" mean in the context of server side rendering?

I know that rendering is the process in which the browser use HTML, CSS, Js code to show something on the screen, something visible to the user我知道渲染是浏览器使用 HTML, CSS, Js 代码在屏幕上显示一些东西的过程,一些东西对用户可见

But in server side rendering context, i feel that this is different, as i understand, in SSR, rendering means just creating a full HTML document that is sent to the client browser with js bundle which the browser use to show something visible to the user但是在服务器端渲染上下文中,我觉得这是不同的,据我所知,在 SSR 中,渲染意味着只是创建一个完整的 HTML 文档,该文档使用 js 包发送到客户端浏览器,浏览器使用该 js 包向用户显示可见的内容

Now is just generating a HTML document in the server is considered a form of rendering??现在只是在服务端生成一个HTML文件算不算渲染形式?? or something is not accurate here since it doesn't render anything actually??或者这里的东西不准确,因为它实际上没有渲染任何东西?

Now is just generating a HTML document in the server is considered a form of rendering?现在只是在服务端生成一个HTML文件算不算渲染形式?

Yes.是的。

Even if you just have a text template where you replace placeholders, eg即使您只有一个替换占位符的文本模板,例如

const response = `<html><title>${title}</title><body>${message}</body></html>`;

that could be considered rendering (since it turns the template into the final document to be transmitted).这可以被认为是渲染(因为它将模板转换为要传输的最终文档)。

In React, if you create your app using create-react-app then after building the project it will have the index.html file and js attached to it.在 React 中,如果您使用create-react-app ,那么在构建项目后,它将具有 index.html 文件和附加到它的 js。 index.html is empty only the <div id="root"></div> is present. index.html是空的,只有<div id="root"></div>存在。

When you serve this build folder from a server, the server just sends the index.html file as it is and the browser will attach everything starting from <div id="root"></div> when the attached js loads in the browser.当您从服务器提供此构建文件夹时,服务器只是按原样发送 index.html 文件,当附加的 js 在浏览器中加载时,浏览器将从<div id="root"></div>开始附加所有内容. This is client-side rendering.这是客户端渲染。

In the context of React server-side rendering is your index.html should have rendered more content inside the index.html file before sent to the browser.在 React server-side rendering的上下文中,您的 index.html 在发送到浏览器之前应该在index.html文件中渲染了更多内容。 By simply setting up a Node server you can do a ReactDOM.renderToString(App) to render the current page as a string and attached to index.html like <div id="root">{ReactDOM.renderToString(App)}</div> .通过简单地设置节点服务器,您可以执行ReactDOM.renderToString(App)将当前页面呈现为字符串并附加到index.html就像<div id="root">{ReactDOM.renderToString(App)}</div> This is server-side rendering.这是服务器端渲染。 When this received by the browser(client) it attaches all of the rest (event listers.. etc).当浏览器(客户端)收到此消息时,它会附加所有 rest(事件列表器等)。

When you have set up this is properly your website is isomorphic (behaves same in the client or the server)正确设置后,您的网站是同构的(在客户端或服务器中的行为相同)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM