Frontend Academy · Ders

Sunucu Bileşenleri ve İstemci Bileşenleri

Sunucu Bileşenleri ve İstemci Bileşenleri, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Tek Uygulamada İki Dünya

React Sunucu Bileşenleri (RSC), bir ağaç yapısını sunucuda oluşturulan ve istemciyle etkileşimli bölümler arasında ayırmanıza olanak tanır. Next.js Uygulama Yönlendiricisi'nde bileşenler varsayılan olarak Sunucu bileşenidir; 'use client' ile İstemciyi etkinleştirebilirsiniz.

Sunucu Bileşenleri Ne Yapar

Sunucu Bileşenleri yalnızca sunucuda çalışır. Şunları yapabilir: verileri doğrudan çekebilir, dosya sistemine erişebilir, yalnızca sunucuya ait gizli bilgilere erişebilir ve React'i istemciye göndermeden HTML oluşturabilir. Şunları yapamaz: kanca kullanamaz, durumu yönetemez ve olayları işleyemez.

İstemci Bileşenleri Ne Yapar

İstemci Bileşenleri SSR için (ilk HTML) sunucuda, etkileşim için ise istemcide çalışır. Şunları kullanabilir: useState, useEffect, olay işleyicileri ve tarayıcı API'leri.

Varsayılan Sunucudur

Next.js Uygulama Yönlendiricisi'nde her bileşen varsayılan olarak bir Sunucu Bileşenidir. Bu harikadır — uygulamanızın çoğu statik olarak oluşturulur.

// 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>
  );
}

İstemciyi Etkinleştirme

Bir dosyanın en üstüne 'use client' ekleyerek o dosyadaki bileşenleri ve içe aktardıkları bileşenleri İstemci Bileşenleri olarak işaretleyin.

// 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>;
}

Sunucu ve İstemciyi Birleştirme

Sunucu Bileşenleri İstemci Bileşenlerini oluşturabilir, ancak İstemci Bileşenleri Sunucu Bileşenlerini içe aktaramaz. Sunucuda oluşturulan içeriği İstemci sarmalayıcılarına alt içerik olarak aktarın.

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

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

Bu Model Neden Önemli

Daha küçük JS paketleri — yalnızca İstemci Bileşenleri tarayıcıya gönderilir. Doğrudan veritabanı/dosya erişimi — salt okunur veriler için API katmanına gerek yoktur. Daha iyi SEO ve daha hızlı LCP — HTML tamamen oluşturulmuş olarak gelir.

İstemci Sınırı Kuralları

Bir dosya 'use client' ile işaretlendiğinde, o dosyadaki tüm bileşenler ve içe aktarılan alt bileşenler İstemci Bileşenlerine dönüşür. 'use client', sunucu ile istemci arasındaki sınırı işaretler.

Sunucu Eylemleri

'use server' ile işaretlenen işlevler yalnızca sunucuda çalışır, ancak RPC gibi İstemci Bileşenlerinden çağrılabilir. Genellikle form gönderimleri ve değişiklik işlemleri için kullanılır.

// 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>

Sunucudan İstemciye props Aktarma

Sunucudan İstemciye aktarılan props, JSON olarak serileştirilebilir olmalıdır — işlevler, sınıflar veya özel yapılı tarih değerleri aktarılamaz. Aktarmadan önce dönüştürün.

Her Türü Belirleme

İçe aktarımlara bakın: useState, useEffect ve onClick işleyicileri bir bileşenin İstemci Bileşeni olmasını zorunlu kılar. Salt veri gösteren bileşenler Sunucu olarak kalabilir.

Performans Kazanımları

Sunucu Bileşenleri JS paketini büyük ölçüde küçültür. Çoğunlukla statik içerik ve birkaç etkileşimli bileşen içeren bir sayfa, yalnızca etkileşimli kısımların JS kodunu gönderir — bazen %90 daha küçük olur.

Hızlı Kontrol

Next.js Sunucu Bileşeni'nde hangi React kancası NOT kullanılabilir?

Özet: Sunucu ve İstemci

Sunucu Bileşenleri: yalnızca sunucuda çalışır, async/await OK, kanca/durum/işleyici kullanmaz ve daha küçük paketler oluşturur. İstemci Bileşenleri: 'use client' ile etkinleştirilir; useState/useEffect/olaylarla etkileşim sağlar. Sunucu, İstemciyi oluşturabilir; İstemci, Sunucuyu içe aktaramaz ancak onu alt içerik olarak alabilir. RPC tarzı değişiklik işlemleri için Sunucu Eylemleri ('use server') kullanılır.

Sıkça Sorulan Sorular

“Sunucu Bileşenleri ve İstemci Bileşenleri” dersi ücretsiz mi?

Evet — “Sunucu Bileşenleri ve İstemci Bileşenleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Sunucu Bileşenleri ve İstemci Bileşenleri” dersinde ne öğreneceğim?

React Sunucu Bileşenlerini, 'use client' yönergesinin ne zaman eklenmesi gerektiğini ve sunucuda oluşturulan HTML ile etkileşimli istemci adacıklarının nasıl birlikte kullanılacağını öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Sunucu Bileşenleri ve İstemci Bileşenleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Pages Router ve App Router Karşılaştırması
Sunucu Bileşenleri ve İstemci Bileşenleri
SSG, SSR ve ISR
Next.js API Rotaları ve Ara Yazılım

← Frontend Academy Sayfasına Dön