Advanced · Level 10: Next.js App RouterAdvanced50 menitBahasa Indonesia

Server Components

Mengenal Server Components sebagai default pada App Router dan memilih UI yang tidak membutuhkan interaksi browser.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan bahwa page dan layout App Router adalah Server Components secara default
Mengidentifikasi UI statis yang dapat tetap berada di server
Membedakan render server dari kebutuhan interaksi browser

Next.jsServer ComponentsApp RouterRendering

Isi lesson

5 blok

1.
Mulai dari server, lalu tambahkan client bila memang diperlukanBelum selesaiWajib
2.
Page dashboard tanpa kebutuhan browser interaktifBelum selesaiWajib
3.
Server Component adalah default, bukan hadiah yang harus dipertahankan dengan paksaBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Mulai dari server, lalu tambahkan client bila memang diperlukan

Wajib

Pada App Router, page dan layout adalah Server Components secara default. Artinya, kamu tidak perlu menulis directive khusus hanya untuk menampilkan heading, daftar course, navigation statis, atau content route biasa. Ini adalah titik awal yang baik: pikirkan dulu bagian UI yang hanya perlu menerima dan menampilkan data.

Server Component bukan berarti setiap hal harus dibuat rumit atau langsung terhubung ke database. Di lesson ini, contoh data masih sederhana. Yang penting adalah keputusan batasnya: bila bagian UI tidak membutuhkan state, event handler, effect, atau browser API, biarkan ia tetap sebagai Server Component.

Bagian ini memengaruhi progres lesson.

Page dashboard tanpa kebutuhan browser interaktif

Wajib

tsx

const learner = {
  name: "Rina",
  activeCourses: 3,
};

export default function DashboardPage() {
  return (
    <main>
      <h1>Halo, {learner.name}</h1>
      <p>Kamu sedang mengikuti {learner.activeCourses} course aktif.</p>
    </main>
  );
}

Tidak ada useState, onClick, useEffect, window, atau localStorage pada page ini. Karena itu, app/dashboard/page.tsx dapat tetap menjadi Server Component tanpa menambahkan "use client". Component masih boleh menerima data dan merender JSX; yang dibatasi adalah kemampuan browser interaktif.

Bagian ini memengaruhi progres lesson.

Catatan penting

Wajib

Server Component adalah default, bukan hadiah yang harus dipertahankan dengan paksa

Jangan menambahkan "use client" hanya karena file memakai React atau JSX. Sebaliknya, jangan memaksa sebuah component tetap di server jika ia benar-benar membutuhkan state atau event handler. Keputusan yang baik dimulai dari kebutuhan UI, bukan dari nama folder atau ukuran component.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Bagian dashboard mana yang paling tepat tetap menjadi Server Component pada contoh sederhana ini?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Pada App Router, page dan layout adalah Server Components secara default.
Static content dan presentasi data sederhana tidak perlu diberi "use client".
Pilih client berdasarkan kebutuhan interaksi browser, bukan karena component memakai JSX.
Berikutnya, kamu akan melihat kondisi yang memang membutuhkan Client Component.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Mulai dari server, lalu tambahkan client bila memang diperlukan.

Memuat progres Review module