🍽️ A Small Story

You walk into a restaurant where the chef hands you a small cooking kit and says:

“Here, all the ingredients are fresh, and the recipe is ready—go cook it right at your table.”

You look around, and everyone is doing the same. The kitchen simply gave out the raw materials, and each person’s meal comes to life right in front of them.

That’s exactly how Client-Side Rendering (CSR) works.

Your browser gets all the parts and does the cooking, delivering a rich, interactive experience built right at your table.

🔍 Technically, What is Client-Side Rendering (CSR)?

In Client-Side Rendering (CSR), the server sends only a small container—often called the "root"—to the client. After that, all the necessary JavaScript files are downloaded and executed directly in the user's browser.

This means that logic, data fetching, routing, and content control are all handled by JavaScript on the client side.

This is exactly how Single Page Applications (SPAs) work, using frameworks and libraries like React, Svelte, Angular, Vue, and others.

CSR helps deliver a smooth, app-like user experience—similar to a native mobile app—where you don’t need to reload an entire page every time you navigate to a new section.

⏱️ Let's See an Example for a Simple Timer Using React

Example For React Component

As you can see, inside the "root," React executes a tiny live clock directly on the client side.

There's no longer a need to travel back to the server and request a newly rendered HTML page for every update.

We could easily replace this clock with stock prices, live sports scores, or any real-time data from APIs — all without refreshing the page!

🔄 Now, Let’s Recap How CSR Works

Visual

This image from Blog.Duomly

Here’s the breakdown of how CSR works:

  1. User Requests the Website by entering the website URL
  2. Server Sends a Small Container: The server sends a small root element that contains basic HTML. This container is the foundation for the whole app.
  3. Browser Downloads the HTML: The browser receives this basic HTML structure.
  4. Browser Downloads CSS and JavaScript: From links in the basic HTML sent before.
  5. The Browser Executes the Downloaded JavaScript to render the entire application.
  6. Congrats, Your SPA Is Running! 🎉

🚀 Wait for Part 2: Is CSR Worth It?

Now that we've seen how CSR works, let’s dive into the big question:

Is it really worth it? 🤔

In Part 2, we’ll explore the pros and cons of Client-Side Rendering, so you can make an informed decision about whether it's the right choice for your web apps!

Stay tuned for the next chapter! 🔥