Memahami Server Components di Next.js
Panduan praktis memakai Server Components, App Router, data fetching, dan boundary client agar halaman lebih ringan dan ramah crawler.
Mulai dari Pertanyaan Sederhana
Server Components paling berguna saat membuat halaman lebih sederhana, bukan saat dipakai sebagai label teknologi. Pertanyaan pertama saya: bagian ini butuh state browser atau tidak? Kalau tidak, bagian itu biasanya aman tetap di server. Copy marketing, tabel harga, konten artikel, detail project, dan JSON-LD tidak perlu hydrate.
App Router memberi boundary yang enak untuk website portfolio, service, dan konten. Route bisa mengambil data, membuat metadata, mengirim structured data, lalu hanya menyerahkan bagian interaktif ke client component. Teks penting tetap terkirim sebagai HTML, sedangkan tombol, menu, form, dan enhancement kecil hydrate terpisah.
Jangan Terlalu Cepat Menandai use client
Manfaat Server Components hilang saat terlalu banyak komponen diberi use client. Jika hanya satu child butuh click handler, pindahkan interaksi ke child itu. Biarkan page server memegang konten dan SEO. Biarkan client component memegang interaksi. Kebiasaan kecil ini mencegah bundle JavaScript membesar tanpa sadar.
Tradeoff yang Perlu Dijaga
Server Components bukan pengganti semua state. Filter yang harus shareable bisa masuk URL. State UI lokal tetap di client. Mutasi data bisa memakai server action atau API route sesuai kebutuhan. Yang penting adalah boundary tertulis jelas agar fitur berikutnya tidak mencampur rendering, data, dan interaksi dalam satu tempat.
Checklist Sebelum Artikel Dipublikasikan
Sebelum menerbitkan artikel teknis atau marketing, saya mengecek tiga hal: siapa pembacanya, aksi apa yang diharapkan, dan keberatan apa yang perlu dijawab. Artikel teknis butuh contoh, tradeoff, dan catatan implementasi. Artikel bisnis butuh konteks, bukti, timeline, dan langkah berikutnya.
Saya juga mengecek performa halaman. Gambar harus punya dimensi jelas, media di bawah layar sebaiknya lazy-load, dan JavaScript client dibatasi pada interaksi yang benar-benar perlu. Jika halaman sebagian besar berisi teks dan gambar, ia tidak seharusnya mengirim runtime animasi besar hanya untuk efek yang tidak mengubah pemahaman.
Metadata ikut dianggap sebagai bagian dari konten. Judul harus spesifik, deskripsi harus menjelaskan isi halaman dengan konkret, dan tanggal update harus terlihat. Dengan begitu pembaca dan mesin pencari sama-sama mendapat sinyal yang lebih jelas.
