Server Side Rendering vs Static Site Generation
Published: 2023-07-23 12:01:49

---
title: "Server Side Rendering vs Static Site Generation"
description: "Learn about static sites, server-side rendering (SSR), and static site generation (SSG). Discover when to use SSR or SSG and their benefits. Dive into modern web development with examples and GIFs."
keywords: "static sites, server side rendering, SSR, static site generation, SSG, web development, ReactJS, VueJS, hydration, pre-rendering, portfolio, SEO"
author: "Your Name"
---

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.
<img src="https://media.giphy.com/media/AjHRw63yHXeHm3ksbV/giphy-downsized.gif" alt="server side rendering"/>

## Old times and static sites
Let's go on a pre-historic Internet ride when websites used to look like this : 
<img src="https://i2.cdn.turner.com/money/dam/assets/150506112202-old-website-apple-1024x640.png" alt="old website"  />
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 : 
<img src="https://media.giphy.com/media/9058ZMj6ooluP4UUPl/giphy.gif" alt="modern problems require modern solutions"/>

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? 
<img src="https://media.giphy.com/media/xTkcEQACH24SMPxIQg/giphy.gif" alt="loading"/>

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. 
<img src="https://media.giphy.com/media/lx7AtejahSmgIWmLX5/giphy.gif" alt="confused"/>

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.

<img src="https://media.giphy.com/media/26tnkPn8V8SzXtBza/giphy.gif" alt="exhausted"/>

That's it for today, I will be coming with a more detailed blog on Static Site generation soon. 
Also, my new [Portfolio 🔗](https://thevinitgupta.netlify.app/) 👈 here is live. Go check it out.