Digital Transformation
SSR (Server-Side Rendering)
SSR adalah teknik rendering yang membangun HTML di server setiap kali ada request, sehingga konten yang dikirim ke browser sudah lengkap.
TL;DR: SSR (Server-Side Rendering) adalah metode rendering yang membangun HTML di server pada setiap request, lalu mengirim halaman yang sudah jadi ke browser. Cocok untuk data yang sering berubah dan konten yang perlu personal per user.
Apa itu SSR?
SSR atau Server-Side Rendering adalah proses merakit halaman HTML di sisi server setiap kali browser meminta URL. Framework seperti Next.js, Nuxt, dan Remix menyediakan SSR dengan API yang sederhana. Karena server menjalankan render per request, data yang ditampilkan bisa selalu fresh dan disesuaikan dengan konteks pengguna (login, lokasi, preferensi).
Bandingkan dengan SSG (Static Site Generation) yang hanya sekali render saat build. SSR lebih fleksibel, tetapi membutuhkan server yang selalu siap dan biaya komputasi yang lebih tinggi.
Cara Kerja SSR
| Tahap | Aktivitas |
|---|---|
| Request | Browser mengirim GET ke server Next.js |
| Fetch | Server memanggil database/API untuk data terbaru |
| Render | Komponen React dirender menjadi HTML string |
| Response | HTML dikirim ke browser, disusul hydration JavaScript |
Latency total kasar, $T_{ssr} = t_{fetch} + t_{render} + t_{network}$. Bila $t_{fetch}=150ms$, $t_{render}=80ms$, $t_{network}=70ms$, TTFB sekitar 300 ms, yang masih cukup untuk threshold Core Web Vitals jika di-cache dengan baik.
Kenapa Penting?
SSR memastikan crawler SEO mendapat HTML lengkap tanpa menunggu JavaScript, sangat penting untuk konten berita, e-commerce, dan dashboard yang perlu indexable. Di Indonesia, di mana koneksi pengguna bervariasi, SSR bisa mempercepat First Contentful Paint dibanding Client-Side Rendering murni karena browser menerima HTML yang sudah jadi.
Kekurangan utama SSR adalah beban server yang naik seiring traffic. Solusi umum, pasang Cache (Web Cache) di level CDN untuk halaman yang bisa di-share lintas user.
Pertanyaan Umum
Apakah SSR lebih bagus untuk SEO daripada CSR?
Umumnya ya, karena bot menerima HTML lengkap di response pertama. Namun Google kini bisa render JavaScript, jadi perbedaannya mengecil untuk konten non-kritis.
Kapan pilih SSR daripada ISR?
Pilih SSR kalau data harus benar-benar real-time (harga, stok langsung), atau kalau halaman sangat personal per user sehingga tidak bisa di-share di cache.
Istilah Terkait