Menguasai React Server Components di Next.js 14

Apa Itu React Server Components?

React Server Components (RSC) adalah paradigma baru dalam pengembangan aplikasi React yang memungkinkan komponen dirender langsung di server. Berbeda dengan Server-Side Rendering (SSR) tradisional yang mengirim HTML lengkap ke klien, RSC mengirimkan representasi serial dari komponen tanpa mengikutsertakan JavaScript-nya ke browser.

Dengan kata lain, komponen server tidak menambah ukuran bundle JavaScript di sisi klien. Ini adalah lompatan besar dalam hal performa, terutama untuk aplikasi yang banyak menampilkan konten statis.

Mengapa RSC Penting?

Keunggulan utama RSC meliputi:

• Bundle size lebih kecil — kode komponen server tidak pernah sampai ke browser
• Data fetching langsung — bisa mengakses database atau API internal tanpa membuat API route terpisah
• Keamanan lebih baik — logika sensitif seperti token dan kredensial tetap di server
• Streaming — konten bisa dikirim secara bertahap sehingga Time to First Byte (TTFB) lebih cepat

Server vs Client Components

Di Next.js 14, semua komponen secara default adalah Server Components. Untuk membuat Client Component, kamu perlu menambahkan direktif 'use client' di bagian atas file:

// app/page.tsx — Server Component (default)
import { db } from '@/lib/db'
import { UserCard } from './UserCard'

export default async function HomePage() {
  const users = await db.user.findMany()

return (
    <main>
      <h1>Daftar Pengguna</h1>
      {users.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}
    </main>
  )
}

// app/UserCard.tsx — Client Component
'use client'

import { useState } from 'react'

interface UserCardProps {
  user: { id: string; name: string; email: string }
}

export function UserCard({ user }: UserCardProps) {
  const [expanded, setExpanded] = useState(false)

return (
    <div onClick={() => setExpanded(!expanded)}>
      <h3>{user.name}</h3>
      {expanded && <p>{user.email}</p>}
    </div>
  )
}

Pola Komposisi yang Tepat

Kunci utama menggunakan RSC adalah mengarahkan 'use client' sedalam mungkin. Jangan langsung menandai seluruh halaman sebagai client component. Sebagai gantinya, ekstrak hanya bagian interaktif yang membutuhkan state atau event handler.

// Jangan begini — seluruh halaman jadi client component
'use client'
export default function Dashboard({ data }) {
  const [tab, setTab] = useState('overview')
  // ... seluruh logic di sini
}

// Lakukan begini — pisahkan leaf component interaktif
// DashboardTabs.tsx
'use client'
export function DashboardTabs({ onTabChange }) {
  const [tab, setTab] = useState('overview')
  return <TabBar active={tab} onChange={setTab} onTabChange={onTabChange} />
}

// page.tsx — tetap server component
export default async function DashboardPage() {
  const data = await fetchDashboardData()
  return <DashboardLayout data={data} />
}

Data Fetching di Server Component

Salah satu keunggulan terbesar RSC adalah kemampuan melakukan data fetching langsung tanpa useEffect atau library client-side:

import { notFound } from 'next/navigation'

export default async function ArticlePage({
  params,
}: {
  params: { slug: string }
}) {
  const article = await getArticle(params.slug)

if (!article) {
    notFound()
  }

return (
    <article>
      <h1>{article.title}</h1>
      <time>{article.datePublished}</time>
      <div dangerouslySetInnerHTML={{ __html: article.content }} />
    </article>
  )
}

Kesimpulan

React Server Components mengubah cara kita memikirkan arsitektur aplikasi React. Dengan Next.js 14, pola ini sudah menjadi default dan sangat direkomendasikan. Kuncinya adalah: gunakan server component sebisa mungkin, dan hanya beralih ke client component saat kamu benar-benar membutuhkan interaktivitas di sisi klien.

Mulai sekarang, biasakan untuk bertanya pada diri sendiri setiap kali membuat komponen baru: "Apakah komponen ini benar-benar perlu jadi client component?" Sebagian besar waktu, jawabannya adalah tidak.