React Academy · Pelajaran

Komponen Server vs Klien dalam Next.js

Tentukan kapan perlu menambahkan 'use client' dan cara menyusun pohon server serta klien.

Pelajaran 2 dari 413 langkah

Komponen Server vs Klien dalam Next.js adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Bawaan: Komponen Server

Dalam Perute Aplikasi, semua komponen secara bawaan adalah Komponen Server. Komponen tersebut dirender di server, tidak memiliki JavaScript di sisi klien, dan dapat mengakses basis data, variabel lingkungan, serta sistem file secara langsung.

Mengaktifkan Komponen Klien

Tambahkan 'use client' di bagian atas file untuk menjadikannya Komponen Klien. Semua impornya juga menjadi bagian dari sisi klien—ini membuat batas klien.

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Kemampuan Komponen Server

Komponen Server dapat mengambil data menggunakan await secara langsung, membaca variabel lingkungan, mengakses sistem file, dan mengimpor paket besar yang hanya digunakan server tanpa menambah ukuran bundel klien.

// app/products/page.tsx — Server Component
export default async function ProductsPage() {
  const products = await db.query('SELECT * FROM products');
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Hal yang Tidak Dapat Dilakukan Komponen Server

Komponen Server tidak dapat menggunakan kait (useState, useEffect), API peramban, atau pengendali peristiwa. Semua itu memerlukan 'use client'.

Menyusun Komponen Server dan Klien

Teruskan keluaran Komponen Server sebagai properti atau anak kepada Komponen Klien. Pola utama: pertahankan pengambilan data di Komponen Server dan interaktivitas di Komponen Klien.

// Server Component (no 'use client')
async function ProductPage({ id }) {
  const product = await getProduct(id); // direct DB call
  return <AddToCartButton product={product} />; // client component
}

// Client Component
'use client';
function AddToCartButton({ product }) {
  const [added, setAdded] = useState(false);
  return <button onClick={() => { addToCart(product); setAdded(true); }}>{added ? 'Added!' : 'Add to cart'}</button>;
}

Meneruskan Anak dari Server ke Klien

Komponen Server dapat meneruskan JSX sebagai children kepada Komponen Klien. Anak tersebut tetap dirender di server; pembungkus klien menambahkan interaktivitas.

// Client wrapper — Modal with open/close state
'use client';
function Modal({ children }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && <dialog>{children}</dialog>}
    </>
  );
}

// Server Component — passes server-fetched content into client modal
async function Page() {
  const content = await fetchContent();
  return <Modal><ServerRenderedContent data={content} /></Modal>;
}

Batas Klien

Penambahan 'use client' membuat file tersebut dan semua impor turunannya berjalan di sisi klien. Agar anak tetap menjadi Komponen Server, teruskan sebagai properti atau slot, bukan impor langsung.

Pola Pengambilan Data

Ambil data di Komponen Server dan teruskan ke bawah. Jika memungkinkan, hindari pengambilan data di Komponen Klien karena hal itu menambah ukuran bundel klien dan menggandakan logika server.

// Good: fetch in server, pass to client
async function Page() {
  const user = await getUser();
  return <UserProfile user={user} />; // client component
}

// Avoid: fetch in client
'use client';
function UserProfile() {
  const { data } = useSWR('/api/user', fetcher); // network request from browser
}

Utilitas Khusus Server

Paket server-only menimbulkan kesalahan pembangunan jika modul khusus server tidak sengaja diimpor ke dalam Komponen Klien.

// lib/db.ts
import 'server-only'; // throws at build time if imported in 'use client' file

export const db = createDbClient(process.env.DB_URL);

Berbagi Keadaan antara Server dan Klien

Komponen Server tidak dapat menyimpan keadaan. Untuk membagikan keadaan dari pengambilan data server kepada komponen klien yang interaktif, teruskan sebagai properti pada render awal, lalu kelola pembaruannya di klien.

Kapan Menambahkan use client

Tambahkan 'use client' saat Anda memerlukan: kait (useState, useEffect), peristiwa peramban (onClick), API peramban (localStorage, window), atau pustaka sisi klien pihak ketiga.

Pemeriksaan Singkat

Apa yang harus Anda tambahkan di bagian atas file untuk menggunakan useState atau onClick dalam Perute Aplikasi Next.js?

Jawab di pelajaran interaktif

Ringkasan

Semua komponen Perute Aplikasi secara bawaan adalah Komponen Server—tanpa bundel JS dan dengan akses data langsung. Tambahkan 'use client' hanya saat Anda memerlukan interaktivitas. Susun komponen dengan meneruskan data yang diambil server sebagai properti atau anak kepada pembungkus klien, dan pertahankan batas klien sedekat mungkin dengan daun komponen.

Gratis untuk memulai

Belajar React dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 88
Pelajaran: 324

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Komponen Server vs Klien dalam Next.js” gratis?

Ya — teks lengkap “Komponen Server vs Klien dalam Next.js” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Komponen Server vs Klien dalam Next.js”?

Tentukan kapan perlu menambahkan 'use client' dan cara menyusun pohon server serta klien. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Komponen Server vs Klien dalam Next.js” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke React Academy