Statik Website Nedir? JAMstack Faydaları Neler ve Ne zaman Seçilmeliyim?

Ben bir blog sitesi yayını yapmak istiyorum, denildiğinde ilk akla gelen teknoloji genellikle Wordpress. Fakat Wordpress bir blog yayını yapan site için veya kullanıcıdan fazla input almayıp, içerik yayınlama amacını taşıyan tipteki siteler için yapılabilecek en optimal olmayan seçenek.

Bunun yerine, bu yazıda yeni sayılabilecek bir trend olan statik web siteleri ve “sunucusuz” altyapıdan ve JAMStack kavramından elimden geldiğince bahsetmeye çalışacağım.

Statik Websiteleri Nedir

Statik web siteleri, sunucuda tutulduğu gibi, üzerinde hiç bir işlem yapılmadan, kullanıcıya aktarılan HTML sayfalarından oluşan bir yapıdır. Dinamik web sitelerinden farkı, web sitesinin içeriği ve önyüzü, her kullanıcı isteğinde kullanıcılara göre özel generate edilmez, direkt olarak önceden üretilmiş sayfa kullanıcıya sunulur. Bunu şu örnek ile somutlandırmaya çalışalım;

Dinamik Websitesi;

  • Kullanıcı sunucuya istek yapar
  • İstek sunucudaki backend sistemi tarafından veritabanındaki bilgiler de kullanılarak parse edilir (örnek olarak PHP’yi ele alalım)
  • Backend sistemi, parse edilen isteğe uygun olarak bir web sayfası generate etmeye başlar (eğer bir cache mekanizması yoksa)
  • Bu generate edilen HTML dosyası kullanıcıya nginx veya apache gibi bir web sunucu yazılımı tarafından ulaştırılır.

Statik Websitesi;

  • Kullanıcı sunucuya istek yapar
  • Hali hazırda sunucuda bulunan HTML dosyası kullanıcıya nginx veya apache gibi bir web sunucu yazılımı tarafından ulaştırılır.

Örnekte görüldüğü gibi statik websitesi, 2 adımı birden ortadan kaldırıyor ve sunucu backend yazılımının gerçek zamanlı yapması gereken işleme gerek duymuyor ve çok büyük bir zaman kazancı sağlıyor, ek olarak ekstra cache mekanizmaları ile uğraş da gerektirmiyor, çünkü sunucu tabanlı önbelleklemenin en büyük nedeni backend sistemi üzerindeki yükü azaltmaktır.

Statik websiteleri her zaman için büyük bir pozitif değil, bunun altını çizmeliyiz. Bunun nedeni, kullanıcıların sunucu tarafına yaptığı isteklerin sadece tek tip olması gerekmesi. Yani bir statik web sayfası kullanıcının query’lerine göre özelleşmiş bir sayfa genelde sunamıyor.

Bu sayfalar önceden boş query ile oluşturulur ve her kullanıcının bu adrese girdiğinde aynı içeriği görmesi gerektiği durumlarda işlevsel. Bunlara örnek olarak blog sayfaları verilebilir.

JAMstack

JAMstack, Tarayıcı taraflı Javascript üzerine kurulmuş, içeriği sistemden ayıran bir Markup mantığı ile aktif API’lar kullanılarak oluşturulan statik websiteleri olarak düşünülebilir.

JAMstack tam olarak bir yazılım veya yazılım grubunu değil, modern statik sayfaların geliştirilmesi için bir tür prensip ve ana hat çizelgesi olarak görülebilir. JAM; Javascript, API ve Markup kelimelerinin kısaltılması ile oluşturulmuştur.

JAMstack ile ilgili daha fazla bilgiye ve örneklere buraya tıklayarak ulaşabilirsiniz.

Bir statik projede şu tip bir yapı görülebilir

  • assets/
    - style.css
    - image.png
  • js/
    - page.js
  • content/
    - page1.md
    - page2.md
    - page3.md
    - pages.json
  • scripts/
    - render.js
    - render.py (*)

Bu yapıda, assets dosyasında önyüzde sunulacak dosyalar bulunur, scripts klasöründe, sayfa içerisinde tarayıcı tarafında çalışacak JavaScript kodları bulunur. Bu kodlar, bir API sisteminden veri çekiyor veya bu API üzerinden bir veritabanına veri gönderiyor olabilir.

İçerik, content klasöründe yapıdan veya sistemden bağımsız bir markup formatında içerikler bulunur. Bu dosyalar json dosyaları (JavaScript ile çalışırken rahat olduğundan) veya markdown dosyaları olabilir.

