Advanced · Level 14: PerformanceAdvanced65 menitBahasa Indonesia

Server vs Client Rendering Decisions

Memilih rendering boundary dari kebutuhan data, interaksi, browser API, dan biaya JavaScript yang benar-benar relevan.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan pekerjaan yang lebih tepat di server dan di browser
Membuat keputusan boundary dari capability, bukan dari nama component
Menjaga props ke Client Component tetap serializable
Menjelaskan trade-off sebuah keputusan rendering

Next.jsServer ComponentsClient ComponentsRendering Boundaries

Isi lesson

6 blok

1.
Mulai dari kebutuhan component, bukan dari page yang sedang dibukaBelum selesaiWajib
2.
Peta keputusan untuk satu route courseBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Jangan meneruskan callback server sebagai props clientBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Mulai dari kebutuhan component, bukan dari page yang sedang dibuka

Wajib

Page dan layout App Router adalah Server Components secara default. Itu cocok untuk data fetching, content route, secret server, serta UI yang tidak membutuhkan browser capability. Client Component diperlukan ketika component memakai state, event handler, lifecycle, custom hook, atau API seperti localStorage dan window. Sebuah page sering memakai keduanya: server parent menyiapkan data serta content, lalu meneruskan data serializable ke child interaktif. Hindari keputusan global seperti “dashboard harus client” atau “semua list harus server”. Baca kebutuhan component yang paling kecil dan lihat apa yang benar-benar harus terjadi di browser.

Bagian ini memengaruhi progres lesson.

Peta keputusan untuk satu route course

Wajib

const coursePageParts = [
  {
    component: "CoursePage",
    rendering: "server",
    reason: "fetch course data and render title, description, and lesson list",
  },
  {
    component: "CourseFilter",
    rendering: "client",
    reason: "stores query state and handles input onChange",
    receives: "courses: CourseSummary[]",
  },
  {
    component: "LessonSummary",
    rendering: "server",
    reason: "displays serializable lesson data without browser interaction",
  },
];

Keputusan ini tidak menilai component dari ukuran atau lokasi foldernya. CourseFilter client karena capability-nya, sedangkan parent dan LessonSummary dapat tetap server karena hanya menyiapkan atau menampilkan data. Props dari server ke client harus berupa data yang dapat diserialisasi, bukan callback function server.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Classify course rendering boundaries

Petakan bagian route course sebagai server atau client berdasarkan pekerjaan yang benar-benar dilakukan di browser.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

6 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Manakah alasan paling kuat untuk menjadikan component sebagai Client Component?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

Jangan meneruskan callback server sebagai props client

Props yang mengalir dari Server Component ke Client Component perlu dapat diserialisasi. Rancang data dan action boundary dengan jelas. Bila component client perlu melakukan mutation, gunakan pattern Next.js yang sesuai alih-alih memperlakukan function server biasa sebagai props browser.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Server cocok untuk data, content route, secret, dan UI tanpa browser behavior.
Client cocok untuk state, event, lifecycle, custom hook, dan browser API.
Satu route dapat menggabungkan server parent dengan child client kecil.
Props lintas boundary harus dapat diserialisasi.
Berikutnya, boundary client akan diperkecil secara praktis agar tidak menarik seluruh page ke browser.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Mulai dari kebutuhan component, bukan dari page yang sedang dibuka.

Memuat progres Review module