SSR vs CSR vs SSG vs ISR in Modern Web Development
The world of modern website development is changing rapidly. While websites were typically rendered directly on the server using PHP or backend frameworks, many new approaches have emerged, such as SSR , CSR , SSG , and ISR .
These terms often appear when using React, NextJS, Nuxt, Astro, and other modern frameworks.
For developers, understanding the difference is important because it will affect:
- Website speed
- THIS
- Server load
- User experience
- Hosting costs
- Scalability
Let's discuss them one by one.
1. SSR (Server Side Rendering)
SSR or Server Side Rendering is the process of creating a page on the server first, then the HTML result is sent to the browser.
Channel:
User Request
↓
Server membuat HTML
↓
HTML dikirim
↓
Browser menampilkan
Simple example in PHP:
<?php
$title="Belajar SSR";
echo "
<h1>
".$title."
</h1>
";
?>
The server directly generates HTML.
Examples of frameworks that support SSR:
- NextJS
- Nuxt
- Laravel Blade
- This
- CodeIgniter
- PHP Native
Advantages of SSR
- Good SEO
- Quickly appears in the browser
- Suitable for blogs
- Suitable for news portals
- Metadata is immediately available
Disadvantages of SSR
- Higher server load
- Each request is reprocessed
- Scalability is more complex
2. CSR (Client Side Rendering)
CSR or Client Side Rendering means the browser renders the display.
The server usually only sends:
- Empty HTML
- JavaScript
- Asset
Channel:
User Request
↓
HTML kosong
↓
JavaScript dijalankan
↓
UI dibuat browser
Simple example:
HTML:
<div id="app"></div>
JavaScript:
document.getElementById(
"app"
).innerHTML=
"<h1>Halo CSR</h1>";
Frameworks that frequently use CSR:
- React SPA
- Vue SPA
- Angular
- Quickly
Advantages of CSR
- Fast interaction
- Fit dashboard
- Strong state management
- Smoother UX
Lack of CSR
- SEO is more difficult
- First load is sometimes slow
- Depends on JavaScript
3. SSG (Static Site Generation)
SSG is a technique for generating HTML during the build process.
Pages are created once and then saved as static files.
Channel:
Build Project
↓
HTML dibuat
↓
Disimpan
↓
User membuka halaman
Example:
File build:
<h1>
Belajar SSG
</h1>
<p>
Konten sudah dibuat
sebelumnya
</p>
Framework:
- NextJS Export
- Astro
- Hugo
- Gatsby
Advantages of SSG
- Very fast
- Good SEO
- Cheap hosting
- CDN Compatible
- Light server
SSG shortage
- Update perlu rebuild
- Less suitable real-time data
- Dynamic content is more complicated
4. ISR (Incremental Static Regeneration)
ISR is a combination of SSR and SSG.
The page is created static but can be updated automatically after a certain time.
Example:
Build
↓
HTML dibuat
↓
User akses
↓
5 menit lewat
↓
Halaman diperbarui
A simple example of the concept:
export async function getStaticProps(){
return{
props:{},
revalidate:60
};
}
It means:
Page updated every:
60 detik
Popular frameworks:
- NextJS
- Some modern implementations of SSR
Advantages of ISR
- Fast
- Good SEO
- No need for a full rebuild
- Match content changes
Disadvantages of ISR
- More complex concepts
- Not all frameworks support
- Cache needs to be understood
Comparison of SSR, CSR, SSG, ISR
| Feature | SSR | CSR | SSG | ISR |
|---|---|---|---|---|
| THIS | Very good | Limited | Very good | Very good |
| Initial speed | Fast | Currently | Very fast | Very fast |
| Realtime | Of | Of | No | Part |
| Server load | High | Low | Very low | Low |
| Build | No | No | Of | Of |
Simple Implementation Example of SSR vs CSR
SSR PHP
<?php
$name="Applicanity";
echo
"<h1>
Halo "
.$name.
"</h1>";
Output:
<h1>
Halo Applicanity
</h1>
Server-generated HTML.
CSR JavaScript
<div id="app"></div>
<script>
let name="Applicanity";
document.getElementById("app").innerHTML="<h1>Halo "+name+"</h1>";
</script>
The browser renders HTML.
When to Use Each?
Use SSR if:
- Blog
- News portal
- Website SEO
- Landing page
Use CSR if:
- Dashboard
- ERP
- Admin panel
- Internal applications
Use SSG if:
- Company profile
- Documentation
- Portfolio
- Landing page statis
Use ISR if:
- E-commerce products
- Big blog
- Data changes periodically
- Marketplace
Modern Tren
Currently many projects use a combination of:
SSR + CSR
Example:
Landing page:
SSR
Dashboard:
CSR
Blog:
SSG
Product:
ISR
Frameworks like NextJS are making this mixed pattern increasingly popular.
Conclusion
There's no perfect method: SSR is great for SEO, CSR is great for high engagement, SSG is very fast, and ISR is a good compromise for dynamic content. Modern developers typically choose a combination based on their project needs
