FRONTEND KAPSAM
Web Rendering
Bu yazıda daha önceden ele aldığım SSR ve CSR konusunu biraz daha detaylı incelemeye çalışacağım. Rendering yöntemlerini bir yazı üzerinden ilerleyerek konuyu anlatıyor olacağım.
Bu yazdıda Jason Miller ve Addy Osmani ‘nın Rendering on Web yazısını inceleyip bu konuyu anlatmaya çalışacağım.
Yazı benim bir süre önce yazmış olduğum HTML Rendering Nerede Yapılmalı ? blog yazısındakı soru ile başıyor.
Web sitesi geliştirirken logic ve rendering işlemini farklı farklı yerlerde yapma imkanı bulunur, web sayfası geliştirmenin farklı yöntemleri varken geliştiriciler hangi yaklaşımı tercih edeceklerine nasıl karar verecekler.
Bu kararı verebilmek için geliştiricilerin Rendering Yöntemlerini ve sonucundaki performans trade-off larını iyi anlaması gerekiyor.
A. Rendering
Rendering konusunu nedir diyorsanız. Bu konuyu anlattığım blog yazısında
detayları okuyabilirsiniz.
B. Statik vs Dinamik Web
Diğer anlaşılması gereken konu Statik Web ile Dinamik Web arasında ne fark olduğudur. Statik web sayfası sunucudan sayfayı çektikten sonra (HTML, CSS, JS) daha sonra tekrar sunucuya gidip AJAX ile istekte bulunmayan, içeriği kişiye göre değişmeyen veya içerisindeki verinin değişmesinden kaynaklı Örneğin (kur, hava durumu vs..) dinamik verileri içermeyen blog, haber vs.. sayfalardır. Dinamik sayfası’da bunun aksine sayfa içeriğinin çağrılan zaman aralığına ve parametrelerine göre değiştiği AJAX, API, Veritabanı gibi ihtiyaçlar duyan web sayfalarıdır.
C. Performans Terimleri
- TTFB (Time to First Byte) Linke tıklama ile ilk içerik bit bilgisinin gelmesi arasında geçen süre.
- FP (First Paint) Kullanıcıya ilk pixel gösterilmesindeki zaman
- FCP (First Contentful Paint) İstekte bulunan ilk mantıksal içeriğin gösterilmesindeki zaman
- TTI Time To Interactive Sayfanın kullanıcı için interaction hazır olduğu zaman (tüm eventlerinin bağlanması)
D. Rendering Yöntemleri
- SSR (Server Side Rendering): Rendering işleminin sunucu tarafında yapıldığı ASP.Net, JSP, PHP gibi yöntemler ile dinamik sayfaların veritabanından çekilerek üretildiği yöntemdir. Burada JS ekran oluşturmasındaki rolü çok daha az olacağı için FP ve FCP çok hızlı gerçekleşirken, verinin sunucudan gelme süresi TTFB daha uzun olacaktır.
- CSR (Client Side Rendering): Rendering işleminin tarayıcı tarafında yapıldığı Angular, React, Vue, Svelte gibi yöntemler ile dinamik sayfaların AJAX ile çekildiği ve ekranda Template Rendering yöntemi ile Template + Data birleştirilerek ekranların oluşturulduğu yöntemdir. Bu yöntemde TTFB ve FP daha hızlı gerçekleştirsek bile TTI yani kullanıcının ilgili web sayfası ile etkileşim sağlayağı duruma getirme süresinde hızlandırma sağlamış olamayız.
- Static Rendering: Statik sayfalar için kullanılan bu yöntemde sayfalar çok az değiştiği ve veritabanı ihtiyacı olmadığı için sayfalar sunucuya atılmadan önce pre-rendering yöntemi ile son hallerine getirelerek CDN yani edge-caching ortamlarına atılarak buralardan çok hızlı olacak şekilde sunulurlar. Son dönemde Gatsby , Jekyll araçları ile bu türde sayfalar üretmeniz oldukça kolaylaşmıştır. Bu sayfalarda hem TTFB hemde TTI süresi oldukça kısadır. Bu tarz sayfaların JS çalıştırma veya interaction ihtiyaçları oldukça az ve limitlidir.
- Hybrid Rendering: Sayfaların bazıları içerik yüklerine göre SSR oluşturmak mantıklıyken bazı çok yüklü sayfaları lazy CSR ile oluşturmak mantıklıdır. Bu tür durumları destekleyen Next, Nuxt, Nest, Sapper gibi framework çıktı. Bu framework benzer yeteneklere sahipken kod geliştirmede Next — React, Nuxt — Vue, Nest — Angular, Sapper — Svelte bileşen geliştirme yöntemini benimser.
Not: Buradaki rendering yöntemlerde sayfaların oluşturulmasında optimizasyon amaçlı gerçek bileşenlerin yerine önce placeholder görseller konulup sonra bunların yerine gerçeklerinin konulması konusu ele alınmamıştır.
Referanslar
- Rendering on the Web
- Difference Between Static And Dynamic Web Pages
- HTML Rendering Nerede Yapılmalı ?
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
