Frontend Rendering: SSG vs ISG vs SSR vs CSR — When to use which?

So many jargons 😱! Let’s not overload and fry our brains and check them out one by one.

1. Static Site Generation (SSG)

A static site generation is the process of generating a full static HTML website based on raw data and a set of templates. Essentially, a static site generation automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time.

In simple terms, SSG pre-renders all the pages of your website and serves them as per the client’s requests.

Pros

1. A static site generator provides the ability to generate a completely static HTML-based site that requires little to no database or server-side processes.
2. Static sites are the fastest form of web pages as they are pre-baked and ready to be served to users.
3. Since the website is pre-baked, the content is much more secure.
4. Search Engine Optimization (SEO) friendly.

Cons

1. Content editing and publishing are difficult. Editors may require access to the Git repository rather than a simple web app interface.
2. Content updates require the site to be rebuilt, tested, and finally deployed.
3. Maintaining large websites becomes cumbersome, not to mention the huge build time.

When to use SSG?

Even though SSG has a lot of benefits, you should use it only when you have a website where the content rarely changes, like a product showcase website.

If you have a blog, you may use SSG, if you are okay with redeploying the site every time you make any modification.

For a site with any form of dynamic content, SSG is a strict no-no.

2. Server-Side Rendering (SSR)