DEV Community

Cover image for Understanding SSR, CSR, ISR, and SSG: A Comprehensive Guide
Achmad Fauzian Dhany Hidayat
Achmad Fauzian Dhany Hidayat

Posted on • Updated on

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

In the realm of modern web development, several acronyms are frequently thrown around—SSR, CSR, ISR, and SSG. These terms are crucial to understanding how web applications are built and delivered. In this article, we'll dive into what each of these acronyms means and how they impact web development.

1. SSR (Server-Side Rendering)

Server-Side Rendering, or SSR, is a technique that involves rendering web pages on the server and then sending the fully-rendered HTML page to the client's browser. Here's how it works:

When a user requests a web page, the server fetches the data, generates the HTML, and sends the complete page to the browser.
The browser then displays the page immediately, while JavaScript and CSS files are downloaded and executed.
SSR is known for its SEO benefits since search engines can easily crawl and index the HTML content.

2. CSR (Client-Side Rendering)

Client-Side Rendering, or CSR, is a technique where web pages are initially delivered as empty HTML shells to the browser. The client-side JavaScript then dynamically fetches data and renders the page in the browser. Here's how CSR operates:

When a user requests a page, the server sends a minimal HTML structure along with JavaScript and CSS files.
The browser loads these files and executes the JavaScript, which fetches the data and generates the content.
CSR provides a more interactive user experience but can lead to slower initial page loads and SEO challenges.

3. ISR (Incremental Static Regeneration)

Incremental Static Regeneration, or ISR, is a hybrid approach that combines the benefits of SSR and SSG. It allows for the partial regeneration of static pages at build time and runtime. Here's how ISR works:

During the build process, some pages are pre-rendered as static HTML, while others are marked as "stale."
When a user requests a "stale" page, the server regenerates it on-the-fly and caches the result for subsequent requests.
ISR strikes a balance between performance and real-time data, making it suitable for dynamic but frequently visited pages.

4. SSG (Static Site Generation)

Static Site Generation, or SSG, is a technique where web pages are generated at build time and serve as plain HTML files. SSG is the most straightforward method:

During the build process, all pages are pre-rendered as static HTML files, including any data that can be known at build time.
When a user requests a page, the server simply serves the pre-built HTML file.

SSG offers excellent performance, scalability, and security but may not be suitable for highly dynamic content.

When to Use Each Approach

  • SSR: Use SSR when SEO is critical, and you need to deliver content to users as quickly as possible. It's ideal for content-driven websites and e-commerce platforms.

  • CSR: Consider CSR when you want highly interactive and dynamic web applications. It's great for single-page applications (SPAs) and web apps that rely heavily on user interactions.

  • ISR: Choose ISR when you need a balance between performance and real-time data updates. It's suitable for blogs, news websites, and e-commerce sites with changing product availability.

  • SSG: Opt for SSG when you have content that doesn't change frequently and performance is a priority. It's perfect for blogs, documentation sites, and marketing pages.

Conclusion

Understanding SSR, CSR, ISR, and SSG is crucial for making informed decisions in web development. Each approach has its strengths and weaknesses, and the choice depends on your project's specific requirements. By leveraging these techniques effectively, you can create web applications that offer the best possible user experience and performance.

Top comments (12)

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.