Dua Jenis Komponen

Setiap komponen yang kamu tulis sejauh ini di bagian ini dijalankan di suatu tempat yang mungkin tidak kamu sadari: di server. Itu bukan mode khusus yang kamu aktifkan: ini adalah pengaturan bawaan, dan inilah gagasan terpenting dalam Next.js.

Ada tepat dua jenis komponen, dan masing-masing memberimu sesuatu yang tidak bisa diberikan oleh jenis lainnya.

Komponen server: pilihan default

• Komponen ini dijalankan sekali, di server, sebelum halaman dikirim
• Komponen ini bisa bersifat async, jadi bisa await data langsung di dalam komponen
• Komponen ini tidak mengirimkan JavaScript ke browser: pengguna mengunduh hasilnya, bukan kodenya

Kendalanya: saat halaman sampai ke browser, komponen server sudah selesai. Komponen itu hanya berupa snapshot. Komponen itu tidak dapat mengingat apa pun, merespons klik, atau berubah.

Komponen client: ikut serta

Saat kamu ingin halaman merespons, tandai sebuah file agar berjalan di browser dengan satu baris di bagian paling atas:

'use client';

Itu menandai file sebagai komponen client, dan hanya komponen client yang boleh menggunakan:

• Hooks: useState, useEffect, dan lainnya
• Event handler: onClick, onChange, …
• API browser: window, localStorage

Perhatikan komprominya. Komponen server cepat dan tidak banyak memakan sumber daya, tetapi tidak interaktif. Komponen client interaktif, tetapi kodenya harus diunduh dan dijalankan di browser.

Jadi, mulai sekarang, pertanyaan yang akan kamu ajukan tentang setiap komponen bukan "mana yang saya suka?", melainkan "apakah bagian khusus ini perlu merespons pengguna?" Jika jawabannya tidak (dan biasanya memang begitu), biarkan bagian itu tetap di server.