React SSR'nin Perde Arkasında Çalışması
renderToString/renderToPipeableStream yolunu ve istemcinin hydration işlemini nasıl devraldığını izleyin.
React SSR'nin Perde Arkasında Çalışması, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. 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.
SSR'nin Çözdüğü Sorun
İstemci tarafı React'in oluşturma işlemi için JavaScript gerekir. JavaScript yüklenip çalışana kadar kullanıcılar boş bir sayfa görür. SSR, sunucuda HTML'yi önceden oluşturarak kullanıcıların içeriği hemen görmesini sağlar; algılanan performansı ve arama motoru optimizasyonunu iyileştirir.
renderToString
Özgün SSR API'si: renderToString(<App />), bileşen ağacını sunucuda eşzamanlı olarak bir HTML metnine dönüştürür.
import { renderToString } from 'react-dom/server';
import App from './App';
// In an Express handler:
app.get('*', (req, res) => {
const html = renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html><body>
<div id="root">${html}</div>
<script src="/bundle.js"></script>
</body></html>
`);
});İstemcide Hidrasyon
HTML geldikten sonra tarayıcı onu ayrıştırır ve kullanıcı arayüzünü oluşturur. Ardından React'in hydrateRoot() işlevi olay dinleyicilerini bağlar ve statik HTML'yi etkileşimli hale getirir; buna hidrasyon denir.
// client/index.tsx
import { hydrateRoot } from 'react-dom/client';
import App from './App';
hydrateRoot(document.getElementById('root'), <App />);Hidrasyon Sırasında Ne Olur?
React, sunucuda oluşturulan DOM ile sanal DOM'u aynı anda dolaşır. Eşleşirlerse React, DOM'a dokunmadan dinleyicileri bağlar. Farklılarsa bir hidrasyon uyarısı kaydeder ve DOM'u düzeltir.
renderToPipeableStream
React 18'in akış API'si, veriler kullanılabilir hale geldikçe HTML'yi parçalar halinde gönderir; böylece sunucu hâlâ işlem yaparken tarayıcı içeriği aşamalı olarak görüntüleyebilir.
import { renderToPipeableStream } from 'react-dom/server';
app.get('*', (req, res) => {
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/bundle.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res); // starts streaming
},
});
});Suspense ve Akış
Akış kullanan SSR'de Suspense sınırları önce yedek içeriği akışa gönderir, ardından veriler hazır olduğunda bunu içerikle değiştirir; böylece ilk HTML aktarımı engellenmez.
// The shell (nav, layout) streams immediately;
// <UserProfile> suspends and streams when data resolves
function App() {
return (
<Layout>
<Suspense fallback={<Skeleton />}>
<UserProfile /> {/* streams after data loads */}
</Suspense>
</Layout>
);
}Veri Serileştirme
Sunucuda alınan veriler, istemcinin yeniden veri almadan hidrasyon sırasında okuyabilmesi için serileştirilmeli ve HTML içine gömülmelidir.
// Server:
const data = await fetchData();
const html = renderToString(<App data={data} />);
const serialized = JSON.stringify(data).replace(/</g, '\\u003c');
// Inline data in HTML:
`<script>window.__INITIAL_DATA__ = ${serialized};</script>`
// Client hydration reads:
const data = window.__INITIAL_DATA__;Ortam Farkları
Sunucu kodu tarayıcıda değil, Node.js üzerinde çalışır. window, document veya localStorage başvuruları içeren kod sunucuda çöker. typeof window !== 'undefined' ile kontrol ekleyin.
const isBrowser = typeof window !== 'undefined';
function getTheme() {
if (!isBrowser) return 'light'; // server-safe default
return localStorage.getItem('theme') ?? 'light';
}React Sunucu Bileşenleri ve SSR Karşılaştırması
SSR, her istekte bileşenleri HTML'ye dönüştürür. React Sunucu Bileşenleri (RSC) farklıdır: JavaScript'lerini istemciye hiç göndermez ve eşzamansız olabilir; ancak RSC iletişim kuralını destekleyen bir paketleyici gerekir (Next.js vb.).
Akışın Performans Faydaları
Akış kullanan SSR, kabuk için İlk Bayta Kadar Geçen Süreyi (TTFB) iyileştirir ve seçmeli hidrasyonu mümkün kılar; tarayıcı, tüm sayfa HTML'sinin akışı tamamlanmadan önce etkileşimli bölümleri hidrate edebilir.
Kısa Sınama
Sunucu HTML'si zaten mevcutken React'in hydrateRoot() işlevi createRoot() işlevinden farklı olarak ne yapar?
Özet
SSR, JavaScript yüklenmeden önce HTML göndermek için renderToPipeableStream kullanır. İstemci, sunucu HTML'sine olay dinleyicileri bağlamak için hydrateRoot() çağırır. Suspense içeren akış kullanan SSR önce kabuğu gönderir ve içeriği eşzamansız olarak doldurur. Tarayıcı API'lerini typeof window !== 'undefined' ile kontrol edin.
Yapay zeka eğitmeniyle React öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 88
- Dersler
- 324
Sıkça Sorulan Sorular
“React SSR'nin Perde Arkasında Çalışması” dersi ücretsiz mi?
Evet — “React SSR'nin Perde Arkasında Çalışması” 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.
“React SSR'nin Perde Arkasında Çalışması” dersinde ne öğreneceğim?
renderToString/renderToPipeableStream yolunu ve istemcinin hydration işlemini nasıl devraldığını izleyin. 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 1. dersidir.
“React SSR'nin Perde Arkasında Çalışması” 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
- React SSR'nin Perde Arkasında Çalışması
- Hydration Hataları: Nedenler ve Çözümler
- Seçici Hydration ve Akışla HTML
- Adalar Mimarisi Deseni