Understand what is Server Side Rendering and Client Side Rendering

My Struggle

Since I started building websites, I began with React, through which I created Penguin Travel World. Later, when I created the travel blog recently, I changed the approach from React to plain HTML, CSS, and JavaScript. During this process, I was trying to understand the differences between these approaches and determine which one might be better.

In the end, I realized it depends on the use case and what you want to showcase. However, I also discovered that using “React” and using “HTML/CSS/JS” are quite different in terms of server-side rendering and client-side rendering.

Client Side Rendering vs Server Side Rendering

At the end of the day, whether we are using React or another framework, they all help to convert code into HTML/CSS/JS. However, the place where this conversion occurs is different.

Client-Side Rendering (CSR)

Client-Side Rendering (CSR) means the client (the user’s browser) will interpret the JavaScript application sent from the server and then generate the corresponding HTML on the client side.

This usually allows more dynamic and interactive interactions between the user and the application. However, it can lead to slower initial load times as all the JavaScript needs to be loaded and processed first. It is also less friendly for SEO, especially if you have many pages.

Server-Side Rendering (SSR)

On the other hand, using Server-Side Rendering (SSR) means the HTML of the page is generated on the server and sent to the client. This can lead to faster initial load times and better SEO since the content is readily available when the page is loaded.

My Use-Case

React

React is a JavaScript library for building user interfaces, primarily used for single-page applications with a focus on managing state and components.

Plain HTML, CSS, and JavaScript

Plain HTML, CSS, and JavaScript involve directly coding the structure, style, and behavior of webpages without the additional abstraction layer that React provides. For my Jekyll site, every time I have a new article, I build it using jekyll build, and the corresponding plain HTML/CSS/JS is generated. So, when someone visits my site, my server just sends the required HTML of the specific link.

Many Page Website - Blog

For websites with many pages, like my blog website (even for this website katrina.sh), SSR is more SEO-friendly and demands less network data from the user. Therefore, server-side rendering offers significant benefits.

One Page Website - Chiikawa Timer

Later on, I created a Chiikawa Timer website, which is a one-page web application requiring a lot of user interaction. For this case, using React and CSR enhances the user experience. Since I am only rendering one page, the slow initial load time and SEO are not as critical.

My Thoughts

Although the websites might look similar in terms of appearance, the rendering method affects the website’s behavior in terms of speed, SEO, and user experience. It’s important to understand the differences so that when a new project arises, we can choose the most suitable rendering method.