JAMSTACK NEDİR?

Barış Taş
2 min readSep 23, 2021

--

JAMstack web’i daha hızlı, daha güvenli ve daha kolay ölçeklenebilir hale getirmek için tasarlanmış bir mimaridir.

Jamstack ile tüm frontend, build işlemi sırasında yüksek düzeyde optimize edilmiş, statik html sayfalar haline getirilir(pre-rendering). Bu sayfalar direkt olarak CDN üzerinden sunulabilir. Bu da maksimum hız ve dinamik sunucuların maliyetini, karmaşıklığını ve riskini minimuma indirmek demektir. Bir çok yazılımcı javascript, api ve html’e aşina olduğu için Jamstack geliştirme için gerekli araçlara sahiptir.

Dinamik web sitelerinde kullanıcı bir istekte bulunduğunda sunucu tarafında bir backend kodu devreye girer, veri tabanından veri çekilir, bu veri ile html sayfa oluşturulur istemciye sunucu vasıtasıyla ulaştırılır. Yani çoğu işlem o esnada gerçekleştirilir.

Statik web sitelerinde ise kullanıcıya hali hazırda oluşturulmuş halde olan html ler CDN sayesinde en yakın sunucudan ulaştırılır.

Avantajları

Güvenli — Server-side ve veritabanı işlemlerini en aza indirdiği ve saldırı olabilecek noktalarının da azalmasıyla daha güvenli duruma geliyor.

Hızlı — Tamamen statik ve cache lenmiştir.

Ölçeklenebilir — Statik sitelerde karmaşık cache mekanizmalarına gerek yoktur.

Seo uyumlu — Arama motorları bir siteyi dizine eklerken yükleme sürelerine öncelik verdiğinden, daha hızlı yükleme süresi daha iyi seo anlamına gelir.

Dezavantajları

— Çok fazla sayfası olan siteler için build süresinin uzun sürmesi

— Siteniz dinamik özellikler gerektirdiğinde, potansiyel olarak sorunlarla karşılaşabilirsiniz. İsteklerinizi işleyecek bir veritabanınız olmadan, kendi kodunuz veya API çağrılarınız ile daha fazla yükü kendiniz yapmanız gerekecektir.

NASIL OLUŞTURULUR?

Statik web siteleri oluşturmak için onlarca static site generator (ssg) mevcuttur. React tabanlı Next.js ve Gatsby.js, vue tabanlı Nuxt.js en popülerleri arasında. Tam listeye buradan bakabilirsiniz. https://jamstack.org/generators/

Site içeriğini yönetmek için kullanılabilecek headless cms lerin listesi de burada: https://jamstack.org/headless-cms/

Detaylı bilgiye resmi web sitesinden erişebilirsiniz.

Örnek Uygulama

Nuxt.js ile oluşturduğum örnek uygulamayı inceleyebilirsiniz.

Cms — Strapi (db-mongo db, servis sağlayıcı-heroku)
Frontend — Nuxt.js(hosting-netlify)

Kaynak kodları buradan inceleyebilirsiniz:
https://github.com/barisizmist/jamstack
https://github.com/barisizmist/jamstak-backend

Okuduğunuz için teşekkürler :) Hoşçakalın

--

--