Next.js'te Sunucu ve İstemci Bileşenleri
'use client' eklemeniz gereken zamanı ve sunucu ile istemci ağaçlarını nasıl bileştireceğinizi belirleyin.
Next.js'te Sunucu ve İstemci Bileşenleri, CoddyKit'te ücretsiz bir React 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.
Varsayılan: Sunucu Bileşenleri
App Router'da tüm bileşenler varsayılan olarak Sunucu Bileşenleridir. Sunucuda oluşturulurlar, istemci tarafında hiç JavaScript çalıştırmazlar ve veritabanlarına, ortam değişkenlerine ve dosya sistemine doğrudan erişebilirler.
İstemci Bileşenlerini Etkinleştirme
Bir dosyanın en üstüne 'use client' ekleyerek onu bir İstemci Bileşeni yapın. Dosyanın içe aktardığı tüm modüller de istemci tarafına dönüşür; böylece bir istemci sınırı oluşturulur.
'use client';
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}Sunucu Bileşenleri Neler Yapabilir
Sunucu Bileşenleri, veri alma işlemlerinde satır içinde await kullanabilir, ortam değişkenlerini okuyabilir, dosya sistemine erişebilir ve istemci paketinin boyutunu artırmadan yalnızca sunucuya özel büyük paketleri içe aktarabilir.
// app/products/page.tsx — Server Component
export default async function ProductsPage() {
const products = await db.query('SELECT * FROM products');
return (
<ul>
{products.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
);
}Sunucu Bileşenleri Neleri Yapamaz
Sunucu Bileşenleri kancaları (useState, useEffect), tarayıcı API'lerini veya olay işleyicilerini kullanamaz. Bunlar için 'use client' gerekir.
Sunucu ve İstemciyi Birleştirme
Sunucu Bileşenlerinin çıktısını özellikler veya alt öğeler olarak İstemci Bileşenlerine aktarın. Temel yaklaşım şudur: veri almayı Sunucu Bileşenlerinde, etkileşimi ise İstemci Bileşenlerinde tutun.
// Server Component (no 'use client')
async function ProductPage({ id }) {
const product = await getProduct(id); // direct DB call
return <AddToCartButton product={product} />; // client component
}
// Client Component
'use client';
function AddToCartButton({ product }) {
const [added, setAdded] = useState(false);
return <button onClick={() => { addToCart(product); setAdded(true); }}>{added ? 'Added!' : 'Add to cart'}</button>;
}Alt Öğeleri Sunucudan İstemciye Aktarma
Bir Sunucu Bileşeni, JSX'i children olarak bir İstemci Bileşenine aktarabilir. Alt öğeler sunucuda oluşturulmaya devam eder; istemci sarmalayıcısı etkileşim ekler.
// Client wrapper — Modal with open/close state
'use client';
function Modal({ children }) {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Open</button>
{open && <dialog>{children}</dialog>}
</>
);
}
// Server Component — passes server-fetched content into client modal
async function Page() {
const content = await fetchContent();
return <Modal><ServerRenderedContent data={content} /></Modal>;
}İstemci Sınırı
'use client' eklemek, dosyayı ve dosyanın içe aktardığı tüm alt modülleri istemci tarafına taşır. Bir alt bileşeni Sunucu Bileşeni olarak tutmak için onu doğrudan içe aktarmak yerine özellik veya yuva olarak aktarın.
Veri Alma Yaklaşımları
Verileri Sunucu Bileşenlerinde alın ve aşağıya aktarın. Mümkün olduğunda İstemci Bileşenlerinde veri almaktan kaçının; bu, istemci paketinin boyutunu artırır ve sunucu mantığını yineler.
// Good: fetch in server, pass to client
async function Page() {
const user = await getUser();
return <UserProfile user={user} />; // client component
}
// Avoid: fetch in client
'use client';
function UserProfile() {
const { data } = useSWR('/api/user', fetcher); // network request from browser
}Yalnızca Sunucuya Özel Yardımcılar
server-only paketi, yalnızca sunucuya özel bir modül yanlışlıkla bir İstemci Bileşenine aktarıldığında derleme hatası oluşturur.
// lib/db.ts
import 'server-only'; // throws at build time if imported in 'use client' file
export const db = createDbClient(process.env.DB_URL);Sunucu ve İstemci Arasında Durum Paylaşma
Sunucu Bileşenleri durum tutamaz. Sunucudan alınan verileri etkileşimli istemci bileşenleriyle paylaşmak için bunları ilk oluşturmada özellik olarak aktarın, ardından güncellemeleri istemcide yönetin.
use client Ekleme Zamanı
Şunlara ihtiyaç duyduğunuzda 'use client' ekleyin: kancalar (useState, useEffect), tarayıcı olayları (onClick), tarayıcı API'leri (localStorage, window) veya üçüncü taraf istemci tarafı kitaplıkları.
Hızlı Kontrol
Next.js App Router'da useState veya onClick kullanmak için bir dosyanın en üstüne ne eklemelisiniz?
Özet
Tüm App Router bileşenleri varsayılan olarak Sunucu Bileşenleridir; istemci paketi sıfırdır ve verilere doğrudan erişebilirler. Etkileşime ihtiyaç duyduğunuz yerlere yalnızca 'use client' ekleyin. Sunucudan alınan verileri özellikler veya alt öğeler olarak istemci sarmalayıcılarına aktararak birleştirin ve istemci sınırını mümkün olduğunca yaprak düzeyinde tutun.
Sıkça Sorulan Sorular
“Next.js'te Sunucu ve İstemci Bileşenleri” dersi ücretsiz mi?
Evet — “Next.js'te Sunucu 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.
“Next.js'te Sunucu ve İstemci Bileşenleri” dersinde ne öğreneceğim?
'use client' eklemeniz gereken zamanı ve sunucu ile istemci ağaçlarını nasıl bileştireceğinizi belirleyin. React 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.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React 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.
“Next.js'te Sunucu 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 React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React 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
- App Router Dosya Kuralları
- Next.js'te Sunucu ve İstemci Bileşenleri
- Dinamik Rotalar ve Rota Grupları
- App Router'da Metadata API'si ve SEO