Dunia pengembangan website modern berubah cukup cepat. Jika dulu website umumnya dirender langsung dari server menggunakan PHP atau framework backend, sekarang muncul banyak pendekatan baru seperti SSR, CSR, SSG, dan ISR.

Istilah-istilah ini sering muncul saat menggunakan React, NextJS, Nuxt, Astro, hingga framework modern lainnya.

Bagi developer, memahami perbedaannya penting karena akan memengaruhi:

• Kecepatan website
• SEO
• Beban server
• Pengalaman pengguna
• Biaya hosting
• Skalabilitas

Mari kita bahas satu per satu.

---

1. SSR (Server Side Rendering)

SSR atau Server Side Rendering adalah proses membuat halaman di server terlebih dahulu, lalu hasil HTML dikirim ke browser.

Alur:  

User Request
↓

Server membuat HTML
↓

HTML dikirim
↓

Browser menampilkan

Contoh sederhana pada PHP:  

<?php

$title="Belajar SSR";

echo "
<h1>
".$title."
</h1>
";

?>

Server langsung menghasilkan HTML.

Contoh framework yang mendukung SSR:

• NextJS
• Nuxt
• Laravel Blade
• Yii
• CodeIgniter
• PHP Native

Kelebihan SSR

• SEO bagus
• Cepat muncul di browser
• Cocok untuk blog
• Cocok untuk portal berita
• Metadata langsung tersedia

Kekurangan SSR

• Beban server lebih besar
• Setiap request diproses ulang
• Skalabilitas lebih kompleks

---

2. CSR (Client Side Rendering)

CSR atau Client Side Rendering berarti browser yang membuat tampilan.

Server biasanya hanya mengirim:

• HTML kosong
• JavaScript
• Asset

Alur:

User Request
↓

HTML kosong
↓

JavaScript dijalankan

↓

UI dibuat browser

Contoh sederhana:

HTML:

<div id="app"></div>

JavaScript:

document.getElementById(
"app"
).innerHTML=
"<h1>Halo CSR</h1>";

Framework yang sering memakai CSR:

• React SPA
• Vue SPA
• Angular
• Vite

Kelebihan CSR

• Interaksi cepat
• Cocok dashboard
• State management kuat
• UX lebih halus

Kekurangan CSR

• SEO lebih sulit
• First load kadang lambat
• Bergantung JavaScript

---

3. SSG (Static Site Generation)

SSG adalah teknik membuat HTML saat proses build.

Halaman dibuat sekali lalu disimpan sebagai file statis.

Alur:  

Build Project

↓

HTML dibuat

↓

Disimpan

↓

User membuka halaman

Contoh:

File build:  

<h1>
Belajar SSG
</h1>
<p>
Konten sudah dibuat
sebelumnya
</p>

Framework:

• NextJS Export
• Astro
• Hugo
• Gatsby

Kelebihan SSG

• Sangat cepat
• SEO bagus
• Hosting murah
• Cocok CDN
• Server ringan

Kekurangan SSG

• Update perlu rebuild
• Kurang cocok data realtime
• Konten dinamis lebih rumit

---

4. ISR (Incremental Static Regeneration)

ISR adalah gabungan antara SSR dan SSG.

Halaman dibuat statis tetapi bisa diperbarui otomatis setelah waktu tertentu.

Contoh:

Build

↓

HTML dibuat

↓

User akses

↓

5 menit lewat

↓

Halaman diperbarui

Contoh sederhana konsep:

export async function getStaticProps(){

return{

props:{},

revalidate:60

};

}

Artinya:

Halaman diperbarui setiap:

60 detik

Framework populer:

• NextJS
• Beberapa implementasi modern SSR

Kelebihan ISR

• Cepat
• SEO bagus
• Tidak perlu rebuild penuh
• Cocok konten berubah

Kekurangan ISR

• Konsep lebih kompleks
• Tidak semua framework mendukung
• Cache perlu dipahami

---

Perbandingan SSR, CSR, SSG, ISR

Fitur	SSR	CSR	SSG	ISR
SEO	Sangat bagus	Terbatas	Sangat bagus	Sangat bagus
Kecepatan awal	Cepat	Sedang	Sangat cepat	Sangat cepat
Realtime	Ya	Ya	Tidak	Sebagian
Beban server	Tinggi	Rendah	Sangat rendah	Rendah
Build	Tidak	Tidak	Ya	Ya

---

Contoh Implementasi Sederhana SSR vs CSR

SSR PHP

<?php

$name="Applicanity";

echo
"<h1>
Halo "
.$name.
"</h1>";

Output:

<h1>
Halo Applicanity
</h1>

HTML dibuat server.

---

CSR JavaScript

<div id="app"></div>
<script>
let name="Applicanity";
document.getElementById("app").innerHTML="<h1>Halo "+name+"</h1>";
</script>

Browser membuat HTML.

---

Kapan Harus Menggunakan Masing-Masing?

Gunakan SSR jika:

• Blog
• Portal berita
• Website SEO
• Landing page

Gunakan CSR jika:

• Dashboard
• ERP
• Admin panel
• Aplikasi internal

Gunakan SSG jika:

• Company profile
• Dokumentasi
• Portfolio
• Landing page statis

Gunakan ISR jika:

• Produk e-commerce
• Blog besar
• Data berubah berkala
• Marketplace

---

Tren Modern

Saat ini banyak proyek memakai gabungan:

SSR + CSR

Contoh:

Landing page:  

SSR

Dashboard:

CSR

Blog:

SSG

Produk:  

ISR

Framework seperti NextJS membuat pola campuran ini semakin populer.

---

Kesimpulan

Tidak ada metode yang paling sempurna SSR cocok untuk SEO, CSR cocok untuk interaksi tinggi, SSG sangat cepat, ISR menjadi jalan tengah untuk konten dinamis. Developer modern biasanya memilih kombinasi sesuai kebutuhan proyek.