Jamstack Nedir?
Jamstack, modern web geliştirme dünyasında devrim yaratan bir mimari yaklaşımdır. Adını JavaScript, API ve Markup kelimelerinin baş harflerinden alır. Geleneksel monolitik web mimarilerinin aksine, Jamstack ön yüzü (frontend) arka uçtan (backend) tamamen ayırarak daha hızlı, daha güvenli ve daha ölçeklenebilir web siteleri oluşturmayı hedefler.
Geleneksel bir web uygulamasında her kullanıcı isteği sunucuya gider, sunucu veritabanını sorgular, HTML'i dinamik olarak oluşturur ve tarayıcıya gönderir. Jamstack'te ise HTML sayfaları build (derleme) aşamasında önceden oluşturulur ve bir CDN üzerinden doğrudan sunulur. Dinamik işlevsellik ise istemci tarafında JavaScript ve üçüncü parti API'ler aracılığıyla sağlanır.
Jamstack'in Temel Bileşenleri
1. JavaScript
İstemci tarafındaki tüm dinamik işlemler JavaScript ile gerçekleştirilir. React, Vue.js, Svelte gibi modern framework'ler bu katmanda kullanılır. Kullanıcı etkileşimleri, form gönderimleri, dinamik içerik yükleme gibi işlemler tamamen tarayıcıda çalışan JavaScript koduyla yönetilir.
2. API'ler
Sunucu tarafı işlemleri ve veritabanı sorguları, yeniden kullanılabilir API'ler aracılığıyla soyutlanır. Bu API'ler kendi özel mikroservisleriniz olabileceği gibi, üçüncü parti hizmetler de olabilir. Ödeme işlemleri için Stripe, kimlik doğrulama için Auth0, içerik yönetimi için bir Headless CMS — bunların hepsi API katmanında yer alır.
3. Markup (Önceden Oluşturulmuş İşaretleme)
Sitenin HTML yapısı, bir Static Site Generator (SSG) kullanılarak derleme zamanında oluşturulur. Bu, her sayfa isteğinde sunucunun HTML üretmesine gerek kalmadığı anlamına gelir. Oluşturulan statik dosyalar doğrudan CDN'den sunulur.
Popüler Jamstack Araçları ve Framework'leri
- Next.js: React tabanlı, hem SSG hem de SSR (Server-Side Rendering) destekli güçlü bir framework. Incremental Static Regeneration (ISR) özelliğiyle Jamstack'in sınırlarını genişletir.
- Gatsby: React tabanlı, GraphQL veri katmanı ile entegre çalışan bir statik site oluşturucu. Blog ve dokümantasyon siteleri için özellikle popülerdir.
- Nuxt.js: Vue.js ekosisteminin Next.js karşılığı. SSG, SSR ve hibrit modları destekler.
- Astro: Varsayılan olarak sıfır JavaScript gönderen, "Islands Architecture" yaklaşımını benimseyen yeni nesil bir framework.
- Hugo: Go diliyle yazılmış, son derece hızlı bir statik site oluşturucu.
- 11ty (Eleventy): Minimal ve esnek bir JavaScript tabanlı statik site oluşturucu.
Jamstack Projesi Oluşturma: Pratik Örnek
Next.js ile basit bir Jamstack projesi oluşturalım. Öncelikle projeyi başlatalım:
npx create-next-app@latest jamstack-blog --typescript
cd jamstack-blog
Statik sayfa oluşturma (SSG) için bir blog sayfası örneği:
// pages/blog/[slug].tsx
import { GetStaticPaths, GetStaticProps } from 'next';
interface Post {
slug: string;
title: string;
content: string;
}
export const getStaticPaths: GetStaticPaths = async () => {
// Headless CMS veya API'den yazı listesini çek
const res = await fetch('https://api.example.com/posts');
const posts: Post[] = await res.json();
const paths = posts.map((post) => ({
params: { slug: post.slug },
}));
return { paths, fallback: 'blocking' };
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const res = await fetch(`https://api.example.com/posts/${params?.slug}`);
const post: Post = await res.json();
return {
props: { post },
revalidate: 60, // ISR: 60 saniyede bir yeniden oluştur
};
};
export default function BlogPost({ post }: { post: Post }) {
return (
<article>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</article>
);
}
Bu örnekte getStaticPaths fonksiyonu derleme zamanında hangi sayfaların oluşturulacağını belirler. getStaticProps ise her sayfa için gerekli veriyi API'den çeker. revalidate parametresi sayesinde sayfalar belirli aralıklarla arka planda yeniden oluşturulur; bu, Next.js'in ISR özelliğidir.
Headless CMS Entegrasyonu
Jamstack mimarisinde içerik yönetimi genellikle bir Headless CMS ile sağlanır. Geleneksel CMS'lerden (WordPress gibi) farklı olarak, Headless CMS yalnızca içerik yönetimi arayüzü ve API sunar; ön yüz sunumu tamamen geliştiriciye bırakılır.
- Strapi: Açık kaynaklı, self-hosted bir Headless CMS. Node.js tabanlıdır ve REST/GraphQL API'leri otomatik oluşturur.
- Contentful: Bulut tabanlı, kurumsal düzeyde bir Headless CMS. CDN entegrasyonu ve güçlü bir içerik modelleme arayüzü sunar.
- Sanity: Gerçek zamanlı işbirliği destekli, esnek bir içerik platformu. GROQ adlı kendi sorgu dilini kullanır.
- Prismic: Slice tabanlı içerik modelleme yaklaşımıyla öne çıkan bir Headless CMS.
Deployment ve Hosting
Jamstack siteleri statik dosyalardan oluştuğu için deployment süreci son derece basittir. En popüler platformlar şunlardır:
- Vercel: Next.js'in yaratıcıları tarafından geliştirilen, Git tabanlı otomatik deployment sunan bir platform. Edge Functions ve Serverless Functions desteği ile dinamik işlevsellik de eklenebilir.
- Netlify: Jamstack'in popülerleşmesinde büyük rol oynayan bir platform. Form işleme, kimlik doğrulama ve serverless functions gibi ek hizmetler sunar.
- Cloudflare Pages: Cloudflare'in global CDN ağı üzerinde çalışan, son derece hızlı bir hosting çözümü. Workers entegrasyonu ile sunucu tarafı mantık da eklenebilir.
Tipik bir deployment akışı şu şekildedir:
- Geliştirici kodu Git deposuna (GitHub, GitLab) push eder.
- Hosting platformu otomatik olarak bir build tetikler.
- SSG, tüm sayfaları statik HTML olarak oluşturur.
- Oluşturulan dosyalar global CDN'e dağıtılır.
- Kullanıcılar en yakın CDN noktasından içeriğe erişir.
Jamstack'in Avantajları
Performans
Önceden oluşturulmuş HTML dosyaları CDN üzerinden sunulduğu için sayfa yükleme süreleri son derece düşüktür. Sunucu tarafında HTML oluşturma, veritabanı sorgusu veya şablon işleme gibi gecikmeler ortadan kalkar. Google'ın Core Web Vitals metriklerinde yüksek puanlar almak çok daha kolaydır.
Güvenlik
Statik dosyalar sunulduğu için saldırı yüzeyi önemli ölçüde küçülür. Sunucu tarafı kod çalıştırılmadığından SQL injection, XSS gibi yaygın güvenlik açıklarının riski azalır. API katmanı ayrı olduğu için güvenlik önlemleri daha hedefli şekilde uygulanabilir.
Ölçeklenebilirlik
CDN zaten global ölçekte dağıtılmış bir altyapıdır. Trafik ani artışlarında bile performans düşüşü yaşanmaz çünkü her istek bir statik dosya sunumundan ibarettir. Sunucu kapasitesi artırma veya yük dengeleme gibi karmaşık altyapı işlemleri gereksiz hale gelir.
Geliştirici Deneyimi
Frontend ve backend'in ayrılması, ekiplerin bağımsız çalışmasını sağlar. Modern araçlar (hot reloading, TypeScript, otomatik deployment) ile geliştirme süreci hızlı ve keyiflidir. Git tabanlı iş akışları, sürüm kontrolü ve geri alma işlemlerini basitleştirir.
Jamstack'in Sınırlamaları
Her mimari yaklaşım gibi Jamstack'in de bazı sınırlamaları vardır:
- Derleme süreleri: Binlerce sayfası olan büyük sitelerde build süreleri uzayabilir. ISR ve DPR (Distributed Persistent Rendering) gibi teknikler bu sorunu hafifletse de tamamen çözmez.
- Gerçek zamanlı içerik: Sık güncellenen, kullanıcıya özel veya gerçek zamanlı içerik gerektiren uygulamalar (sosyal medya, canlı skor takibi) için saf Jamstack yaklaşımı yetersiz kalabilir.
- Karmaşık etkileşimler: Gelişmiş sunucu tarafı mantık gerektiren uygulamalar (e-ticaret sepet yönetimi, karmaşık form iş akışları) ek serverless altyapı gerektirir.
- Öğrenme eğrisi: Geleneksel monolitik yaklaşıma alışkın geliştiriciler için ön yüz, API ve derleme sürecini ayrı yönetmek başlangıçta zorlayıcı olabilir.
Ne Zaman Jamstack Kullanmalısınız?
Jamstack mimarisi özellikle şu senaryolarda idealdir:
- Bloglar ve içerik siteleri: İçerik ağırlıklı, SEO'nun önemli olduğu projeler.
- Dokümantasyon siteleri: Teknik dokümantasyon, API referansları ve bilgi tabanları.
- Kurumsal web siteleri: Şirket tanıtım sayfaları, landing page'ler ve pazarlama siteleri.
- E-ticaret vitrinleri: Ürün kataloglarının statik oluşturulduğu, sepet ve ödeme işlemlerinin API ile yönetildiği mağazalar.
- Portfolyo ve kişisel siteler: Hız ve basitliğin ön planda olduğu projeler.
Sonuç
Jamstack, modern web geliştirmenin temel sorunlarına — performans, güvenlik ve ölçeklenebilirlik — zarif çözümler sunan güçlü bir mimari yaklaşımdır. Her proje için doğru seçim olmasa da, doğru kullanım senaryolarında geleneksel mimarilere kıyasla önemli avantajlar sağlar. Next.js, Astro ve benzeri araçların sürekli gelişmesiyle birlikte, Jamstack'in sınırlamaları giderek azalmakta ve uygulama alanları genişlemektedir. Yeni bir web projesi planlıyorsanız, Jamstack'i ciddi bir alternatif olarak değerlendirmenizi öneririm.
Yazar Hakkında
