Perbedaan CSR, SSR dan SSG dalam rendering di NextJS
IQBAL FARHAN SYUHADA
04 Nov 2024
Berikut adalah tabel perbedaan antara Client-Side Rendering (CSR), Server-Side Rendering (SSR), dan Static Site Generation (SSG):
| Aspek | Client-Side Rendering (CSR) | Server-Side Rendering (SSR) | Static Site Generation (SSG) |
|---|---|---|---|
| Waktu Rendering | Dirender di klien setelah halaman dimuat | Dirender di server setiap kali ada permintaan | Dirender di server saat build, menjadi halaman statis |
| Kecepatan Halaman | Awalnya lebih lambat, menunggu JavaScript dimuat | Lebih cepat pada first load, tetapi tergantung pada waktu server | Sangat cepat karena halaman statis siap disajikan |
| Penggunaan | Aplikasi SPA yang interaktif atau aplikasi kompleks | Konten yang sering berubah dan membutuhkan data real-time | Konten statis atau jarang berubah |
| SEO | Kurang optimal untuk SEO | Baik untuk SEO karena HTML lengkap dirender di server | Sangat baik untuk SEO karena HTML statis |
| Pengambilan Data | Data diambil di sisi klien (misalnya useEffect) |
Data diambil di server setiap kali ada permintaan | Data diambil saat build menggunakan getStaticProps |
| Kapan Digunakan | Aplikasi yang tidak memerlukan SEO atau halaman pertama | Aplikasi dengan data dinamis yang sering diperbarui | Blog, dokumentasi, dan halaman yang kontennya jarang berubah |
| Kelebihan | Lebih responsif setelah halaman dimuat | Konten selalu diperbarui, baik untuk aplikasi dinamis | Performa sangat cepat dan ideal untuk skala besar |
| Kekurangan | SEO kurang baik, performa awal lambat | Beban pada server tinggi, terutama jika banyak pengguna | Tidak cocok untuk konten yang sering berubah |
Ringkasan
- CSR: Baik untuk aplikasi interaktif, tetapi kurang optimal untuk SEO dan memiliki performa awal yang lebih lambat.
- SSR: Cocok untuk aplikasi yang membutuhkan data dinamis dan SEO, namun beban server bisa tinggi.
- SSG: Ideal untuk konten statis dengan performa cepat dan SEO yang baik, tetapi kurang fleksibel untuk konten dinamis.
