Advanced · Level 14: PerformanceAdvanced55 menitBahasa Indonesia

Hydration Cost

Memahami browser work yang membuat HTML hasil render menjadi UI React yang benar-benar interaktif.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan hydration dengan bahasa yang berpusat pada pengalaman user
Membedakan HTML awal dengan interactivity Client Component
Menghubungkan client JavaScript dengan biaya download dan browser work
Mengidentifikasi UI yang tidak memerlukan hydration

HydrationReactNext.jsClient JavaScript

Isi lesson

6 blok

1.
HTML dapat terlihat sebelum seluruh UI siap menerima actionBelum selesaiWajib
2.
Content server dengan satu pulau interaktifBelum selesaiWajib
3.
Writing practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Hydration adalah biaya untuk capability, bukan hukumanBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

HTML dapat terlihat sebelum seluruh UI siap menerima action

Wajib

Pada initial load Next.js, browser dapat menampilkan HTML hasil render sehingga learner segera melihat heading, lesson list, dan content route. Agar bagian interaktif seperti filter, input, toggle, atau button state dapat merespons, browser masih perlu memuat JavaScript Client Component lalu React menghubungkan event handler ke DOM. Proses ini disebut hydration. Hydration memberi manfaat nyata ketika UI membutuhkan state atau browser API, tetapi ia juga membawa biaya download, parse, dan execution JavaScript. Karena itu, pertanyaannya bukan apakah hydration buruk. Pertanyaannya adalah bagian mana yang benar-benar perlu hidup di browser untuk menyelesaikan tugas user.

Bagian ini memengaruhi progres lesson.

Content server dengan satu pulau interaktif

Wajib

tsx

// app/courses/page.tsx - Server Component by default
import CourseFilter from "./course-filter";

export default async function CoursesPage() {
  const courses = await getCourses();

  return (
    <main>
      <h1>Course</h1>
      <p>Pilih lesson yang ingin kamu lanjutkan.</p>
      <CourseFilter courses={courses} />
    </main>
  );
}

// app/courses/course-filter.tsx - Client Component
"use client";

export default function CourseFilter({ courses }: { courses: string[] }) {
  // query state dan onChange hidup di browser
  return <input aria-label="Cari course" />;
}

Heading dan explanatory content dapat tetap server-rendered. CourseFilter menjadi pulau client kecil karena ia membutuhkan input serta state. User tetap dapat melihat page lebih awal, sementara browser hanya perlu menghydrate area yang benar-benar interaktif. Pada project lokal, file ini perlu dipisah menjadi module nyata; contoh ini memperlihatkan peran masing-masing file.

Bagian ini memengaruhi progres lesson.

Writing practice

Wajib

Latihan menulis

Jelaskan hydration cost untuk halaman track FluentStack kepada rekan satu tim. Bedakan apa yang dapat user lihat lebih awal dari apa yang membutuhkan JavaScript browser, sebutkan dua UI yang layak menjadi Client Component, satu UI yang dapat tetap server-rendered, dan alasan mengapa seluruh page tidak perlu diberi "use client".

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/300 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Membedakan HTML awal dari interactivity browser.
Menyebut UI yang memang memerlukan state, event, atau browser API.
Menyebut content yang tidak perlu menjadi client.
Menjelaskan biaya dari boundary client yang terlalu luas.

Blok ini wajib untuk menyelesaikan lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Bagian mana yang paling jelas membutuhkan hydration pada halaman course?

Progres lesson naik setelah jawaban benar.

Catatan penting

Wajib

Hydration adalah biaya untuk capability, bukan hukuman

Jangan memindahkan interaksi penting ke server hanya untuk mengurangi JavaScript. Jika user perlu mengetik, membuka panel, atau menggunakan browser API, Client Component tepat. Yang perlu dihindari adalah membayar hydration untuk content besar yang tidak memiliki behavior client.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Hydration menghubungkan Client Component dengan JavaScript serta event handler di browser.
HTML awal dapat memberi orientasi sebelum seluruh interaction siap.
State, event handler, custom hook, dan browser API adalah alasan kuat memakai client.
Content statis tidak perlu menjadi client hanya karena berada dekat dengan control interaktif.
Berikutnya, kamu akan memilih Server dan Client Component berdasarkan capability serta journey user.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: HTML dapat terlihat sebelum seluruh UI siap menerima action.

Memuat progres Review module