Next.js vs React Murni: Mana yang Lebih Tepat untuk Startup Indonesia?

React dan Next.js sering dibahas seolah pilihan antara keduanya adalah soal preferensi atau selera. Kenyataannya, ini adalah keputusan arsitektur yang punya implikasi nyata — terutama kalau Anda membangun produk yang butuh ditemukan di Google dan harus berjalan lancar di smartphone dengan koneksi yang tidak selalu stabil.

Saya tulis artikel ini berdasarkan pengalaman membangun website dan produk web untuk berbagai klien di Indonesia — dari landing page UMKM sampai platform SaaS startup.

Apa Perbedaan Dasarnya?

React adalah library JavaScript untuk membangun antarmuka. Secara default, React menggunakan Client-Side Rendering (CSR): browser pengguna yang melakukan semua pekerjaan rendering halaman. Server hanya mengirim file JavaScript yang kemudian dieksekusi di browser.

Next.js adalah framework yang dibangun di atas React. Ia menambahkan kemampuan yang tidak dimiliki React secara native:

• Server-Side Rendering (SSR): halaman dirender di server sebelum dikirim ke browser
• Static Site Generation (SSG): halaman di-pre-render saat build time
• App Router dengan file-based routing: struktur URL otomatis dari struktur folder
• API Routes: endpoint backend sederhana tanpa server terpisah
• Image Optimization: kompresi dan format gambar otomatis

Mengapa Pilihan Ini Penting untuk Konteks Indonesia

Ada dua faktor yang membuat keputusan ini lebih kritikal di Indonesia dibanding pasar lain:

Kondisi jaringan mobile yang bervariasi. Sebagian besar pengguna internet Indonesia mengakses website dari smartphone, dan koneksi di luar kota-kota besar sering tidak stabil. React murni dengan CSR memaksa pengguna menunggu seluruh bundle JavaScript didownload dan dieksekusi sebelum melihat konten apapun. Di koneksi 4G yang lemah, ini bisa berarti blank screen selama 5-8 detik — cukup lama untuk sebagian besar pengguna memilih menutup tab.

SEO sebagai channel akuisisi utama. Startup Indonesia dengan budget terbatas sering sangat bergantung pada organic search. Ini membuat SEO bukan hal yang bisa dikompromikan. Dan ini adalah kelemahan terbesar React murni.

Masalah SEO di React Murni

Ini yang sering tidak dipahami dengan benar:

Saat Googlebot mengunjungi URL website Anda yang dibangun dengan React murni, server mengirimkan HTML yang hampir kosong — hanya <div id="root"></div> dengan tag script. Konten sebenarnya baru muncul setelah JavaScript dieksekusi.

Googlebot memang bisa merender JavaScript, tapi prosesnya:

1. Tidak semua Googlebot memiliki kemampuan JavaScript rendering yang sama
2. Halaman yang butuh JavaScript rendering masuk antrian terpisah yang lebih lambat diproses
3. Konten yang tidak terlihat saat first load berisiko tidak diindeks dengan benar

Dampak nyatanya: website React murni yang tidak dikonfigurasi khusus untuk SEO hampir pasti akan memiliki performa organic search yang jauh di bawah potensinya.

Keunggulan Nyata Next.js

SSG untuk Halaman yang Jarang Berubah

Untuk halaman seperti landing page, halaman layanan, atau artikel blog, Static Site Generation adalah ideal. Halaman di-pre-render saat build — artinya saat user mengakses URL tersebut, server langsung mengirimkan HTML lengkap tanpa proses apapun.

Hasilnya: Time to First Byte (TTFB) sangat rendah, LCP (Largest Contentful Paint) optimal, dan Googlebot langsung melihat konten penuh.

SSR untuk Halaman yang Perlu Data Real-Time

Dashboard pengguna, halaman pencarian dengan filter, atau halaman yang perlu data terbaru dari database — ini cocok untuk SSR. Next.js menangani ini dengan getServerSideProps atau Server Components (di App Router).

File-Based Routing yang Menghilangkan Konfigurasi

Di React murni, routing harus dikonfigurasi manual dengan library seperti React Router. Di Next.js, struktur folder langsung menentukan URL:

app/
  page.tsx              → /
  layanan/
    page.tsx            → /layanan
    company-profile/
      page.tsx          → /layanan/company-profile
  blog/
    [slug]/
      page.tsx          → /blog/[slug] (dynamic)

Untuk startup dengan tim kecil, ini menghemat waktu konfigurasi dan mengurangi potensi kesalahan routing.

API Routes untuk Backend Ringan

Next.js memiliki kemampuan membuat API endpoint dalam folder yang sama. Untuk kebutuhan sederhana seperti form contact, webhook notifikasi, atau operasi database ringan — ini menghilangkan kebutuhan server terpisah di awal.

Contoh praktis: form kontak yang mengirim email bisa diimplementasikan sebagai API Route dalam proyek Next.js yang sama, tanpa Express server terpisah.

Kapan React Murni Lebih Masuk Akal

Ada skenario di mana React murni (atau Create React App / Vite) lebih tepat:

Dashboard internal yang tidak perlu SEO. Kalau Anda membangun tool internal untuk tim, yang diakses setelah login, SEO tidak relevan. Di sini, kompleksitas tambahan Next.js tidak memberi nilai.

Single Page Application dengan state yang sangat kompleks. Kalau aplikasi Anda punya state management yang sangat intensif — seperti editor dokumen real-time atau aplikasi desain grafis berbasis web — kadang CSR murni dengan React lebih straightforward.

Tim yang sudah punya infrastruktur dan workflow React yang matang. Migrasi ke Next.js bukan tanpa biaya. Kalau tim sudah sangat produktif dengan React murni dan punya solusi untuk masalah SEO (pre-rendering tools, dll), mungkin lebih baik tidak migrasi hanya karena tren.

Trade-off yang Perlu Dipahami

Next.js bukan tanpa kelemahannya:

• Build time yang lebih panjang untuk site dengan ribuan halaman statis
• Cold start pada serverless deployment jika menggunakan SSR (meskipun ini sudah sangat diminimasi dengan Next.js 14+)
• Kurva belajar untuk tim yang baru pertama kali bekerja dengan Server Components dan paradigma baru App Router
• Vendor lock-in kalau terlalu bergantung pada fitur spesifik Vercel

Untuk sebagian besar startup Indonesia yang membangun website atau web app yang berorientasi publik dan membutuhkan organic traffic — trade-off ini sepadan.

Rekomendasi Praktis

Kalau Anda startup dan membangun sesuatu yang:

• Butuh ditemukan di Google
• Target pasar pengguna mobile Indonesia
• Tim kecil (1-5 developer)
• Belum punya kebutuhan backend yang sangat kompleks

Next.js adalah pilihan yang lebih tepat dari React murni.

Kalau Anda membangun:

• Dashboard internal / admin panel
• Aplikasi yang 100% di-lock di belakang autentikasi
• Tool yang lebih mirip desktop app berbasis web

React murni atau framework seperti Vite + React Router bisa lebih efisien.

---

Di Velnafa, kami menggunakan Next.js App Router untuk semua proyek website dan landing page klien. Pilihan ini bukan karena "Next.js sedang trending" — tapi karena kombinasi performa, SEO, dan developer experience-nya yang paling sesuai untuk kebutuhan bisnis lokal Indonesia yang bergantung pada organic traffic. Lihat layanan web development kami untuk detail lebih lanjut.