Tüm bunlara ek olarak, scripts klasöründe prebuild yaparak tüm içerikleri, önyüz dosyalarını ve tarayıcı tabanlı JavaScript’i birleştirerek farklı HTML dosyaları haline getirecek scriptlerimiz bulunur. Bu scriptler Python veya Node.js gibi herhangi bir scripting dili kullanılarak yapılabilir.

Sistem kurulduktan sonra içerikte her değişiklik olduğunda tekrar build alınır ve statik websitesi içeriği bir web sunucusuna yüklenir ve burada kullanıcıya sunulur. Hiç bir şekilde sunucu backend’i ile iletişimde olmadığınız için AWS S3 (ek olarak Cloudflare) gibi içerik dağıtım sistemleri statik websitelerinin yayınlanması için çokça popüler.

Faydaları

En büyük faydası, statik web sayfalarının backend ile iletişimininin sıfır olması, ve sunucu tepki süresinin en aza iniyor olmasıdır. Ayrıca Gatsby (JS backend) veya Jekyll (Ruby backend) gibi sofistike open source statik websitesi generate eden yazılımlar sayesinde geliştirme ortamınızı çok verimli hale getirebiliyorsunuz. Sürekli integrasyon sayesinde aldığınız bir git repository ile hem build alabiliyor hem de bu build çıktısını sunucunuza bir commit ile yükleyebiliyorsunuz.

Backend kaynaklı oluşabilecek güvenlik açıklarını sıfıra indiriyorsunuz, ve eğer kendini kanıtlamış bir CDN üzerinde site içeriğinizi tutmanız kolaylaşıyor ve ddos benzeri soft açıkların da tamamen önüne geçmiş oluyorsunuz.

Teknik olarak bir sunucu kullanmıyor olduğunuzdan dolayı (API sunucusu dışında) büyük ölçeklerde siteler için sunucu ücretlerini lineer ve çok ucuz bir seviyeye çekibiliyorsunuz.

Tamamen SEO için mükemmel, statik web siteleri hem hız hem de içeriğin önceden hazır olması nedeniyle arama motorları için en iyi diyebileceğimiz teknoloji.

Statik Websitesi Üretici Olarak GatsbyJS

Gatsby benim severek kullandığım React üzerine geliştirilmiş bir statik websitesi üretici açık kaynaklı bir yazılım. Eğer React’a başlangıç seviyesinde aşinaysanız çok rahat bir şekilde kullanmaya başlayabilirsiniz.

Çok fazla özelliği bulunuyor ve geliştirme ortamı olarak gayet iyi, ayrıca Wordpress sitenizi rahat bir şekilde statik hale getirmeniz için eklentileri de mevcut.

En ilgimi çeken şey ise, sayfalar arasındaki geçişte, sadece componentlar arasında çıkartma ekleme ve güncelleme yapıyor olmasından dolayı geçiş hızı.

Bir örnek olarak Wordpress’den Gatsby statik projesine geçirdiğim websitesinin sayfa yüklenme hızlarına bakalım;

Wordpress sitesi, yazı sayfası

Görüldüğü gibi gayet optimize bir wordpress sayfası, DOM 1.3 saniyede yükleniyor ve sayfa yüklenmesi 5.4 saniye alıyor.

Aynı sayfanın Gatsby ile generate edilmiş haline bakalım;

Gatsby Sitesi, yazı sayfası

DOM, akıl alıcı 800 ms içerisinde yükleniyor, ve ögelerin render edilmesi 150 ms kadar zaman alıyor ve 1sn içerisinde bir blog sayfası yüklenmiş oluyor. Sonrasında 3.8 sn içerisinde lazyloading ile önemsiz componentlar ve resimlerin yüklenilmesi tamamlanıyor.

Ayrıca sayfa boyutundaki farka da dikkatinizi çekerim. Sayfa 3x daha az bir dosya boyutu ile kullanıcıya ulaşıyor. Gatsby’nin resim sıkıştırma, webp desteği gibi özelliklerinin de bulunduğunu ve bu sayfada da kullanıldığına ilginizi çekerim.

Sonuç

Statik websiteleri her durumda kullanılması uygun olmamasına rağmen, hem geliştirme ortamı hem ekonomik sunucu giderleri, en önemlisi de çok hızlı sayfa yüklemesi ile büyük bir artı, ve kullanılabilecek durumlarda kesinlikle tercih edilmesi gerekilen bir sistem.

Ek olarak eğer yeni bir geliştirici adayı iseniz JavaScript’e bir şans vermek isterseniz ve Türkçe kaynak arıyorsanız kitaplarıma göz atabilirsiniz. (Özellikle ilk kitap*)

I love making systems work efficiently and faster. Full Stack Web Developer. Currently working as freelancer

I love making systems work efficiently and faster. Full Stack Web Developer. Currently working as freelancer