Server Components dalam Next.js 14 mengurangkan saiz bundle sebanyak kira-kira 60% dan memacu masa 'first-paint' ke bawah 200 ms pada halaman blog tipikal, yang bermaksud pengguna dapat melihat kandungan dengan lebih cepat dan enjin carian menerima HTML yang telah dirender sepenuhnya.

Versi baharu ini mengubah model pelaksanaan lalai bagi aplikasi React yang dibina dengan Next.js. Jika sebelum ini setiap komponen dihantar ke pelayar, pembangun kini boleh menandakan bahagian UI sebagai “Server Components” supaya ia hanya berjalan di bahagian backend. Kod untuk komponen tersebut tidak akan sampai ke klien, meninggalkan pelayar hanya dengan bahagian yang memerlukan interaktiviti.

Mengapa peralihan ini penting

Pembangun React telah lama bergelut dengan tiga masalah yang saling berkait: lambakan permintaan rangkaian, bundle JavaScript yang besar, dan pemuatan halaman yang perlahan. Isu-isu tersebut juga menjejaskan SEO kerana HTML awal yang dihantar kepada crawler sering kali kosong, memaksa bot carian menunggu proses 'client-side hydration'. Next.js 14 menangani punca utama dengan memindahkan kerja-kerja berat data keluar sepenuhnya daripada klien.

Bagaimana Server Components berbeza daripada model lama

  • Server Components – Berjalan di pelayan, mengambil data, berkomunikasi dengan pangkalan data, dan menghasilkan HTML biasa. JavaScript mereka tidak pernah dihantar melalui rangkaian.
  • Client Components – Kekal di dalam pelayar dan mengendalikan interaksi UI seperti klik butang, penghantaran borang, atau mana-mana komponen yang menggunakan React state atau effects.

Kerangka kerja ini menguatkuasakan pembahagian ini dengan arahan yang mudah. Menambah use client di bahagian atas fail memberitahu Next.js untuk melayan komponen tersebut sebagai bahagian klien sahaja. Apa-apa sahaja tanpa penanda tersebut akan menjadi Server Component secara lalai.

Angka dunia nyata

Satu eksperimen pantas pada halaman blog peribadi menggambarkan impaknya. Selepas memindahkan proses 'fetch' ke dalam Server Component dan membiarkan pelayan merender senarai tersebut sebagai HTML statik, bundle JavaScript mengecil sebanyak 60% dan halaman dirender dalam masa kurang daripada 200 ms.

Corak pelapisan praktikal

  1. Lapisan bawah (Server) – Ambil data daripada API atau pangkalan data. Simpan sebarang logik peribadi di sini; ia tidak akan meninggalkan pelayan.
  2. Lapisan tengah (Server) – Tukar data mentah kepada penanda (markup) HTML tulen. Lapisan ini masih boleh menggunakan sintaks JSX React tetapi kekal sebagai server-only.
  3. Lapisan atas (Client) – Masukkan widget kecil yang terasing untuk interaktiviti. Contoh tipikal ialah butang “like”, borang komen, atau menu lungsur (dropdown) yang memerlukan state.

Mengikuti hierarki ini memastikan sebahagian besar aplikasi kekal ringan sambil mengekalkan rasa dinamik yang diharapkan oleh pengguna.

Langkah yang boleh anda cuba hari ini

  1. Imbas kod sumber anda untuk mencari komponen yang menggunakan useEffect semata-mata untuk mengambil data.
  2. Ekstrak panggilan 'fetch' ke dalam Server Component baharu dan biarkan ia mengembalikan penanda (markup) yang telah dirender.
  3. Cipta komponen klien yang minimal (tambah use client di bahagian atas) untuk sebarang elemen interaktif yang masih ada.
  4. Jalankan semula penganalisis bundle anda; anda sepatutnya melihat penurunan saiz yang ketara.

Elakkan daripada menyebarkan use client di merata-rata tempat. Jika sesuatu komponen tidak bergantung pada React state, context, atau lifecycle hooks, biarkan ia sebagai Server Component. Semakin banyak kod yang anda jauhkan daripada klien, semakin kecil saiz muat turun dan semakin pantas halaman tersebut.

Rumusan: Dengan memindahkan pengambilan data dan rendering yang berat ke pelayan, Next.js 14 membolehkan anda menghantar jauh lebih sedikit JavaScript, menyampaikan HTML yang dirender sepenuhnya secara serta-merta, dan mengekalkan interaktiviti di tempat yang benar-benar penting. Hasilnya ialah pengalaman web yang lebih pantas dan ramping yang memberi manfaat kepada pengguna dan juga enjin carian.