FRONTEND KAPSAM
Web Rendering — (Updated)
Web Rendering yöntemleri yazısında yer alan yöntemler SSR, CSR, SSG ve Hybrid Rendering kavramları biraz daha geniş bakış açısı ile inceleyelim.
1. Web Uygulaması Nedir?
Tarayıcıda çalışan uygulama anlamına gelir. Burada web sayfası ile web uygulaması arasındaki temel fark Web Uygulamasının daha etkileşimli ve daha karmaşık bir yapıda olurken, Web Sayfası daha statik ve içerik gösterme üzerine bir yapıdır.
Buradaki işlem hep aynı şekilde çalışır, bir sunucu veya CDN sistemi üzerinden tarayıcı(browser) akan HTML, CSS ve JS kodunun Web Page Rendering (Pipeline) üzerinde işletilmesi ile gerçekleşir.
Konunun Daha İyi Anlaşılması İçin Ek Yazılar
- Chrome Web Sayfasını Ekrana Nasıl Çizer ? (Rendering)
- Chrome Nasıl Çalışır — Navigasyon
- Chrome Nasıl Çalılır — Input
Sonuçta amacımız Web App (Uygulamamıza) ait sayfaların render edilmesi. Render da her zaman aynı şekilde çalışıyor. O zaman bu işlemin basit olması gerekmez mi ?
2. Web Rendering
Web Rendering konusu Web Uygulama spectrum genişledikçe ihtiyaçlarda artmış bu doğrultuda JS kodunun ne kadarı sunucuda UI oluşturacağı , ne kadarı client UI oluşturacağı konusına göre değişkenlik göstermektedir.
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.
Bu konunun içerisinde
- SSR w/ Hydration
- Streaming
- Progressive Hydration rendering türleride girmiş durumda.
Örneğin Addy Osmani ‘nin atmış olduğu Web Rendering Spectrum görselinde bir çok ara kademenin gelmiş olduğunu görebilirsiniz.
Rendering on the web is a spectrum. Static HTML? SSR? Streaming? Here we cover options & trade-offs: http://bit.ly/renderingp & http://bit.ly/rendering-web. (Addy Osmani)
SSR (ServerSide Rendering) ← → CSR (ClientSide Rendering) arasında
- SSR w/hydration
- Streaming
- Progressive Hydration
- Static Generation
- Incremental Static Generation
gibi bir çok ara türde Web Rendering farklı şekillerde yapma yetenekleri ortaya çıkmıştır.
React-Router kütüphanesi ve Remix kütüphanesinin geliştiricisi olan Ryan Florence bu konuda bazı kısımları detaylandırmış
I could go on about a few other things in that graphic, but here are the highlights: Ryan Florence
Konunun Daha İyi Anlaşılması İçin Ek Yazılar
3. Component Rendering
10 yıllık süreçte jQuery sonrasında Backbone, Ember, Angular, React, Vue, Svelte, Solid.JS vb olmak üzerine bir çok kütüphane ClientSide Rendering işlemini gerçekleştirmede geliştiricilere yardım etti.
Temelde yaptığı DOM API üzerinde Renderer çalıştırarak kullanıcının tanımlarını DOM yansıtmak ve senkronizasyonundan bu kütüphaneler sorumludur.
Konunun Daha İyi Anlaşılması İçin Ek Yazılar
Bileşen(Component Based) yaklaşımlar JS kütüphanelerde başarılı olunca aynı yapılar native olarak Webin desteklemesi için WebComponents, Shadow DOM, Custom Element ve HTML Template özellikleri geldi. Burada gördüğüm en popüler olan Lit kütüphanesi.
Konunun Daha İyi Anlaşılması İçin Ek Yazılar
4. Server Rendering
Rendering kısmı zaman içerisinde ServerSide Rendering bir geri dönüş var. Takiki burada amaç PHP ve Ruby Rails dönüş değil. Burada React, Vue, Svelte gibi kütüphaneler Sunucu üzerinde de çalıştırabilecek hale geldi.
Static Site (Statik Web Sayfaları)
Etkileşimi az olan blog, gazete, wikipedia, forum benzeri yapılar CMS (Wordpress, Drupal, Joomla) gibi ürünlerin alternatifi sunucu tarafında JamStack (Javascript, API — GraphQL ve REST ve Markup) Stack ile yeni nesil kütüphane Syntax kullanarak React ve Vue ve bunların ekosistemini kullanarak sayfa üretmemize olanak sağlar.
Bunun için kullanılan kütüphaneler Next, Hugo, Gatsby, Jekyll, Nuxt, Hexo, Slate, Docusaurus, GitBook gibi JS kütüphaneleri ile API üzerinden alınan bilgiler ile HTML üretme işlemleri gerçekleştirilir.
Konunun Daha İyi Anlaşılması İçin Ek Yazılar
- Frontend Ürün ve Kütüphane Evreninden Haberler — 4(Blitz.JS ve Next.JS)
- Frontend Ürün ve Kütüphane Evreninden Haberler — 5(Docusaurus 2 Beta, ve JamStack)
Progressive Enhancement Rendering (Hydration)
Yeni trend sunucu tarafından olabildiğince JS kodunu tarayıcıya gönderMeme üzerine, bunu 0kb of JS gönderilmesi denebilir.
The common thread is to send less JavaScript to the browser seen most recently championed by 0kb of JS The Return of Server Side Routing (RyanCarnito)
Peki bunu nasıl gerçekleştiriyorlar ? Henüz bu konuda pek bilgim olmadığı için bu konuyu detaylı olarak ilerleyen yazılarda incelemeye çalışacağım. Bu kısımda bahsi geçen kütüphaneler;
- AlpineJS’, Stimulus’, and Petite Vue’
- Astro, Slinkity, and Iles
- Marko or Qwik
- Turbo
- React Server Components
- Remix Run, SvelteKit
Ekstra Referanslar
- Rendering Patterns
- Rendering On Web
- Rendering Patterns
- Ryan Florence about Rendering
- JS vs JS fight (Round 1)
- JS vs JS fight (Round 2)
- Progressive Enhancement and Modern Web
- Building Partially Hydrated, Progressively Enhanced Static Websites with Isomorphic Preact and Eleventye
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
