Kami Migrasi dari React SPA ke Astro, Ini Hasilnya Setelah 3 Bulan

Tiga bulan lalu, kami membuat keputusan migrasi website utama kami dari React SPA (Vite) ke Astro. Hasilnya? Lighthouse score naik drastis, dan kami tidak menyesal.

Artikel ini bukan tutorial, ini adalah pengalaman jujur kami, termasuk bagian yang menyakitkan.

Kenapa Kami Pakai React SPA dari Awal?

Saat pertama kali membangun website Cigi, React adalah pilihan alami. Tim kami sudah familiar, ekosistemnya kaya, dan development experience-nya nyaman. Kami pakai Vite sebagai build tool — cepat, ringan, dan setup-nya mudah.

Tapi ada satu masalah besar yang kami abaikan terlalu lama: SEO.

React SPA merender semua konten di sisi klien (client-side rendering). Artinya, ketika Googlebot mengunjungi website kami, yang dia lihat pertama kali hanya sebuah HTML kosong — konten muncul belakangan setelah JavaScript dijalankan. Googlebot memang bisa menunggu, tapi tidak selalu, dan tidak selalu sempurna.

Hasilnya? Website kami hampir tidak muncul di Google untuk keyword apapun yang relevan.

Kenapa Pilih Astro?

Kami evaluasi beberapa opsi: Next.js, Remix, SvelteKit, dan Astro.

Next.js sebenarnya pilihan paling aman. Ekosistemnya besar, dokumentasinya lengkap. Tapi untuk website yang sebagian besar isinya konten statis (landing page, blog, portofolio), Next.js terasa terlalu berat — ada overhead yang tidak kami butuhkan.

Astro menarik karena satu konsep: zero JavaScript by default. Astro hanya mengirim JavaScript ke browser kalau kamu memang minta. Untuk website yang mayoritas kontennya statis, ini adalah pendekatan yang sangat masuk akal.

Bonus: Astro mendukung komponen React, Vue, Svelte, dan lainnya dalam satu project lewat fitur Islands Architecture. Jadi kami tidak perlu membuang semua kode React yang sudah ada.

Proses Migrasinya Seperti Apa?

Jujurnya: lebih smooth dari yang kami bayangkan, tapi ada beberapa bagian yang butuh waktu.

Yang mudah: Sebagian besar komponen React kami bisa langsung dipindahkan ke Astro dengan minimal perubahan. Astro mendukung .jsx files secara native, jadi tidak perlu rewrite dari nol.

Yang perlu adaptasi: Cara Astro menangani routing berbeda dari React Router. Di Astro, routing berbasis file system — mirip Next.js tapi lebih simpel. Kami perlu merestrukturisasi folder project, tapi setelah paham pola-nya, rasanya lebih intuitif.

Yang butuh waktu paling lama: Integrasi dengan Sanity CMS. Kami harus menyesuaikan cara fetch data dari Sanity agar kompatibel dengan Astro's content collections dan static generation pipeline. Ada beberapa jam yang terbuang di sini karena dokumentasinya belum selengkap ekosistem Next.js.

Hasilnya: Angka Bicara

Setelah tiga bulan live, inilah yang berubah:

Lighthouse Performance Score naik dari rata-rata 62 menjadi 94 di mobile. Ini bukan angka yang dibuat-buat — Astro memang secara default menghasilkan HTML statis yang sudah dioptimasi.

First Contentful Paint (FCP) turun dari sekitar 3.2 detik menjadi 0.8 detik. Pengguna langsung melihat konten, bukan layar putih kosong.

Total Blocking Time (TBT) hampir nol. Karena tidak ada JavaScript besar yang perlu dijalankan saat halaman pertama kali dimuat.

Indexability: Halaman-halaman website kami mulai muncul di Google secara konsisten. Sebelum migrasi, hanya homepage yang terindeks. Sekarang artikel blog dan halaman layanan sudah mulai muncul untuk keyword yang kami targetkan.

Apa yang Kami Pelajari

Pertama, pilih tool yang sesuai dengan kebutuhan, bukan yang paling populer. React SPA sangat bagus untuk web application yang interaktif seperti dashboard atau SaaS. Tapi untuk website marketing dan blog, static-first approach seperti Astro jauh lebih tepat.

Kedua, SEO bukan afterthought — ini adalah keputusan arsitektur. Kami belajar ini dengan cara yang mahal: membangun website selama setahun dengan framework yang salah untuk tujuan kami.

Ketiga, Islands Architecture adalah masa depan. Konsep mengirim JavaScript hanya untuk bagian yang membutuhkan interaktivitas adalah pendekatan yang sangat pragmatis. Tidak semua halaman butuh React yang berat — dan Astro membiarkan kamu memilih dengan granular.

Apakah Astro Cocok untuk Semua Project?

Tidak. Dan ini penting untuk kami tegaskan.

Kalau kamu membangun aplikasi yang sangat interaktif — think real-time dashboard, aplikasi dengan banyak state management, atau SaaS dengan fitur kompleks — Astro bukan pilihan terbaik. Dalam kasus itu, Next.js atau SvelteKit lebih sesuai.

Tapi kalau kamu membangun website company, blog, portofolio, atau landing page — bahkan yang sesekali butuh komponen interaktif — Astro adalah pilihan yang sangat solid di 2025.

Di Cigi Digital, kami selalu memilih stack berdasarkan kebutuhan project, bukan tren. Kalau kamu ingin diskusi tentang arsitektur web yang tepat untuk bisnis kamu, kami terbuka untuk ngobrol.