# SSR (Sunucu Tarafı Render)

Adres: https://softwaredictionary.org/tr/terimler/ssr
Kategori: Web Geliştirme
Son güncelleme: 2026-09-29

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.

## Ö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 üretmek

```javascript
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.

---

Software Dictionary: https://softwaredictionary.org/tr · https://softwaredictionary.org/tr/llms.txt