CSR vs SSR(Client side rendering vs Server side rendering)

When we visit a website there are two thing’s happening, for demonstration purpose lets assume the two things are two peoples. One is the visitor/client another is the server, so when a web page loads, means the client requests for the website/resource from the server, then the server response with that resource(html, css, js files).

So now from above we have a clear(kind of 😅) view how things work.
Let’s dive into the topic.

Client side means the machine or the browser that is used by the visitor.
In client side rendering the browser loads all the data at once means html, css & js files all are loaded at Initial Load. So when all the loading are finished, the website become interactive.

It’s heavily used in SPA(Single Page Application) ex: React.js, Angular.js, Vue.js etc.

As the websites built in SPA technology in mind, so when we route/go to another page of the website, say from HOME page to ABOUT page, as in CSR all the data’s are loaded in initial load, it won’t make a request to the server again for the ABOUT page or other routes/pages. So it all feels blazing fast ✨.

hint hint! 😁 if the word Initial Load caught your attention. Hang in there, we will come back to it .

Looks like we already have vague understanding what Server side means.
Server side simply means the machine or the computer that contains resource of a website.

In server side rendering the whole website or data isn’t loaded at once. So the initial load is faster.

When a user visits from HOME page to ABOUT page, the client/user makes a request to the server for the ABOUT page, and the server responds/serves the ABOUT page to the client. For every routes/pages the action goes back and forth. So when the requested page is bigger in size it may slow down while loading and affect on user experience.

Ok now lets come to the “Initial Load” mentioned above. Initial load mean when the website loads for the first time.
In CSR all data of a website loads at initial loading, so as the website grows large in scale(holds a lot data) like video website YouTube etc. it may take a lot of time to load.
But in this situation SSR wins over CSR.

There is a famous quote “First impression is the last impression” 😎.
You may consider we should turn all of our website to use SSR.
Hold on! Hold on! 🖐
There is no rose 🌹 without throne. So before taking a decision we should know the Pros and Cons of CSR & SSR.

Pros & Cons of CSR

Pros
* Reach interactions
* Faster Response
* Web Applications
Cons
* Low SEO potential
* Longer initial load

Pros & Cons of SSR

Pros
* Static sites
* Initial page load
* SEO (javascript SEO)
Cons
* Full page reload
* Slower page rendering
* Request to server

🌸 The conclusion 🌸

If your website features a lot of interactions like modern websites Facebook, twitter etc. where a lot of action happens user likes a post creates a post, in these cases CSR can perform better. To achieve faster loading, there is a trusted & applied method/technique called “Code Splitting” .

Code splitting simply means only serve what’s needed. Like at initial load if the page is HOME page it will load all the functionality requires for the page to be interactive & vice versa.
So by doing this we can achieve a SSR like behavior in CSR.

Websites those are more text based like documentation web sites for example React documentation website uses SSR, as the website is more text based it doesn’t load all of the text at once thus makes the website faster. One can achieve SSR by using one of these technologies Gatsby.js, Next.js etc. even React documentation website uses Gatsby.js for achieving SSR.

So the main take away from the discussion is, we should take wise decisions based on our requirements.