SSG

Statik Site Üretimi

Güncellendi 30 Eylül 20262 dk okuma

Kısaca

SSG, bir sitenin sayfalarını derleme zamanında düz HTML dosyalarına dönüştüren tekniktir; sunucular ya da CDN'ler bunları ek iş yapmadan anında sunabilir.

SSG nedir?

Statik site üretiminde (static site generation) bir derleme aracı, yayına almadan önce şablonlarınızı ya da bileşenlerinizi bir kez çalıştırır, gereken verileri çeker ve hazır HTML, CSS ile JavaScript dosyalarını yazar. Bu dosyalar bir web sunucusuna ya da CDN'e yüklenir; o da her ziyaretçiye önceden hazırlanmış aynı sayfayı verir.

İstek başına hiçbir uygulama kodu çalışmadığı için statik sayfalar çok hızlıdır, barındırması ucuzdur ve trafik artışlarında aşırı yüklenmesi zordur. SSG, dokümantasyon, bloglar, tanıtım sayfaları ve sözlükler gibi nadiren değişen ve herkes için aynı olan içeriğe uygundur. Astro, Hugo, Eleventy ve Next.js gibi araçlar bunu destekler.

SSG, bir müşteri istediğinde her broşürü elle yazmak yerine broşürleri önceden toplu olarak basmak gibidir. Dezavantajı, her değişikliğin yeniden derleme gerektirmesidir; bu, çok büyük sitelerde yavaş olabilir. Bu yüzden bazı framework'ler tek tek sayfaları arka planda yeniden derleyen artımlı yeniden üretim (incremental regeneration) sunar.

SSG, SSR'dan zamanlama bakımından ayrılır: SSG derleme zamanında, SSR ise her istekte render eder. Statik sayfalar yine de etkileşimli olabilir; çünkü JavaScript onları tarayıcıda hydrate edebilir ve istemci tarafı render (CSR), sayfa yüklendikten sonra kullanıcı menüsü gibi kişiselleştirilmiş kısımları doldurabilir.

Önemli noktalar

SSG, sayfaları derleme zamanında bir kez HTML dosyalarına dönüştürür.
Her ziyaretçi, çoğunlukla bir CDN'den gelen aynı hazır dosyaları alır.
Statik sayfalar hızlıdır, barındırması ucuzdur ve ölçeklemesi kolaydır.
İçerik güncellemeleri yeniden derleme veya artımlı yeniden üretim gerektirir.
SSG derleme zamanında, SSR istek zamanında render eder.

Örnek

Node.js ile küçük bir statik site oluşturucujavascript

import { mkdir, writeFile } from "node:fs/promises";

// Runs once at build time, not on every request
// (getAllPosts and escapeHtml are helpers defined elsewhere)
const posts = await getAllPosts();
await mkdir("dist/posts", { recursive: true });

for (const post of posts) {
  const html = `<h1>${escapeHtml(post.title)}</h1><p>${escapeHtml(post.text)}</p>`;
  // Each page becomes a plain HTML file that a CDN can serve as is
  await writeFile(`dist/posts/${post.slug}.html`, html);
}

Sık sorulan sorular

SSG ile SSR arasındaki fark nedir?

SSG her sayfanın HTML'ini derleme zamanında bir kez üretir ve her ziyaretçiye aynı dosyayı sunar; SSR ise HTML'i her istek için sunucuda üretir. SSG'nin sunumu daha hızlı ve ucuzdur; SSR kişiselleştirilmiş veya sürekli değişen içerik için uygundur.

Statik bir sitede dinamik özellikler olabilir mi?

Evet. Statik olarak üretilmiş bir sayfa, tarayıcıda veri çeken, formları işleyen veya kişiselleştirilmiş içerik gösteren JavaScript yükleyebilir; arama veya ödeme gibi işleri de serverless fonksiyonlar üstlenebilir.

Artımlı statik yeniden üretim (ISR) nedir?

Artımlı statik yeniden üretim, yani ISR, bazı framework'lerdeki, tek tek statik sayfaları belirli bir süre sonra ya da talep üzerine arka planda yeniden derleyen bir özelliktir. Her değişiklikte tüm siteyi yeniden derlemeden SSG'nin hızının çoğunu korur.

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

SSG vs SSRSSG her sayfayı derleme zamanında bir kez HTML'e çevirip herkese aynı dosyayı sunar; SSR ise HTML'i her istekte üretir, böylece güncel veri gösterebilir.

İlgili sayfalar

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