Demystifying Client-Side & Server-Side Rendering

Today, I ended up learning ReactJS, and now it's time to learn Next.js. The first thing I learned is the difference between Client-Side Rendering and Server-Side Rendering. So, I thought of putting it into a blog to help other folks learn about this.

Client Side Rendering

Client-Side Rendering happens in ReactJS when we visit a website. The browser sends a request to the server, which responds with a basic HTML page. The browser fetches and executes JavaScript files to render and make the page interactive. It's important to note that if your browser's JavaScript is turned off, you won't be able to see React websites.

Let's Understand this with a Practical Real Life Example 🔥

Are you the one who cooks at home, or does your mom handle it?

think of it like cooking our meals at home. we have to gather the ingredients, prepare them, cook them, and finally, enjoy the delicious feast. It requires time and effort, just like Client-Side Rendering (CSR) where the browser does all the work from scratch.

The challenge with CSR is that the browser must wait for the JavaScript to download and execute before showing anything to the user. This can be a bit slow, especially on slower devices or networks.

Now I think we have a clear understanding of CSR now let's l understand Server Side Rendering (SSR)

Server Side Rendering

Next.js uses server-side rendering. When we visit a Next.js website, the server processes JavaScript files and generates an HTML page, which is sent to the browser. This enables a faster display of content to the user.

Let's Understand this with a Practical Real Life Example 🔥

Imagine going to a restaurant instead! we simply place our order, and the restaurant takes care of everything. It's quick, convenient, and you get to enjoy your meal without all the hassle. That's Server-Side Rendering (SSR) in action—the server does all the work for you.

Key Points To Note

Next.js with Server-Side Rendering ensures content visibility even with disabled JavaScript, unlike ReactJS where disabling JavaScript leads to a blank page. Next.js offers faster initial loading times.

Thanks For Reading this, Happy Coding 🎉