DEV Community

Server-Side Rendering v/s Client-Side Rendering

Hritam Shrivatava on January 11, 2024

In the ever-evolving landscape of web development, two key approaches have emerged to handle the presentation of content on the user's browser - Se...
Collapse
 
brense profile image
Rense Bakker

SSR doesn't have faster initial page load, infact its slower to load, because the server first has to do some work, instead of just serving static files. SSR does have faster first contentful paint (FCP) because the content was preprendered on the server, so the client can immediately start painting after loading. You have to combine SSR with a cashing strategy to make it load faster. In NextJS/Vercel you can use incremental static regeneration (ISR) for example, which is a caching strategy that lets the server regenerate the static files, so you can have dynamic content, while still only serving static files to the user.

Collapse
 
efpage profile image
Eckehard • Edited

Is it really possible to say "SSR is faster" or "CSR" is faster? I suppose, if you have a closer look, things may get tricky. If you serve just a "Hello world", plain HTML might be the fastest. But what happens, if you use a bloated CSS framework of some hundred kB? Or need to load JQuery fisrt. You might need to wait until all CSS is loaded and evaluated before the browser can determine, how to render "Hello world".

Same with ES6-modules. If you use just some good oldfashioned scripts included in the main HTML-file, the browser will start to fetch all external references in parallel while starting to render HTML at the same time. In ES6-modules you may have nested references. The browser will fetch the initial file, but can start to fetch the nested files after the initial files has been loaded. So you might get a chain of loads that takes a lot of time.

Bottomline, It does not seem to be so easy to say: This is better than That. But it is important to know the reasons why...

Collapse
 
hriztam profile image
Hritam Shrivatava

Yeah, it all comes down to what's your preference and how complex your project actually is, I personally think SSR is better because it works better with the development phase, and if there is a component we need to render in CSR, we can just render that component separately instead of whole file

Thread Thread
 
efpage profile image
Eckehard

Nobody will care, if rendering takes 200ms longer on one or the other solution, but we all know pages that take much longer. It might not be a problem if a page shows up after 2-3s, but if you click a link and nothing happens for 10s, then you don't know whether your link worked or not.

This is a different game if you input some text, and every key press shows up with a delay of 200 ms and more, which might easily happen if any keypress is processed on the server.

My point here is: There are different solutions to create web sites. They all have different strong and weak sides. But it is not possible to say: This one is better/faster/easier, as this depends much on your task. If you have to manage a large team things might be different than if you are a single freelancer. Same is for large and small projects, that might need a different approach.

Thread Thread
 
hriztam profile image
Hritam Shrivatava

Exactly my point, choosing the right approach is what one should focus on cause it comes to many factors like u mentioned and one should identify what the project is more efficient with.

Collapse
 
brense profile image
Rense Bakker

You're comparing apples and tomatoes though. How you specifically serve your static files is still up to the developer and doesn't depend on a choice for CSR or SSR. The real difference between SSR and CSR is the place where rendering (the act of React interpreting your React code and translating it to DOM elements) happens. If you do that on the client, your page loads faster but the initial load is contentless. React starts doing its work and the the browser can start showing your content. With SSR, you do all that work on the server which makes it take a little bit longer to load your page, but once loaded the browser will immediately be able to show your content.

Thread Thread
 
hriztam profile image
Hritam Shrivatava

You are right, thanks for feedback man

Collapse
 
hriztam profile image
Hritam Shrivatava

oh yeah, thanks for pointing it out

Collapse
 
jameskaguru profile image
James Kaguru Kihuha

I think this article is on point.. especially the point on interactivity.. I initially thought that my sveltekit application should be fully SSR but I had a page with three tables each with pagination and I started to see that CSR might be a better solution to handle the fetching of the tables cause if used SSR it would just make the fetching complicated having to put 3 different paginating queries in the url just to ensure the page is working correctly

Collapse
 
hriztam profile image
Hritam Shrivatava

Thanks man, appreciate the feedback