Server Side Rendering vs Static Site Generation

You might have heard of the term static sites or server side rendering. But do you know what these mean and where these are use?

Well, I am here to try and explain, like I myself am not a newbie.

Old times and static sites

Let's go on a pre-historic Internet ride when websites used to look like this :

You can clearly see there are not a lot of html elements and the design is relatively simple, with little to not interactivity.
At that time, the websites were created using html, css and javascript on the servers and sent to client's browser and displayed.

Fast forward to the modern complex Reactive designs, that have a lot of components and events going on in the webpages. This would be possible, easily for all the different use cases.

Server Side Rendering (SSR) in modern times

Yes, the early Internet was server-side rendered pages and rightly so. But as a wise man once said it :

Let's see, Server side rendering is basically sending a pre-built website with it's necessary elements created even before the page is sent to the client. But what happens to the reactive elements?

Here we have to see a term : Hydration.
Simply put, hydration is when a Reactive element is statically rendered at first. And then as the Javascript file is loaded from the server, it becomes reactive.

That is how modern reactive websites are rendered server side and achieve reactivity.

Static Site Generation (SSG)

Now that we know about Server Side rendering, let's look at another player in the market - Static Site Generation. It is relatively simple to understand.

Let's say you have a Portfolio page where you show your :

• details
• projects, and
• experience.

The data is constant and needs to be updated once in a while. Having the page fetch data from somewhere and build every time someone visits your site is tiresome, right?

A simple solution is to have a fast loading static site that has already been built on the server and only has to be sent to the client. The client does not have to run any scripts or fetch data from anywhere.

This means as soon as you click on the link, the page loads(ofcourse you need to have a good internet connection for it to be that fast).

But you get my point, right?

Well, that is the power of Static Site Generation.

When to use which?

This is a complicated question to answer, but really important one. Half the time goes into deciding which one to use.

This can be answered by answering 2 questions :

1. Do you really need the complexity of either SSR or SSG?
2. How often does your data change?

If the answer to the first question is NO, then just go for simple React components.

Otherwise, for the second question :

• Not so often, static site generation is your answer. You can manually build and deploy the site with updated information, or setup some pipelines to handle that.
• Often, go for Server Side rendering, but remember the added complexity over simple ReactJS or VueJS components.

That's it for today, I will be coming with a more detailed blog on Static Site generation soon.
Also, my new Portfolio 🔗 👈 here is live. Go check it out.