Panduan praktis memakai Server Components, App Router, data fetching, dan boundary client agar halaman lebih ringan dan ramah crawler.
Mulai dari Pertanyaan Sederhana
React Server Components (RSC) memberikan dampak paling maksimal saat digunakan untuk menyederhanakan arsitektur aplikasi, bukan sekadar dijadikan tren teknologi baru. Pertanyaan mendasar yang selalu saya tanyakan di awal adalah: apakah bagian UI ini memerlukan state browser atau event listener pengguna?
Jika jawabannya tidak, maka komponen tersebut wajib tetap berada di server. Komponen seperti copy pemasaran, layout grid, artikel konten, detail portfolio, dan skema JSON-LD tidak perlu dihidrasi di browser client. Pengguna mendapatkan HTML utuh yang langsung terbaca oleh search engine crawler.
Jangan Terlalu Cepat Menandai use client
Keunggulan performa Server Components akan sirna seketika jika developer terlalu mudah menyematkan direktif use client di tingkat atas halaman. Jika hanya ada satu tombol kecil yang membutuhkan onClick handler, isolasikan interaksi tersebut ke dalam leaf component terkecil.
Biarkan halaman utama bertindak sebagai Server Component yang menyusun data, metadata, dan structured data, kemudian suntikkan komponen interaktif sebagai child.
Tradeoff yang Perlu Dijaga
Server Components bukanlah solusi pengganti semua state. State yang harus dapat dibagikan melalui URL tetap sebaiknya disimpan di query params. State visual instan tetap dikelola oleh client state (Zustand / React state). Kuncinya adalah batas boundary yang tegas dan terdokumentasi.
Optimasi Bundle dan SEO
Dengan memindahkan parsing data berat dan pustaka markdown/sanitasi ke server, ukuran bundle JavaScript yang dikirim ke browser dapat dipangkas drastis hingga lebih dari 60%, memberikan skor Core Web Vitals (LCP, INP, CLS) yang hijau sempurna.
Tertarik Membangun Proyek Web dengan Standar Ini?
Saya membantu bisnis dan founder merancang website, landing page, dan web app berkinerja tinggi yang siap konversi.
