What is Server-side rendering and Client-side rendering

Photo by bruce mars on Unsplash

Before the emergence of JavaScript frameworks the only way to render a web page was through server-side rendering. A user sends a request to the server and the server returns back the full web page. Nowadays, client-side rendering gained a lot of traction due to JavaScript frameworks and libraries like React JS. In this article, I’m going to discuss each one of them, their advantages and disadvantages.

Server side rendering

Server-side rendering or SSR is the traditional method that was used to render web pages for a long time. When a user sends a request to the server, the server sends back all the necessary files with the full HTML content. With server-side rendering the server handles everything.

Advantages:

  • SEO-friendly. Google Bots can rank the website properly because they get the content of the HTML file from the server.
  • Fast first page load time.

Disadvantages:

  • Slower second and further page load time. Page reloads every time a user changes the route which makes it slow.

Client side rendering

Client-side rendering or CSR is the new way of rendering web pages. When a user sends a request to the server, the server sends back the necessary files but the HTML file is empty. It’s up to the browser to render the HTML content using JavaScript.

Advantages:

  • Fast Second and further page load time. CSR doesn’t send a request to the server every time you change the route which makes it faster.

Disadvantages:

  • Slow first page load time.
  • Bad SEO. CSR uses JavaScript to render the web page which makes it hard for Google Bots to rank the website properly.

Wrap Up:

As you can see both CSR and SSR have their own Pros and Cons. We can say that you can use CSR when you are building web applications and there are a lot of user interaction, and SSR when you care about SEO and there is not that much user interaction.

I write about topics related to web development.