Have you ever found yourself pulling your hair out trying to understand SSR and CSR? Maybe you’ve been asked in an interview to explain SSR and CSR, their differences, and when to use each one. Or perhaps you’ve heard about Hybrid rendering, which combines both CSR and SSR, and you’re not quite sure what that means. Don’t worry—let’s dive into these concepts and discuss them in detail.

But before moving to that we should first know the steps involved in getting a web application from development to being used by users.

Process

• Build: Prepare the code by compiling, bundling and optimizing it.
• Server: Host the prepared code and serve it to users.
• Execution: The user’s browser load and renders the application making it interactive.

Now that you have understand the process of web application from development to users let’s dive into our topic.

SSR(Server Side Rendering)

Server side rendering means rendering web pages on the server and sending fully rendered HTML to client.

How it works:

1. As a user you request a web page.
2. The server process the request and generates the HTML content.
3. The server will then send a fully rendered HTML to your browser.
4. Browser will display it’s HTML content to you.

That’s all about SSR and working of SSR. Now that you how it works let’s discuss it’s pros and cons:

Pros

1. Faster initial load: Now that you know HTML is being rendered on the server side, your browser can display the content as quickly as it receives it.
2. SEO: Search engines can easily crawl and index the fully rendered HTML.
3. Low-end Devices Friendly: Better performance on low end devices as it requires minimal processing on the client’s side.

Cons

1. Server load: It increases the server load as most of it’s processing is done on server side.
2. Slow Interaction: After the initial load further Interaction will require more communication with the server.

CSR(Client Side Rendering)

Client side rendering means rendering web pages on the browser side using Javascript.

How it works:

1. As a user you request a web page.
2. The server sends a minimal HTML file along with JS to the client.
3. The browser downloads and executes the JS and generates the HTML dynamically.
4. Browser will display content to you.

Now that you how it works let’s discuss it’s pros and cons:

Pros

1. Better Interactivity: Faster interaction as it processing happens at client side.
2. Server load: It reduces server load as server sends static files.
3. User experience: User experience is better as dynamic content updates happen without page reloads.

Cons

1. Slower initial load: As processing happens on client side it’s obvious that it will take longer time.
2. SEO: Seo challenges will be there as Search engines might have difficulty indexing content that is dynamically rendered.
3. Usage: Resource usage is generally high as processing happens on your(client’s) device.

Both SSR and CSR have their use cases, and often today’s modern applications use a combination of both (called hybrid rendering) to leverage the benefits of each approach.