← Next.js13 / 57
Pola Komposisi: Interaktif di Daun
Geser direktif 'use client' sejauh mungkin ke daun (leaf components) dari pohon komponen agar porsi Server Component tetap maksimal.
👀 Contoh dulu
// Halaman utama (Server) -> Layout (Server) -> TombolSuka ('use client')Hasilnya: Ukuran bundle JavaScript di browser tetap minimal.
💡 Jangan letakkan 'use client' di root layout atau page utama jika tidak terpaksa.
📝 Sekarang giliranmu
Pada komponen Layout ini, jika kamu menambahkan 'use client' di atas, seluruh halaman akan menjadi Client Component. Sebaiknya, biarkan Layout tetap sebagai Server Component. Impor komponen <ThemeToggle /> dari './ThemeToggle' dan render di dalam elemen <body> tanpa menjadikan file ini Client Component.
Preview