Hello devs!

There are several methods of rendering pages on the browser. A common challenge is when to choose which method for our websites and web applications. Today we're going to take a brief look at two of such methods - SSR and CSR.

So what's the deal with these abbreviations?

SSR and CSR simply refers to the different methods used by software developers to transfer html content to the client.
SSR is short for Server-Side Rendering while CSR is for Client-Side Rendering.

*Note: There are other methods of rendering pages on the browser e.g. SSG, ISR, but our focus today is only on SSR and CSR.

Server-Side Rendering (SSR)

This is the most common method of rendering HTML onto a screen.
A user requests access to a webpage. Server sends ready to go HTML files to the client. Browser then renders the page but it's not interactive. Browser downloads and execute the JavaScript. Page is now interactive. This is all done within a few milliseconds. The heavy lifting is done on the server. This means that if there are any API calls to be made, it is all done on the server-side, then sent along with the markup to the client.

Pros

• Better SEO. Search engines can crawl the site effectively.
• Initial page load is faster

Cons

• Frequent server requests
• Full page reloads
• Slow page rendering for subsequent pages

Client-Side Rendering (CSR)

This method simply means the pages are directly rendered in the browser. In this method, the heavy lifting is done on the client rather than the server. A user requests access to our webpage, server sends a response to our browser, browser downloads the JavaScript file and executes the content. Page is now visible and user can navigate and interact with the web page.

Pros

• Fast website rendering after the initial load
• Great for web applications
• Rich interactions

Cons

• Requires external libraries in some cases
• Initial page load is slow
• Poor SEO if not implemented correctly

Choosing the right rendering method will depend on your use case and what works for you. Web applications and websites are two different formats of web content. Web apps require more interaction since users need to perform tasks. A website, on the other hand, is simply a page that offers or provides info about a business, hence, not a lot of user interactions.

Thanks for reading. I hope this helps you understand these concepts a little better. For more deep dive, comparisons and visual representation of the different rendering methods, check out the links below.

Visual Explanation and Comparison of CSR, SSR, SSG and ISR
Rendering on the Web
Tech Talk
Rendering Options on the Web

Thanks for reading 👋