Reactjs Server Components RSC Client Boundary Async Data

React.js1 September 20263 menit baca

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

Selesai membaca dokumentasi ini?

Kembali ke rujukan utama React.js untuk melanjutkan topik lainnya.

Kembali ke Kategori

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>;
}

tsx

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

Reactjs Server Components RSC Client Boundary Async Data | Rujukan Pemrograman | Mahir.dev Academy

Reactjs Server Components RSC Client Boundary Async Data

Reactjs Server Components RSC Client Boundary Async Data

Definisi

Kapan dipakai

Cara kerja

Tanpa directive = server component

Selesai membaca dokumentasi ini?

Client boundary

Struktur alur

Contoh pemisahan

Catatan implementasi

Kesalahan umum

Referensi terkait