Difference between CSR and SSR
Answered
Parson Russell Terrier posted this in #help-forum
Parson Russell TerrierOP
I am trying to understand the differences between CSR and SSR. But, first things first, I am trying to understand what 'rendering' means. I have written my understanding of what rendering means in web apps, below. Could someone trying to help me, please tell whether it is right or wrong.
How I understand rendering is as follows
We write modern web applications as JS components. The components written in JS have to be converted to HTML pages so that the browser will be able to construct the DOM tree which is the first step of painting a page. So, I am saying that this process of conversion of JS code to HTML is called as 'rendering'.
Could you please tell me whether my explanation of rendering is correct? If it's not correct, please give me the right explanation.
ps: I have few followup questions depending on your answer.
How I understand rendering is as follows
We write modern web applications as JS components. The components written in JS have to be converted to HTML pages so that the browser will be able to construct the DOM tree which is the first step of painting a page. So, I am saying that this process of conversion of JS code to HTML is called as 'rendering'.
Could you please tell me whether my explanation of rendering is correct? If it's not correct, please give me the right explanation.
ps: I have few followup questions depending on your answer.
Answered by Arinji
Hiii @Parson Russell Terrier
You are correct about what rendering means, however in my opinion it also means specific stuff like firstt time to byte, time to interactive etc.
CSR == Client Side Rendering, in this paradigm you first hit the site, the site then makes the first request to get the inital js - 1 Waterfall
the initial js then tells it needs more data so you make more requests to the server from the browser - Many more waterfalls
At the end you get a
1. Slow loading page
2. Highly Interactive
Site
SSR === Server Side Rendering where instead of all the work done by the client, you do it on a server. This reduces all the waterfalls as instead of sending back and getting more data..its all done at once.. which also leads to the white screen where the browser is waiting for the first byte to be sent back which takes a while
You get a
1. Slow first byte on the screen
2. Super fast rest of the data
You are correct about what rendering means, however in my opinion it also means specific stuff like firstt time to byte, time to interactive etc.
CSR == Client Side Rendering, in this paradigm you first hit the site, the site then makes the first request to get the inital js - 1 Waterfall
the initial js then tells it needs more data so you make more requests to the server from the browser - Many more waterfalls
At the end you get a
1. Slow loading page
2. Highly Interactive
Site
SSR === Server Side Rendering where instead of all the work done by the client, you do it on a server. This reduces all the waterfalls as instead of sending back and getting more data..its all done at once.. which also leads to the white screen where the browser is waiting for the first byte to be sent back which takes a while
You get a
1. Slow first byte on the screen
2. Super fast rest of the data
14 Replies
Hiii @Parson Russell Terrier
You are correct about what rendering means, however in my opinion it also means specific stuff like firstt time to byte, time to interactive etc.
CSR == Client Side Rendering, in this paradigm you first hit the site, the site then makes the first request to get the inital js - 1 Waterfall
the initial js then tells it needs more data so you make more requests to the server from the browser - Many more waterfalls
At the end you get a
1. Slow loading page
2. Highly Interactive
Site
SSR === Server Side Rendering where instead of all the work done by the client, you do it on a server. This reduces all the waterfalls as instead of sending back and getting more data..its all done at once.. which also leads to the white screen where the browser is waiting for the first byte to be sent back which takes a while
You get a
1. Slow first byte on the screen
2. Super fast rest of the data
You are correct about what rendering means, however in my opinion it also means specific stuff like firstt time to byte, time to interactive etc.
CSR == Client Side Rendering, in this paradigm you first hit the site, the site then makes the first request to get the inital js - 1 Waterfall
the initial js then tells it needs more data so you make more requests to the server from the browser - Many more waterfalls
At the end you get a
1. Slow loading page
2. Highly Interactive
Site
SSR === Server Side Rendering where instead of all the work done by the client, you do it on a server. This reduces all the waterfalls as instead of sending back and getting more data..its all done at once.. which also leads to the white screen where the browser is waiting for the first byte to be sent back which takes a while
You get a
1. Slow first byte on the screen
2. Super fast rest of the data
Answer
Parson Russell TerrierOP
Hey @Arinji , Thanks for trying to help me out. So, the main difference(not the only difference) is where this HTML page gets created, but the rest of the steps in critical rendering path all happen in the browser only, right?
yup, thats one of the major difference, CSR the page is made fully on the client
SSR the page is made on the server and sent down to the client'
SSR the page is made on the server and sent down to the client'
Parson Russell TerrierOP
I am just wondering if browsers could identify if an input is 'Layout tree' just like it identifies that a file type is 'HTML' and it starts to parse it using the renderer process of the Browser, wouldn't it be much light on the browsers as the server could parse the HTML and CSS as well and send the Layout tree to the Browser? but I think that we might also need to send the view port dimensions along with this request.
What do you think about this @Arinji ?
Layout tree in the sense?
Parson Russell TerrierOP
DOM -> created from HTML
CSSOM(CSS tree) -> created from CSS
Layout Tree -> DOM & CSSOM are combined and x,y coordinates and dimensions are assinged to DOM nodes. It consists only of the elements that are visible on the screen to the user. eg: if 'display: none' is applied to any element, it will not be a part of the Layout tree, however it will be part of the DOM.
CSSOM(CSS tree) -> created from CSS
Layout Tree -> DOM & CSSOM are combined and x,y coordinates and dimensions are assinged to DOM nodes. It consists only of the elements that are visible on the screen to the user. eg: if 'display: none' is applied to any element, it will not be a part of the Layout tree, however it will be part of the DOM.
Yea that's on the server as well
However it won't make it on the server
It's gonna send the js needed to make it
Parson Russell TerrierOP
really? I don't think so, buddy
If you mean SSR here, it will send the HTML page itself just like we discussed in the previous messages.
It renders the html, and sends down js for the rest.
Parson Russell TerrierOP
haa, clear! Thank you so much buddy for your time!