1 Februari 2025·8 menit baca

React Server Components: Era Baru Rendering di Web Modern

React Server Components (RSC) adalah perubahan paradigma terbesar dalam ekosistem React sejak diperkenalkannya Hooks. Fitur ini mengubah cara kita berpikir tentang di mana kode JavaScript dieksekusi.

Apa Itu React Server Components?

Secara sederhana, React Server Components adalah komponen React yang dirender sepenuhnya di server dan tidak pernah dikirim ke browser sebagai JavaScript. Hasilnya dikirim sebagai stream HTML/JSON yang sudah jadi.

Ini berbeda fundamental dengan rendering tradisional. Sebelumnya, meskipun kita menggunakan SSR (Server-Side Rendering), JavaScript komponen tetap dikirim ke browser untuk proses hydration. Dengan RSC, komponen server tidak perlu di-hydrate sama sekali.

Pendekatan Lama (SSR Biasa)

→HTML dirender di server
→JS bundle dikirim ke browser
→Hydration dilakukan di client
→Bundle size lebih besar

React Server Components

→Komponen dirender di server
→JS tidak dikirim ke browser
→Tidak ada hydration
→Bundle size jauh lebih kecil

Cara Kerja di Next.js App Router

Next.js 13+ dengan App Router mengadopsi RSC sebagai default. Semua komponen dalam direktori app/ adalah Server Components secara default. Kamu hanya perlu menambahkan directive "use client" jika ingin komponen berjalan di browser.

tsx·Server Component (default)

// app/blog/page.tsx — Ini adalah Server Component
async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 }
  }).then(r => r.json());

  return (
    <main>
      <h1>Blog Posts</h1>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </main>
  );
}

export default BlogPage;

tsx·Client Component

// components/LikeButton.tsx
"use client";

import { useState } from "react";

export function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false);

  return (
    <button
      onClick={() => setLiked(!liked)}
      className={liked ? "text-red-500" : "text-gray-400"}
    >
      {liked ? "❤️ Disukai" : "🤍 Suka"}
    </button>
  );
}

Kapan Harus Pakai Server vs Client?

Gunakan Server Components untuk:

Fetch data dari database atau API, akses resources backend secara langsung (file system, env variables), komponen yang tidak perlu interaktivitas browser, dan mengurangi ukuran JavaScript yang dikirim ke client.

Gunakan Client Components untuk:

Event listeners (onClick, onChange), React Hooks (useState, useEffect), Browser APIs (localStorage, geolocation), komponen berbasis animasi atau interaksi real-time.

💡 Pro Tip: Strategi terbaik adalah "push client components to the leaves". Buat sebanyak mungkin komponen sebagai Server Components, dan isolasikan bagian interaktif ke komponen kecil yang diberi "use client".

Streaming dengan Suspense

RSC bekerja sangat baik dengan React Suspense untuk streaming UI. Kamu bisa menampilkan bagian halaman yang sudah siap sementara bagian lain masih loading.

tsx·Streaming UI Pattern

import { Suspense } from "react";

export default function Page() {
  return (
    <div>
      {/* Ini langsung tampil */}
      <StaticHeader />

      {/* Ini streaming — tampil saat data siap */}
      <Suspense fallback={<PostsSkeleton />}>
        <SlowPostsList />
      </Suspense>

      <Suspense fallback={<CommentsSkeleton />}>
        <Comments />
      </Suspense>
    </div>
  );
}