Server Component: Render di Server

Keunggulan utama

Server Component di-render di server dan hasilnya dikirim sebagai HTML plus struktur ringan (RSC payload). Browser tidak mengunduh JavaScript komponen ini sama sekali. Hasilnya: halaman lebih cepat, terutama di HP kentang.

Fetch data langsung

Tidak perlu useEffect atau library fetch. Komponen bisa async dan memanggil fetch langsung:

// app/produk/page.tsx
async function getProduk() {
  const res = await fetch("https://api.example.com/produk");
  if (!res.ok) throw new Error("Gagal mengambil produk");
  return res.json();
}

export default async function ProdukPage() {
  const produk = await getProduk();
  return (
    <ul>
      {produk.map((p: { id: number; nama: string }) => (
        <li key={p.id}>{p.nama}</li>
      ))}
    </ul>
  );
}

Akses backend langsung

Karena kode berjalan di server, kamu bisa mengakses database, membaca file, atau memakai API key rahasia tanpa takut bocor ke browser:

// app/dashboard/page.tsx
import { db } from "@/lib/db";

export default async function Dashboard() {
  const totalUser = await db.user.count();
  return <p>Total user: {totalUser}</p>;
}

Kode db ini tidak pernah dikirim ke browser. Aman.

Batasan

Server Component tidak bisa memakai useState, useEffect, event handler, atau API browser. Kalau butuh interaktivitas, bungkus bagian interaktif dalam Client Component kecil dan teruskan data lewat props.

Kesalahan umum pemula

• Memakai window atau localStorage di Server Component. Kode ini jalan di server tempat objek browser tidak ada. Pindahkan ke Client Component.
• cache: "no-store" di semua fetch. Ini mematikan seluruh cache dan bikin situs lambat. Pakai hanya untuk data yang benar-benar harus segar.
• Query database di komponen yang di-render berkali-kali. Bungkus dengan cache (React cache()) kalau fungsi yang sama dipanggil di banyak komponen dalam satu request.

Latihan singkat

1. Buat Server Component yang membaca environment variable dan menampilkannya (pastikan bukan secret).
2. Buat dua komponen yang memanggil fungsi fetch sama; verifikasi dengan console.log bahwa request hanya terjadi sekali (request memoization).

Rangkuman

• Server Component bisa async dan fetch data langsung tanpa useEffect.
• Bisa akses database dan API key rahasia karena kode tidak dikirim ke browser.
• Tidak bisa memakai hook, event handler, atau API browser.
• Atur cache dengan bijak; jangan no-store di semua tempat.

Catatan teknis: Jangan memanggil fetch dengan opsi cache: "no-store" di semua tempat tanpa pikir. Itu mematikan caching dan bikin setiap request ke server asal lambat. Pahami dulu modul caching dan revalidasi sebelum mengubah perilaku default.