Server Components pada Next.js 14 memangkas ukuran bundle sekitar 60% dan mendorong waktu first-paint hingga di bawah 200 ms pada halaman blog tipikal, yang berarti pengguna melihat konten lebih cepat dan mesin pencari menerima HTML yang telah dirender sepenuhnya.

Rilis baru ini mengubah model eksekusi default untuk aplikasi React yang dibangun dengan Next.js. Jika sebelumnya setiap komponen dikirim ke browser, kini pengembang dapat menandai bagian UI sebagai “Server Components” sehingga hanya berjalan di backend. Kode untuk komponen tersebut tidak pernah sampai ke client, sehingga browser hanya menerima bagian-bagian yang membutuhkan interaktivitas.

Mengapa perubahan ini penting

Pengembang React telah lama bergulat dengan tiga masalah yang saling terkait: rentetan permintaan jaringan (network requests), bundle JavaScript yang membengkak, dan pemuatan halaman yang lambat. Masalah-masalah tersebut juga merugikan SEO karena HTML awal yang dikirim ke crawler sering kali kosong, sehingga memaksa bot pencari menunggu proses client-side hydration. Next.js 14 mengatasi akar masalahnya dengan memindahkan pekerjaan berat berbasis data sepenuhnya keluar dari client.

Perbedaan Server Components dengan model lama

  • Server Components – Berjalan di server, mengambil data (fetch data), berkomunikasi dengan database, dan menghasilkan HTML murni. JavaScript-nya tidak pernah dikirim melalui jaringan.
  • Client Components – Tetap berada di browser dan menangani interaksi UI seperti klik tombol, pengiriman formulir, atau komponen apa pun yang menggunakan React state atau effects.

Framework ini menerapkan pembagian ini dengan sebuah direktif sederhana. Menambahkan use client di bagian atas file memberi tahu Next.js untuk memperlakukan komponen tersebut hanya sebagai client-side. Apa pun tanpa penanda tersebut secara default akan menjadi Server Component.

Angka di dunia nyata

Sebuah eksperimen cepat pada halaman blog pribadi mengilustrasikan dampaknya. Setelah memindahkan proses fetch ke dalam Server Component dan membiarkan server merender daftar tersebut sebagai HTML statis, bundle JavaScript menyusut sebesar 60% dan halaman dirender dalam waktu kurang dari 200 ms.

Pola pelapisan praktis

  1. Lapisan bawah (Server) – Mengambil data dari API atau database. Simpan semua logika privat di sini; logika tersebut tidak akan pernah meninggalkan server.
  2. Lapisan tengah (Server) – Mengubah data mentah menjadi markup HTML murni. Lapisan ini masih dapat menggunakan sintaks JSX React tetapi tetap khusus untuk server.
  3. Lapisan atas (Client) – Masukkan widget kecil yang terisolasi untuk interaktivitas. Contoh tipikalnya adalah tombol “like”, formulir komentar, atau menu dropdown yang memerlukan state.

Mengikuti hierarki ini menjaga sebagian besar aplikasi tetap ringan sambil tetap mempertahankan nuansa dinamis yang diharapkan pengguna.

Langkah yang dapat Anda coba hari ini

  1. Pindai codebase Anda untuk mencari komponen yang menggunakan useEffect semata-mata untuk mengambil data.
  2. Ekstrak pemanggilan fetch ke dalam Server Component baru dan biarkan ia mengembalikan markup yang telah dirender.
  3. Buat komponen client minimal (tambahkan use client di bagian atas) untuk elemen interaktif apa pun yang tersisa.
  4. Jalankan kembali bundle analyzer Anda; Anda akan melihat penurunan ukuran yang nyata.

Hindari menyebar use client di mana-mana. Jika sebuah komponen tidak bergantung pada React state, context, atau lifecycle hooks, biarkan sebagai Server Component. Semakin banyak kode yang Anda simpan di luar client, semakin kecil ukuran unduhan dan semakin cepat halamannya.

Kesimpulan: Dengan memindahkan pengambilan data dan rendering berat ke server, Next.js 14 memungkinkan Anda mengirim jauh lebih sedikit JavaScript, memberikan HTML yang dirender sepenuhnya secara instan, dan mempertahankan interaktivitas di tempat yang benar-benar penting. Hasilnya adalah pengalaman web yang lebih cepat dan ramping yang menguntungkan pengguna maupun mesin pencari.