Öncelikle Statik web siteleri nedir ve temel olarak Dinanik web sitelerinden nasıl ayrılır onları ibr inceleyelim.
Statik web siteleri, sunucuda tutulduğu gibi, üzerinde herhangi bir oluşturma işlemi yapılmadan daha önceden hazırlanmış HTML sayfaları kullanıcılara sunan web siteleridir. Adından da anlaşılacağı üzere Statik yani sabit web siteleri anlamına gelmektedir. Request yani istekler doğrultusunda oluşmaz daha önecen var olan içeriği sunarlar.
Bunun tam tersi mantığıyla Dİnanik web sitelerinide tanımlayabiliriz.
Aralarındaki belirgin farklar ise;
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.Buradaki temel farklarda gördüldüğü üzere Statik web siteleri BackEnd işlemlere ihtiyaç duyulmadan sunucu tarafında generate edilmiyor ve bu büyük bir kaynak tüketimi ile hız avantajı sağlıyor. Bütün bunların yanı sıra extradan bir cache mekanizması ile uğraşmayada gerek kalmıyor. Çünkü Cache sisteminin mantığı Back End üzerindeki yükü hafifletmektir.
Peki ne yapacağız tüm sitelerimizi statik hale mi geireceğiz?
Tabi ki hayır ancak developer arkadaşlar bu konuyu düşünmüş taşınmış ve Statik gibi oluşan ancak kullanıcıların taleplerine göre generate edilebilen bir sistem yapılabilir mi diye araştırmalar yapılmış ve karşımıza yeni nesil JAMstack teknolojisi çıkıyor.
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 falza detay için resmi web sitesini iniceleyebilirsiniz.
Şimdi daha detaylı inceleyelim;
Bir JAMStack tabanlı projede genellikle şu tip bir yapı gelir;
css/
- style.css
- custom.css
vs.
js/
- app.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 belirgin ve büyük faydası BackEnd ile iletişiminin sıfır olması.
- Buna bağlı olarak sunucu tepki sürelerinin inanılmaz derece düşürmesi.
- Ayrıca Gatsby (JS backend) veya Jekyll (Py backend) gibi sofistike open source statik websitesi generate eden yazılımlar sayesinde geliştirme ortamınızı çok verimli hale getirebilmesi.
- 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 ile iletişim sıfır olduğundan oluşabilecek güvenlik açıkları riskini sıfıra indirebiliyorsunuz.
- Cloud tabanlı web sitenizi barındırmanız olağanüstü kolaylaşıyor.
- Teknik olarak sunucu kullanmıyorsunuz sadece API sunucusu dıında diğer sunum sunucu maliyetleri inanılmaz düşürebiliyorsunuz.
Ve son olarak;
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.
Esenle kalın....