Bisa Langsung Dipakai? Cara Import Client Component ke Server Component Next Js yang Benar

Ditulis oleh Next.js

Ya, Server Component boleh import Client Component secara langsung di App Router Next.js. Kamu tidak perlu dynamic import atau API tambahan. File dengan use client otomatis jadi batas client boundary, kode interaktifnya jalan di browser sementara induknya tetap dirender di server.

Contoh umum: page.tsx sebagai Server Component me-render SearchBar yang memakai useState dan onChange.

Jawaban Cepat: Pola Import yang Benar

Import berjalan satu arah. Server mengimpor client, bukan sebaliknya untuk logika server.

  • Server Component mengimpor Client Component seperti komponen React biasa.
  • Semua isi file use client beserta imporannya ikut terkirim ke client.
  • Event handler, useState, dan useEffect hanya hidup di dalam file client tersebut.

Langkah Import Client Component ke Server

Kesalahan paling sering: lupa menulis use client di baris pertama file anak, lalu memanggil hook dari Server Component.

  1. Buat file Client Component dan tulis use client di baris paling atas.
  2. Import komponen itu di Server Component seperti biasa.
  3. Kirim hanya props yang serializable, seperti string, number, boolean, array, dan object polos.
  4. Jalankan aplikasi dan cek error hidrasi bila tampilan server dan client berbeda.
// components/SearchBar.tsx
'use client';

import { useState } from 'react';

export default function SearchBar({ placeholder }: { placeholder: string }) {
  const [query, setQuery] = useState('');
  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder={placeholder}
    />
  );
}

// app/page.tsx
import SearchBar from '../components/SearchBar';

export default function Page() {
  return (
    <main>
      <h1>Katalog</h1>
      <SearchBar placeholder="Cari produk..." />
    </main>
  );
}

BACA JUGA:

Batasan Props dan Composition

  • Props yang dikirim dari server ke client harus serializable. Function, Date khusus, class instance, atau object non-plain tidak bisa lewat batas ini.
  • Untuk menyisipkan Server Component ke dalam Client Component, kirim lewat children, bukan import langsung di file client.
  • Semua onClick, onChange, hook, dan akses window harus tetap di file use client.

Masalah | Penyebab | Solusi

Masalah Penyebab Solusi
Client Component dibuat async Komponen client tidak mendukung async langsung Pindahkan fetch ke Server induk, kirim datanya sebagai props
Props function hilang Function tidak bisa diserialisasi melewati boundary Pindahkan handler ke file client atau pakai Server Action
useState error di server Hook dipanggil di Server Component Pindahkan state ke file use client terpisah

FAQ

Apakah Server Component bisa import Client Component langsung?

Ya, import langsung didukung dan ini pola resmi di App Router.

Kenapa function tidak bisa dikirim sebagai props?

Batas server ke client memakai serialisasi, sehingga function tidak bisa dipertahankan bentuknya.

Bagaimana jika Client Component butuh Server Component di dalamnya?

Kirim Server Component tersebut dari induk server melalui props children.

Artikel Terkait