Reactjs Server Components RSC Client Boundary Async Data

Definisi

React Server Components (RSC) adalah komponen yang di-render di server, tidak di-bundle ke client, dan tidak memegang state/interaktivitas. Di React (terutama Next.js App Router), RSC menjadi default untuk komponen di dalam app/. Komponen interaktif ditandai 'use client'.

Kapan dipakai

Pakai RSC untuk bagian yang:

• butuh akses langsung ke data/server (DB, internal API) tanpa ekspos kredential ke browser
• tidak punya event handler atau state lokal
• ingin mengurangi ukuran JavaScript di client

Gunakan 'use client' hanya untuk bagian yang butuh useState, useEffect, event, atau browser API.

Cara kerja

Tanpa directive = server component

tsx

// app/posts/page.tsx (server)
import { db } from '@/lib/db';
 
export default async function PostsPage() {
    const posts = await db.posts.all(); // ambil di server, tanpa fetch publik
    return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Client boundary

tsx

'use client';
import { useState } from 'react';
 
export function LikeButton({ id }: { id: string }) {
    const [liked, setLiked] = useState(false);
    return <button onClick={() => setLiked(v => !v)}>{liked ? 'Liked' : 'Like'}</button>;
}

Server component boleh merender client component, tapi tidak sebaliknya (client tidak bisa import server component sebagai children biasa tanpa prop).

Struktur alur

Contoh pemisahan

tsx

// server
export default async function Page() {
    const data = await fetchData();
    return (
        <main>
            <h1>{data.title}</h1>
            <LikeButton id={data.id} /> {/* client component */}
        </main>
    );
}

Catatan implementasi

• Prop yang dikirim dari server ke client harus serializable (plain object, bukan function/class instance).
• 'use client' bersifat cascade: semua import di bawahnya jadi client bundle. Jaga agar bagian berat tetap di server.
• RSC tidak mengenal window, localStorage, atau event handler.

Kesalahan umum

• State di server component: useState di RSC akan error; pindahkan ke client component.
• Cascade 'use client': menaruh directive di file atas lalu mengimport banyak modul berat, membuat bundle membengkak.
• Prop tidak serializable: mengirim function/callback dari server ke client, gagal di serialize.
• Over-client: semua komponen ditandai client padahal tidak butuh interaktivitas, kehilangan manfaat RSC.

Referensi terkait

• Hooks Dasar React.js: useState, useEffect, useMemo
• Next.js Routing, Server/Client Components, Data Fetching
• Concurrent Features React.js