in this article, I want to share with you the difference between server-side rendering(SSR) and client-side rendering(CSR). knowing the difference between those two things is very important, especially when you are developing on the web. first of all, I will explain the definition of SSR and CSR, then I will cover the difference between them, and for the last, what kind of circumstances are suitable for each.
SSR stands for server-side rendering. it is the ability of a web application to render the web page on the server instead of rendering it in the browser. when the page arrived on the client-side, it is fully rendered. it is because the server-side has fully rendered the page before it was sent by the server to the client. when the request is received on the server-side, it will compile everything, if the content of the page needed data from the database, the server will do that, then render the data into the fully rendered page and then send it to the client as the response. now, what if the client navigates to a different route? every time the client navigates to a different route, the server will do the work all over again.
the main difference between CSR and SSR is where the page is rendered. SSR renders the page on the server-side and CSR renders the page on the client-side. Client-side manages the routing dynamically without refreshing the page every time the client requests a different route.
- if SEO is your priority, typically when you are building a blog site and you want everyone who searching on google go to your website, then SSR is your choice.
- if your website needs a faster initial loading.
- if the content of your website doesn't need much user interaction.
- when SEO is not your priority
- if your site has rich interactions
- if you are building a web application