SSR

Sunucu Tarafı Render

Güncellendi 29 Eylül 20262 dk okuma

Kısaca

SSR, sunucunun her istekte bir sayfanın tam HTML'ini oluşturduğu ve böylece kullanıcıların ile arama motorlarının hazır içeriği hemen aldığı tekniktir.

SSR nedir?

Sunucu tarafı render'da (server-side rendering) sunucu uygulama kodunu çalıştırır, gereken verileri çeker ve yanıtı göndermeden önce eksiksiz HTML üretir. Tarayıcı, JavaScript'in inip sayfayı kendisinin oluşturmasını beklemek yerine bu içeriği hemen gösterebilir.

Modern JavaScript framework'lerinde SSR'ın ardından genellikle hydration gelir: tarayıcı JavaScript'i indirir, mevcut HTML'e olay yöneticilerini (event handler) bağlar ve sayfa tümüyle etkileşimli hale gelir. Next.js, Nuxt ve SvelteKit gibi framework'ler bu modeli destekler; streaming gibi teknikler ise sayfanın parçalarını hazır olur olmaz göndermeyi sağlar.

Restoran benzetmesi işe yarar: istemci tarafı render size ham malzemeleri ve masanızda pişireceğiniz bir tarifi verir, SSR ise hazır yemeği getirir. Daha erken yemeye başlarsınız; masaya göz atan herkes de, arama motoru ve yapay zekâ tarayıcıları dahil, yemeğin ne olduğunu görebilir.

SSR sıklıkla statik site üretimiyle (SSG) karıştırılır. SSR HTML'i her istekte üretir; bu da kişiselleştirilmiş ya da sık değişen sayfalara uygundur. SSG ise sayfaları derleme sırasında bir kez üretir ve herkese aynı dosyaları sunar; bu daha hızlı ve ucuzdur ama daha az dinamiktir. Birçok site SSR, SSG ve istemci tarafı render'ı (CSR) sayfa sayfa karıştırır.

Bir bakışta

SSR içeriği ekrana daha erken getirir; bu, yavaş cihazlara ve arama motorlarına yarar. SSG aynı oluşturmayı derleme sırasında bir kez yapar.

Önemli noktalar

SSR, her istek için HTML'i sunucuda üretir.
Kullanıcılar, özellikle yavaş cihazlarda, içeriği daha erken görür.
Tarayıcılar eksiksiz içerik alır; bu da SEO'ya yardımcı olur.
Hydration, sunucuda üretilmiş HTML'i tarayıcıda etkileşimli hale getirir.
SSG derleme zamanında, SSR istek zamanında render eder.

Örnek

Node.js ile HTML'i sunucuda üretmekjavascript

import { createServer } from "node:http";

createServer(async (req, res) => {
  // Fetch data on the server, before responding
  // (getLatestPosts and escapeHtml are helpers defined elsewhere)
  const posts = await getLatestPosts();
  const items = posts.map((p) => `<li>${escapeHtml(p.title)}</li>`).join("");

  // Send complete HTML that the browser can display immediately
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.end(`<h1>Latest posts</h1><ul>${items}</ul>`);
}).listen(3000);

Sık sorulan sorular

SSR ile SSG arasındaki fark nedir?

SSR, bir sayfanın HTML'ini her istenişinde sunucuda üretir; SSG ise derleme sırasında bir kez üretir ve her ziyaretçi için aynı dosyayı kullanır. SSG'nin sunumu daha hızlıdır; SSR ise sık değişen ya da kullanıcıya bağlı içerik için daha uygundur.

SSR ile CSR arasındaki fark nedir?

İstemci tarafı render'da (CSR) sunucu çoğunlukla boş bir sayfa gönderir ve içeriği tarayıcıda JavaScript oluşturur. SSR'da ise sunucu hazır HTML gönderir; içerik daha erken görünür ve tarayıcılar için okunması daha kolaydır.

Hydration nedir?

Hydration, tarayıcıda çalışan JavaScript'in sunucuda üretilmiş HTML'i devralıp olay yöneticilerini ve durumu (state) bağladığı, böylece sayfanın etkileşimli hale geldiği adımdır.

Sık karşılaştırılanlar

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin