What exactly does client receive in server-side rendering?
Question
I've been researching on server-side vs client-side rendering, but most sources explain the two concepts on a very basic level.
I understand that server-side rendering renders a web page in the server and sends it down to the client. That way, the client can instantly view the page while the browser downloads the associated JS in the background.
But what exactly gets rendered on the server? From what I've read, rendering a web page involves a number of steps, including creating a DOM tree, followed by a CSSOM tree, and a render-tree. And then there are layout, painting, and compositing operations that follow.
Does the server take care of all or a subset of these steps before it sends a response to a client? And ultimately, what does the client receive when it requests a web page?
2 answers
solution1
1 2020-11-02 04:56:04
The HTML is assembled, but no layout or painting or compositing or anything like that.
The only rendering is the HTML document.
Usually, the most compelling reason for this technique is SEO. Even crawlers (like Google) that run your JavaScript won't do it all the time, and they tend to have strict limits for what they will run and for how long.
solution2
1 ACCPTED 2020-11-02 05:15:51
Consider the following react code.
class Square extends React.Component {
render() {
return (
<button className="square">
{this.props.value}
</button>
);
}
}
ReactDOM.render(
<React.StrictMode>
<Square />
</React.StrictMode>,
document.getElementById('root')
);
This code doesn't do anything magic. It simply make the following html code.
<div id="root">
<button class="square">
/* What ever the props passed to square lives here. */
</button>
</div>
I don't know whether the above react code works properly because I didn't took time to even review it. It's just an example code but you can get the idea.
The react js code execute to produce the above HTML structure on the web page. But you can always create that html structure directly in your html file also without using react.
In client side rendering , server send the client javascript (not the html). Then client's web browser execute that javascript and create the html structure according to the js code.
In server side rendering , server execute the provided javascript and create the appropriate html structure and put it in index.html (or the appropriate html file). When a user request the html file, server directly send the html to the user, not javascript.
Now keep in mind in both server side rendering (SSR) and client side rendering (CSR), html is sent to user's browser and javascript is sent using <script> tag. But in CSR, html file just contains an empty <body> [most of the times]. In CSR, necessary html nodes are created in the browser browser by executing the js. SSR on the other hand, execute the javascript in the server only sent the resulted html file to the client. That doesn't mean that the html file client receive doen't contain scripts . Only the html structure is built on the server.
More practical scenario...
Think a case where the html file needs to fetch data from an external API. In CSR, js is sent to web broswer. Browser execute that js and obtain data from the API in the browser. In SSR, server get the required data from the API, wrap it around HTML tags appropriately and only send the html to the client. there's no need client should grab data from API, it's already done by server.
Rendering means assembling the html. Not rendering pixels or painting or anything else. In SSR, rendering occur in server and CSR, rendering occur in browser.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.