Frontend Academy · Pelajaran

Komponen Server dan Komponen Klien

Pahami React Server Components, kapan harus menambahkan direktif 'use client', dan cara memadukan HTML yang dirender server dengan pulau klien interaktif.

Komponen Server dan Komponen Klien adalah pelajaran Frontend 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Dua Dunia dalam Satu Aplikasi

React Server Components (RSC) memungkinkan Anda membagi sebuah pohon antara bagian yang dirender di server dan bagian yang interaktif di klien. Dalam Router Aplikasi Next.js, komponen secara bawaan merupakan Komponen Server; gunakan Komponen Klien dengan 'use client'.

Fungsi Komponen Server

Komponen Server hanya berjalan di server. Komponen ini dapat: mengambil data secara langsung, mengakses sistem berkas, menggunakan rahasia khusus server, serta merender menjadi HTML tanpa mengirimkan React ke klien. Komponen ini tidak dapat: menggunakan hook, mengelola status, atau menangani peristiwa.

Fungsi Komponen Klien

Komponen Klien berjalan di server untuk SSR (HTML awal) dan di klien untuk interaktivitas. Komponen ini dapat: menggunakan useState, useEffect, penangan peristiwa, serta API peramban.

Bawaan Menggunakan Server

Dalam Router Aplikasi Next.js, setiap komponen secara bawaan merupakan Komponen Server. Ini sangat baik—sebagian besar aplikasi Anda menggunakan perenderan statis.

// app/posts/page.tsx — Server Component by default
export default async function Posts() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

Aktifkan Klien

Tambahkan 'use client' di bagian atas berkas untuk menandai komponen di dalamnya (beserta impor komponennya) sebagai Komponen Klien.

// app/Counter.tsx
'use client';

import { useState } from 'react';

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Menyusun Server dan Klien

Komponen Server dapat merender Komponen Klien, tetapi Komponen Klien tidak dapat mengimpor Komponen Server. Teruskan konten yang dirender di server sebagai children ke pembungkus Klien.

// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';

export default function Home() {
  return (
    <ClientShell>
      <ServerWidget />
    </ClientShell>
  );
}

Mengapa Pola Ini Penting

Bundel JS lebih kecil—hanya Komponen Klien yang dikirim ke peramban. Akses basis data/berkas secara langsung—tidak diperlukan lapisan API untuk data hanya-baca. SEO lebih baik dan LCP lebih cepat—HTML tiba dalam keadaan sudah dirender sepenuhnya.

Aturan Batas Klien

Setelah sebuah berkas ditandai dengan 'use client', semua komponen dalam berkas tersebut dan setiap komponen anak yang diimpornya menjadi Komponen Klien. 'use client' menandai batas antara server dan klien.

Aksi Server

Fungsi yang ditandai dengan 'use server' hanya berjalan di server, tetapi dapat dipanggil dari Komponen Klien—seperti RPC. Fungsi ini sering digunakan untuk pengiriman formulir dan mutasi.

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.posts.create({ data: { title } });
  revalidatePath('/posts');
}

// In a Client form component:
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

Meneruskan Props dari Server ke Klien

Props yang diteruskan dari Server ke Klien harus dapat diserialisasikan sebagai JSON—tidak boleh berupa fungsi, kelas, atau tanggal dengan bentuk khusus. Konversikan data sebelum meneruskannya.

Mengidentifikasi Setiap Jenis

Perhatikan impornya: useState, useEffect, dan penangan onClick memaksa sebuah komponen menjadi Komponen Klien. Tampilan data murni dapat tetap menjadi Komponen Server.

Peningkatan Kinerja

Komponen Server secara drastis memperkecil bundel JS. Halaman yang sebagian besar berisi konten statis dan beberapa widget interaktif hanya mengirimkan JS untuk bagian interaktif—terkadang hingga 90% lebih kecil.

Cek Cepat

Hook React mana yang TIDAK diizinkan dalam Komponen Server Next.js?

Ringkasan: Server vs Klien

Komponen Server: hanya berjalan di server, async/await OK, tanpa hook/status/penangan, dan bundel lebih kecil. Komponen Klien: diaktifkan dengan 'use client', serta interaktif dengan useState/useEffect/peristiwa. Server dapat merender Klien; Klien tidak dapat mengimpor Server, tetapi dapat menerimanya sebagai children. Aksi Server ('use server') digunakan untuk mutasi bergaya RPC.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Komponen Server dan Komponen Klien” gratis?

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

Apa yang akan aku pelajari di “Komponen Server dan Komponen Klien”?

Pahami React Server Components, kapan harus menambahkan direktif 'use client', dan cara memadukan HTML yang dirender server dengan pulau klien interaktif. Kamu berlatih Frontend 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 Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend 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 dan Komponen Klien” 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 Frontend Academy ini?

Ya. Setiap pelajaran Frontend 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 Frontend Academy