CSR vs SSR untuk Website Bisnis Indonesia: Cara Memilih Strategi Rendering agar SEO dan Konversi Tidak Bertabrakan di 2026

TL;DR: CSR (Client-Side Rendering) memindahkan render ke browser, sehingga server hemat tapi halaman pertama lambat dan sulit diindeks. SSR (Server-Side Rendering) mengirim HTML jadi dari server, sehingga FCP cepat dan ramah SEO. Untuk website bisnis publik, default Anda harus SSR atau SSG, sementara CSR disimpan untuk dashboard di balik login.

Pertanyaan paling sering muncul di proyek client adalah, "kenapa website kami canggih tapi tidak muncul di Google?" Jawabannya hampir selalu sama, tim developer memilih CSR untuk halaman publik karena ringan di server, tanpa menyadari bahwa Googlebot dan AI Search butuh HTML siap baca. Sejak update Helpful Content Update Google awal 2024, halaman yang lambat dirender semakin tertinggal di hasil pencarian.

Memilih strategi rendering bukan keputusan teknis murni. Ini menyangkut apakah produk Anda bisa ditemukan, apakah konversi tetap berjalan di koneksi 4G yang naik turun, dan apakah biaya server membengkak saat trafik melonjak.

Tiga Pilihan Utama: CSR, SSR, dan SSG

Tiga pilihan ini bukan saingan, tapi alat dengan kekuatan berbeda. Mari kita bandingkan berdasar tiga metrik yang paling berdampak ke bisnis.

Untuk landing page produk, halaman kategori e-commerce, dan blog, SSG atau SSR adalah default. CSR cocok untuk dashboard internal dan area aplikasi yang sudah di balik login.

Kapan CSR Masih Tepat

CSR tetap punya tempat. Pertama, untuk halaman di balik autentikasi seperti dashboard admin atau area member, di mana SEO tidak relevan. Kedua, untuk aplikasi yang penuh interaksi tabel dan filter dinamis, misalnya panel analitik internal. Ketiga, untuk prototype cepat yang akan dipindahkan ke SSR setelah validasi pasar.

Saat membangun Atmo sebagai LMS, kami pisahkan area kursus internal yang memakai CSR dari halaman pemasaran kursus yang memakai SSG. Hasilnya, Core Web Vitals halaman pemasaran tetap hijau sambil dashboard kursus tetap responsif untuk pengguna yang sudah login.

Kapan SSR Lebih Tepat dari SSG

SSG menyiapkan HTML saat build, jadi cocok untuk konten yang jarang berubah. SSR merender HTML setiap request, jadi cocok untuk konten yang dipersonalisasi atau berubah cepat. Pilih SSR ketika halaman menampilkan harga real-time, status stok, atau konten berbasis lokasi pengguna. Pilih SSG ketika konten sama untuk semua pengunjung, misalnya artikel blog atau halaman layanan.

Untuk Next.js modern, ada jalan tengah yaitu ISR (Incremental Static Regeneration) yang memberikan kecepatan SSG dengan kemampuan refresh otomatis. Ini yang dipakai vitoatmo.com untuk halaman artikel dan glosarium yang sering ditambah.

Studi Kasus: Pivot dari CSR ke SSR di Vetmo

Saat membantu Vetmo (pet care platform), versi awal halaman pencarian klinik dibuat dengan CSR penuh. Halaman itu tampak rapi di laptop, tapi di ponsel mid-range, layar kosong selama 2 sampai 3 detik sebelum daftar klinik muncul. Lebih buruk lagi, halaman tidak muncul saat dicari di Google Maps integrasi.

Setelah pivot ke SSR untuk shell dan list awal, lalu CSR untuk filter interaktif, FCP turun dari sekitar 3,5 detik ke bawah 1 detik. Halaman juga mulai diindeks dengan baik, dan trafik organik dari kata kunci lokal seperti "klinik hewan Jakarta Selatan" mulai naik perlahan dalam 3 sampai 4 bulan setelah deploy.

Hybrid: Pakai Semua Strategi di Tempat yang Tepat

Aplikasi modern jarang memakai satu strategi saja. Pola yang sering dipakai di proyek client:

• Landing page dan blog: SSG atau ISR
• Halaman kategori e-commerce: ISR atau SSR dengan revalidate cepat
• Halaman detail produk: ISR
• Checkout: SSR (karena harga dan stok real-time)
• Dashboard pengguna setelah login: CSR

Ini bukan aturan baku, tapi titik awal yang aman. Selalu validasi dengan data dari Web Vitals dan Google Search Console, jangan hanya mengandalkan tebakan teknis.

Pertanyaan Umum

Apakah Next.js otomatis SSR?

Tidak. Next.js modern dengan App Router default-nya adalah SSG dengan opsi opt-in ke SSR per komponen. Anda bisa kombinasikan dalam satu aplikasi.

Bagaimana cek website saya pakai CSR atau SSR?

Buka halaman, klik kanan lalu "View Page Source". Kalau HTML berisi konten lengkap, itu SSR atau SSG. Kalau hanya berisi <div id="root"></div> kosong, itu CSR.

Apakah CSR aman untuk SEO kalau pakai prerendering?

Prerendering bisa membantu, tapi tidak setara SSR penuh. Mesin pencari modern bisa render JavaScript, tapi prosesnya tertunda dan tidak konsisten. Untuk halaman penting, SSR atau SSG tetap lebih aman.

Berapa lama migrasi dari CSR ke SSR?

Tergantung kompleksitas. Aplikasi React kecil bisa migrasi ke Next.js dalam 2 sampai 4 minggu. Aplikasi besar dengan banyak state global bisa butuh 2 sampai 3 bulan.

Apakah SSR selalu lebih lambat secara backend?

Ya, SSR butuh CPU server lebih besar dibanding SSG. Tapi dengan caching CDN dan ISR, biaya bisa ditekan signifikan. Untuk trafik di bawah 100 ribu pageview per bulan, perbedaan biayanya biasanya tidak besar.

Penutup

Strategi rendering bukan soal mana yang paling modern, tapi mana yang menjawab kebutuhan halaman. Default-nya untuk website bisnis di 2026 adalah SSG atau ISR untuk konten publik, SSR untuk halaman personalisasi, dan CSR hanya untuk area di balik login. Sebelum memilih, tanyakan tiga hal, apakah halaman ini perlu diindeks Google, seberapa sering kontennya berubah, dan seberapa berat interaksinya. Jawaban ketiga pertanyaan itu hampir selalu mengarahkan ke pilihan yang tepat.