SPA vs Server-Rendered: Pertimbangan untuk SEO

Setiap kali saya mulai proyek baru dengan Vue, pertanyaan ini selalu muncul lebih dulu daripada urusan state management atau struktur komponen: apakah halaman ini boleh dirender penuh di browser (client-side rendering / CSR), atau harus sudah punya konten di HTML yang dikirim server? Ini bukan soal selera arsitektur semata, tapi soal siapa yang akan membaca halaman itu duluan — mesin pencari, bot media sosial, atau manusia dengan koneksi seadanya. Kalau salah pilih, halaman bisa terlihat sempurna di layar developer tapi kosong di mata crawler.

Kenapa "Render di Client Saja" Bisa Jadi Masalah

Googlebot memang sudah bisa menjalankan JavaScript — dia merender halaman lewat mesin mirip Chromium sebelum mengindeksnya. Tapi proses ini berjalan dua tahap: crawl dulu, baru render belakangan, dengan antrean dan anggaran render (render budget) yang tidak selalu langsung. Untuk situs kecil biasanya masih tertangani, tapi bukan jaminan cepat atau konsisten. Yang lebih pasti bermasalah adalah crawler lain yang jauh lebih sederhana: bot pratinjau tautan di aplikasi chat, scraper untuk Open Graph, atau mesin pencari selain Google — banyak di antaranya sama sekali tidak menjalankan JavaScript. Kalau konten dan meta tag penting baru muncul setelah fetch selesai dan Vue selesai mounting, mereka hanya akan melihat <div id="app"></div> kosong.

Ada juga sisi manusia: pembaca dengan koneksi lambat atau perangkat kelas bawah akan menatap layar putih lebih lama kalau semua konten menunggu bundle JavaScript selesai diunduh, diparse, lalu request data dijalankan. Untuk halaman yang tujuannya dibaca — artikel, dokumentasi, halaman produk — ini langsung memengaruhi kesan pertama, bukan cuma soal skor Lighthouse.

Kapan Konten Wajib Ada di HTML Awal

Aturan praktis yang saya pakai: kalau sebuah halaman punya tujuan untuk ditemukan atau dibagikan, kontennya harus sudah ada di HTML pertama. Ini termasuk artikel blog, halaman landing, halaman produk atau layanan, dan apa pun yang bisa muncul di hasil pencarian atau di-share sebagai tautan. Elemen kunci yang wajib ada sejak respons pertama: judul (<title>), meta description, tag Open Graph, heading utama, dan isi teks inti — bukan cuma skeleton loading.

Sebaliknya, halaman yang berada di balik login, bersifat sangat interaktif, dan tidak perlu terindeks — dashboard admin, panel pengaturan, alat internal — jauh lebih aman dibiarkan sebagai SPA murni. Di sana kecepatan interaksi setelah aplikasi jalan jauh lebih penting daripada konten awal, karena memang tidak ada crawler yang perlu membacanya.

Opsi Teknis: SSR, SSG, dan Pendekatan Hybrid

Di ekosistem Vue, jalan paling umum adalah Nuxt, yang menyediakan server-side rendering (render di server per request) maupun static site generation (halaman di-build jadi HTML statis lebih dulu). SSG cocok untuk konten yang jarang berubah — artikel yang sudah publish, halaman dokumentasi — karena hasilnya bisa di-cache dan disajikan sangat cepat. SSR cocok untuk halaman yang datanya dinamis tapi tetap perlu terindeks, misalnya halaman produk dengan stok atau harga yang berubah.

Ada juga pendekatan tengah seperti partial hydration atau "islands": sebagian besar halaman dikirim sebagai HTML statis, dan hanya komponen yang benar-benar butuh interaktivitas yang di-hydrate jadi JavaScript aktif di browser. Ini menjaga konten tetap terbaca sejak awal tanpa mengorbankan interaktivitas di bagian yang memang butuh.

Cara Praktis Memutuskan

Yang saya lakukan biasanya sederhana: matikan JavaScript di browser, lalu buka halaman itu. Kalau konten inti masih terbaca, kemungkinan besar aman untuk SEO. Kalau yang muncul cuma halaman kosong atau spinner, itu tanda peringatan bahwa halaman tersebut, jika memang perlu terindeks, harus dipindah ke SSR atau SSG.

Konten yang penting untuk ditemukan harus bisa dibaca tanpa menunggu JavaScript. Sisanya, biarkan SPA bekerja sebebas-bebasnya.

Takeaway

SPA dan server-rendering bukan pilihan ideologis, keduanya alat untuk kebutuhan berbeda. Pisahkan halaman berdasarkan apakah dia perlu ditemukan/dibagikan atau tidak, lalu pilih strategi render sesuai kebutuhan itu — bukan sesuai kenyamanan arsitektur semata.