Server ve Client Components

İki Ortam, Tek Ağaç

App Router'da layout ve sayfalar varsayılan olarak Server Component'tir. Sunucuda çalışır, veritabanına doğrudan erişebilir ve tarayıcıya JavaScript göndermez. Etkileşim gerektiğinde ağaca Client Component eklersiniz.¹

Josh W. Comeau'nun zihinsel modeli işe yarar: Server Component'ler yalnızca sunucuda ve bir kez çalışır, yeniden render edilmez. Bu yüzden state ve Effect'leri yoktur. Client Component'ler ise bugüne kadar yazdığınız React'tir; sunucuda bir kez HTML için render edilir, sonra tarayıcıda yaşar.²

'use client' Bir Kapıdır

"use client", bir component'i değil bir modül sınırını işaretler. Dosyanın en üstüne yazılır; o dosya, import ettiği her şey ve doğrudan render ettiği component'ler istemci paketine girer.¹

// components/like-button.tsx
"use client";

import { useState } from "react";

export function LikeButton({ initialLikes }: { initialLikes: number }) {
  const [likes, setLikes] = useState(initialLikes);
  return <button onClick={() => setLikes(likes + 1)}>{likes} beğeni</button>;
}

// app/products/[slug]/page.tsx
import { LikeButton } from "@/components/like-button";

export default async function ProductPage({ params }: PageProps<"/products/[slug]">) {
  const { slug } = await params;
  const product = await getProduct(slug);

  return (
    <article>
      <h1>{product?.name}</h1>
      <LikeButton initialLikes={12} />
    </article>
  );
}

Dan Abramov bu iki direktifi şöyle özetler: "use client" tipli bir <script> etiketi, "use server" tipli bir fetch çağrısıdır. İkisi de bir modülün diğer ortamdan nasıl görüneceğini söyler.³

Composition: Server'ı Client'ın İçine Koymak

Bir Client Component, bir Server Component'i import edemez; import ettiği her şey istemci olur. Ama onu children ya da başka bir prop olarak alabilir. Server Component sunucuda render edilir, Client Component yalnızca hazır sonucu yerleştirir.¹

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

import { useState } from "react";

export function Drawer({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(!open)}>Sepet</button>
      {open && <div role="dialog">{children}</div>}
    </>
  );
}

// app/layout.tsx içinde
<Drawer>
  <CartItems /> {/* Server Component: sepeti sunucuda okur */}
</Drawer>

Aurora Scharff bunu tasarım kuralı olarak önerir: etkileşimi (açma-kapama, animasyon, scroll) küçük client sarmalayıcılara taşıyın, veriyi ve içeriği server tarafında bırakın. Sarmalayıcı yeniden kullanılabilir olur, veri çekme istemciye kaymaz.⁴

Sınırdan Ne Geçer

Server'dan Client'a giden prop'lar ağ üzerinden gider, bu yüzden serileştirilebilir olmalıdır.⁵

Fonksiyon geçemediği için event handler'ları Client Component'in içinde yazarsınız. Sunucuda çalışacak bir işlem gerekiyorsa Server Actions kullanılır.

Context ve Üçüncü Parti Component'ler

Server Component'te Context yoktur. Tema ya da sepet gibi paylaşılan state için provider'ı bir Client Component'e koyup layout'ta kullanın. Provider'ı ağaçta olabildiğince derine koymak, Next.js'in statik kısımları optimize etmesini kolaylaştırır.¹

// components/theme-provider.tsx
"use client";

import { createContext } from "react";

export const ThemeContext = createContext<"light" | "dark">("light");

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  return <ThemeContext value="dark">{children}</ThemeContext>;
}

useState kullanan ama dosyasında "use client" olmayan bir kütüphane component'i Server Component'te hata verir. Çözüm, onu kendi dosyanızda "use client" ile yeniden export etmektir.¹

Sunucu Kodunu Sunucuda Tutmak

Aynı modül iki ortamda da import edilebilir. API anahtarı okuyan bir fonksiyonun yanlışlıkla istemciye girmemesi için dosyanın başına server-only yazın; bir Client Component import ederse build hata verir.¹

// lib/products.ts
import "server-only";

export async function getProduct(slug: string) {
  // process.env.API_KEY burada güvende
}

Ortam değişkenleri de aynı kuralla çalışır: yalnızca NEXT_PUBLIC_ ile başlayanlar istemci paketine girer, diğerleri istemcide boş string olur.¹

Kendin Dene

• LikeButton'dan "use client"'ı silin. Hata mesajını okuyun.

• ProductPage'den LikeButton'a onLike={() => {}} prop'u geçirin. Hangi hata çıkıyor?

• Bir Server Component'e console.log ekleyin. Çıktı terminalde mi, tarayıcı konsolunda mı? Aynısını LikeButton için deneyin.

• CartItems'ı Drawer'ın dosyasında import edip kullanın, sonra children olarak verin. İlk durumda ne oluyor?

• lib/products.ts'e import "server-only" ekleyip bir Client Component'ten import edin.

Detaylı Öğrenmek İçin

• Yazı: Josh W. Comeau, "Making Sense of React Server Components"; Server Component'lerin neden var olduğunu en sade anlatan yazılardan.²

• Yazı: Dan Abramov, "What Does 'use client' Do?" ve "Impossible Components"; direktiflerin modül sistemiyle ilişkisi ve iki ortamı birleştiren component'ler.³⁷

• Yazı: Aurora Scharff, "Server and Client Component Composition in Practice"; gerçek arayüzlerden composition örnekleri.⁴

• Resmi doküman: "The Server and Client Boundary" rehberi; her component türünün nerede çalıştığını ve sınırın nasıl işlediğini adım adım anlatır.⁸