Tarayıcı ve frontend
SSR, CSR, SSG: sayfa nerede üretilir?
HTML’in sunucuda mı, tarayıcıda mı, derleme anında mı üretildiği hız, SEO ve maliyeti değiştirir.
Kavramı anlayalım
İstemci tarafı render’da (CSR) sunucu boş bir HTML iskeleti ve büyük bir JavaScript paketi gönderir; içerik tarayıcıda veri çekildikten sonra oluşur. Sunucu tarafı render’da (SSR) HTML her istekte sunucuda veriyle birlikte üretilir; kullanıcı içeriği JavaScript beklemeden görür. Statik üretimde (SSG) HTML derleme anında bir kez üretilir ve dosya gibi sunulur; çok hızlıdır ama veri değişince yeniden derleme gerekir.
Next.js App Router’da bileşenler varsayılan olarak Server Component’tir: sunucuda çalışır, veritabanına veya API’ye doğrudan erişebilir ve tarayıcıya JavaScript göndermez. Etkileşim gereken parçalar ‘use client’ ile işaretlenir ve tarayıcıda canlanır (hydration). Veri çağrılarına süre verilerek (revalidate) sayfalar önbellekten sunulabilir ve arka planda yenilenebilir; buna artımlı yeniden üretim de denir.
Bu sitede blog yazısı SSR ile üretilir ve API yanıtı 60 saniye önbellekte tutulur. Simülatördeki ilk senaryoda Next.js’in API’yi tarayıcı adına çağırdığını görebilirsin.
Render stratejisi; ilk açılış hızını, arama motoru görünürlüğünü ve sunucu maliyetini birlikte belirler.
Bütün sayfayı ‘use client’ yapıp sunucu bileşenlerinin avantajını kaybetmek.
Bir mektubun şehirdeki yolculuğu
İsteği bir mektup, sunucuyu bir şehir gibi düşün. Senaryo seç, oynat ve mektubun hangi kapıdan geçip nerede durdurulduğunu izle.
Bir yazıya tıkladın. Tarayıcı ‘Bana bu yazıyı gönder’ diyen bir mektup yazıyor.
Aynı konu. Üç farklı derinlik.
// Server Component (varsayılan): sunucuda çalışır
export default async function Page() {
const posts = await getPosts();
return <PostList posts={posts} />;
}Veri sunucuda çekilir, tarayıcıya hazır HTML gider.
Bu sayfa gerçek bir sunucuya veya veritabanına bağlanmaz. Kod örnekleri .NET 8, Next.js ve SQL Server için temsilîdir; süreler simülasyondaki örnek değerlerdir, ölçüm değildir. Örnekleri yalnız kendi geliştirme ortamında dene; gerçek bağlantı dizesi, token veya parola paylaşma.
Önce kendin dene.
Bir ürün sayfası: açıklama nadiren değişir, stok bilgisi her dakika değişir, ‘sepete ekle’ düğmesi etkileşimlidir. Her parçayı nasıl üretirsin?
Çözümü ve açıklamasını göster
Açıklama: Server Component, uzun revalidate (ör. 1 saat) veya etiketle geçersiz kılma
Stok: kısa revalidate (ör. 30 sn) ya da istemcide periyodik yenileme
Düğme: küçük bir 'use client' bileşeniTek bir sayfa farklı tazelik ihtiyaçları olan parçalardan oluşabilir; her parçaya uygun strateji seçilir.