DEV Community

Cover image for Understanding SSR, CSR, ISR, and SSG: A Comprehensive Guide

Understanding SSR, CSR, ISR, and SSG: A Comprehensive Guide

Achmad Fauzian Dhany Hidayat on September 04, 2023

In the realm of modern web development, several acronyms are frequently thrown around—SSR, CSR, ISR, and SSG. These terms are crucial to understand...
Collapse
 
sip profile image
Dom Sipowicz • Edited

My SEO strategy would be as follows:

  • If all pages can be built at build time and are static, go for SSG first

  • In order to decrease the build time, I would use ISR and prebuild the most important pages, such as main categories, and the rest would be built organically later on, on Runtime.

  • When I have lots of pages or everything is dynamic, I would choose SSR.

In terms of speed for users, this is the way: SSG -> ISR -> SSR.

Collapse
 
gersonlimadev profile image
Gerson Lima

In terms of speed for users, this is the way: SSG -> ISR -> SSG.

just a little correction:
In terms of speed for users, this is the way: SSG -> ISR -> SSR.

Collapse
 
sip profile image
Dom Sipowicz

yes. lol my bad! thanks for correcting

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

So SSR is kinda like a fancy term for what we have been doing in PHP from a long time ago? Haha.

While watching all the media talking about SSR as if it was the new boom in development I thought it had to be something more complex.

Collapse
 
brense profile image
Rense Bakker

It's not. SSR is only for the initial page that the user visits. Subsequent pages are cache or CSR. In PHP you have to go back to the server for each user navigation, which is slow. You can do SSG with PHP, which would be the same as SSG in React, except React can hydrate to become interactive.

Collapse
 
jcarlosr profile image
Juan Ramos

For multi-page apps I believe PHP will do SSR easily, but it's not very straightforward for single page apps that use a JS framework like Vue or React.

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Yeah, I'd been using SvelteKit and I know the process changes, but actually reading the explanation was like if a lightbulb was turned on after understanding what SSR actually is, haha.

Collapse
 
efpage profile image
Eckehard

We should also ask, what people are using the web for. There is a fundamental difference, if your site is just a "business card" on the web, or if you want to create a scientific calculator, that runs on the browser. You will find a lot pages, that act more like a traditional desktop programs than like a web page. And we should not forget pages like dev.to, that are built mainly on user content.

Each approach has it´s strong and weak points. Before recommending any toolset, we should first ask: What do you want do?

Collapse
 
hugaidas profile image
Victoria

Good job, it can be especially useful for the beginners!

Collapse
 
artxe2 profile image
Yeom suyun

Even if i use a fast framework like Svelte or SolidJS, does SSR have a significant advantage over SSG in cases like e-commerce?

Collapse
 
vinaybedre profile image
Vinay

Great post. One can achieve all these approaches using #vercel

Collapse
 
hassanbhb profile image
Hassan ben haj bouih

Definitely a good article for beginners.