If you're wondering what the heck is server side rendering and client side rendering? Let me give you a quick introduction.
Let's say you go to the supermarket to get food, you have two choices, to either stock up for the whole month or just get what you want for now. If you choose to stock up, you don't have to go back to the market, you can just open your fridge and get what you want.
Client Side Rendering is analogous to this. Your browser initially sends a request to the server and the server responds with a file similar to the one below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
<title>Rendering on the browser</title>
</head>
<body>
<--The "root" div will get content from the JS later -->
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
The browser, after loading the HTML and CSS then request the index.js file which contains your entire bundled application. Note that before the JS loads, the user cannot interact with the site.
Notice how the server initially sends an empty html file with only a div whose id is root? This can be a huge turnoff if you want your site indexed for Search Engine Optimization by search engines, because the web crawlers don't parse the index.js while indexing and only see a blank page with a single empty div.
Even though Google claims it can index React websites, it would only be able to index the initial render and not the components that are being lazy-loaded.
Another disadvantage to Client Side Rendering would be longer loading times, the user cannot interact with the website until the intitial JavaScript has been loaded by the browser (even though CSR makes up for it by being super fast once everything is loaded)
With slow connections, it can take more than 5 seconds just to load 500KB of JavaScript.
Now, Server Side Rendering comes into picture, let's say you went to the supermarket and bought only what you needed, and when you needed more stuff, you went out to get it again, SSR works in a similar way.
Unlike a client-side rendered site where the entire JS file needs to be downloaded and parsed before user can start interacting with it, in SSR the browser receives the initial HTML file with server rendered content for the user to see, once the JavaScript is loaded, only the event handlers need to be attached to the DOM elements.
One disadvantage of using Server Side Rendering each new page needs to be rendered by the server and fetched which increases the load on the server.
Let's weigh the pros and cons for both CSR and SSR:
Client Side Rendering
Pros
• If your initial js bundle is small your website load speed and overall user experience would be good.
• Possibility of lazy loading the components you want.
Cons
• SEO Disadvantages.
• Initial booting time can be high if your app is large.
Server Side Rendering
Pros
• Because everything is happening within the server, data fetching is insanely fast with almost 0 latency.
• Loading speed is not affected much by the user's connection speed since the server does all the heavy lifting.
• SEO benefits.
Cons
• Each page needs to be rendered by the server individually on request by the browser.
• You're essentially loading the whole website on the server before sending it to the user.
But, is there a way to use both Client Side Rendering and Server Side Rendering at the same time?
Yes, you don't need to sacrifice all of the features of CSR or SSR to fully use the other method. You can simply use a Universal Web App.
Universal Web Apps combine both CSR and SSR by doing the initial render on the server, and once the page loads, client side rendering will take place. Because of this we have good Search Engine optimization, fast initial renders and speed when browsing the site.
These are the flagship features of frameworks like NextJS and NuxtJS. If you're curious, digging deeper into them would be quite fun and helpful!
Conclusion
I hope you found something useful out of this read, and if you did, please drop a like or let me know what your thoughts are in the comments, I really appreciate feedback, have a good day! :)
Top comments (2)
Hi, thanks for sharing this article.
I would like to know which tool have you used to create the image
Thanks for the article. I have a problem with SSR though. Initial load is too long. My small hobby project takes 5 second of initial load and then 3 second to load normally. Is this normal?