Advanced · Level 14: PerformanceAdvanced65 menitBahasa Indonesia

Code Splitting

Memisahkan code non-kritis agar initial route memuat hal yang benar-benar dibutuhkan learner terlebih dahulu.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan tujuan code splitting pada route dan component
Membedakan code penting awal dari feature yang dapat menunggu action user
Memakai next/dynamic untuk Client Component non-kritis
Menambahkan loading state yang menjaga konteks user

Code Splittingnext/dynamicClient ComponentsLoading States

Isi lesson

6 blok

1.
Pisahkan code berdasarkan kapan ia dibutuhkan, bukan berdasarkan kebiasaanBelum selesaiWajib
2.
Pisahkan panel insight dari content route awalBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Jangan menukar loading awal dengan delay yang lebih menggangguBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Pisahkan code berdasarkan kapan ia dibutuhkan, bukan berdasarkan kebiasaan

Wajib

Next.js sudah memisahkan Server Components berdasarkan route segment. Code splitting tambahan berguna ketika sebuah Client Component berat tidak dibutuhkan untuk initial content route. Contohnya insight chart yang hanya muncul setelah learner memilih Lihat insight. Dengan next/dynamic, component dapat ditempatkan pada bundle terpisah dan dimuat ketika dirender. Keputusan ini membawa tanggung jawab UX: user tetap perlu melihat loading state yang menjelaskan panel sedang disiapkan, dan feature tidak boleh menjadi lebih lambat dari manfaat yang diberikan. Jangan memecah button kecil atau text statis hanya karena dynamic import tersedia.

Bagian ini memengaruhi progres lesson.

Pisahkan panel insight dari content route awal

Wajib

tsx

"use client";

import { useState } from "react";
import dynamic from "next/dynamic";

const CourseInsights = dynamic(
  () => import("@/components/course-insights"),
  { loading: () => <p>Menyiapkan insight course...</p> },
);

export default function CourseOverview({ courseId }: { courseId: string }) {
  const [showInsights, setShowInsights] = useState(false);

  return (
    <section>
      <button type="button" onClick={() => setShowInsights(true)}>
        Lihat insight
      </button>
      {showInsights ? <CourseInsights courseId={courseId} /> : null}
    </section>
  );
}

CourseOverview membutuhkan client boundary karena ia menyimpan state click. CourseInsights dipisahkan karena hanya dibutuhkan setelah action user. Loading callback membuat penundaan dapat dipahami. Pattern ini masuk akal bila insight cukup mahal atau jarang dipakai pada initial journey; ukur dulu agar tidak memecah UI kecil yang tidak memberi penghematan berarti.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Split course insights panel

Pisahkan CourseInsights yang non-kritis dari initial route dan muat setelah learner memilih Lihat insight.

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.

9 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Component mana yang paling layak menjadi kandidat code splitting tambahan?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Jangan menukar loading awal dengan delay yang lebih mengganggu

Code splitting dapat memperbaiki initial route, tetapi user akan tetap membayar saat membuka feature. Pastikan feature memiliki loading state, error handling bila relevan, dan alasan jelas mengapa ia boleh menunggu. Evaluasi journey lengkap, bukan hanya angka first load.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Code splitting memindahkan code ke titik ketika feature benar-benar dibutuhkan.
Next.js sudah memisahkan Server Components berdasarkan route; dynamic split terutama relevan untuk Client Component non-kritis.
Loading state adalah bagian dari decision, bukan tambahan kosmetik.
Jangan lazy-load component kecil tanpa bukti biaya dan manfaat.
Berikutnya, dynamic imports memperluas pattern ini untuk component dan library yang dipakai setelah action tertentu.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Pisahkan code berdasarkan kapan ia dibutuhkan, bukan berdasarkan kebiasaan.

Memuat progres Review module