Bikin Bundle Lebih Ringan dengan Cara Lazy Load Client Component Next Js

Ditulis oleh Next.js

Cara lazy load client component Next.js yang benar adalah memakai dynamic() dari next/dynamic dengan opsi loading. Pola ini memecah bundle JavaScript agar komponen peta, editor, atau chart tidak ikut dimuat saat halaman pertama dibuka.

Kesalahan paling umum adalah lupa menambahkan fallback loading, sehingga area komponen terlihat kosong sesaat sebelum chunk selesai diunduh.

Jawaban Cepat: Lazy Load Client Component dengan next/dynamic

Gunakan dynamic untuk komponen berat yang ada di bawah layar atau hanya muncul setelah interaksi.

  • Import komponen berat dari Server Component atau Client Component memakai next/dynamic.
  • Aktifkan ssr: false hanya bila komponen membaca window, document, atau library browser-only.
  • Pasang loading: () => <p>Memuat...</p> agar layout tidak lompat.

Langkah Lazy Load Client Component di App Router

Ikuti urutan ini agar split bundle berjalan tanpa hydration error.

1. Tandai komponen berat dengan use client di baris pertama file.

2. Import memakai dynamic beserta UI loading.

import dynamic from 'next/dynamic';

const ChartBerat = dynamic(() => import('./chart-berat'), {
  loading: () => <p>Memuat grafik...</p>,
});

3. Atur ssr: true untuk konten SEO, atau ssr: false untuk komponen peta dan editor browser-only.

const Peta = dynamic(() => import('./peta'), {
  ssr: false,
  loading: () => <p>Memuat peta...</p>,
});

4. Cek hasil split dengan build production dan uji interaksi halaman, terutama scroll dan klik pemicu komponen.

BACA JUGA:

Perbandingan Opsi Lazy Load Client Component

Pola Fungsi Catatan
dynamic dengan SSR Split bundle tapi tetap render server Cocok untuk konten SEO
dynamic ssr false Render hanya di browser Wajib untuk API browser
React.lazy plus Suspense Split di Client Component Tidak bisa atur SSR per komponen
Import biasa Masuk bundle awal Hanya untuk komponen kecil kritis
  • Pilih SSR bila teks perlu terbaca crawler.
  • Pilih ssr: false bila render awal menyentuh window.
  • Pertahankan import biasa untuk navbar, tombol, dan form utama.

Kesalahan yang Bikin Lazy Load Gagal

  • Memaksa Server Component memakai ssr: false tanpa memisah file Client Component.
  • Lupa fallback loading sehingga pengguna mengira halaman blank.
  • Lazy load semua komponen kecil sampai navigasi butuh banyak request tambahan.
  • Meneruskan props async atau fungsi server-only ke komponen dynamic.

FAQ

Apakah dynamic bisa dipakai dari Server Component?

Ya, Server Component boleh me-render dynamic import yang menunjuk ke Client Component.

Kapan ssr false wajib dipakai?

Pakai saat komponen membaca window, document, atau library browser-only pada render awal.

Apakah lazy load selalu mempercepat halaman?

Tidak, pakai hanya untuk komponen besar atau di bawah layar agar request tambahan tidak merugikan.

Artikel Terkait