Frontend
Rendering, Hydration, Resumability Nedir ?
Frontend Geliştirken Duyduğumuz Bazı Kavramlar var, Framework’ler bu kavramlar üzerinden birbirleri ile kıyaslanıyor ve birbirlerine göre farklılıklarını anlatıyorlar, peki nedir Reactivity, Rendering, Hydration, Progressive Enhancement ve Resumability
Tahmin ediyorum ki Frontend Geliştirme işinde iseniz, sizde uzun zamandır bu kavramları sık sık duymuşsunuzdur. Genelde bu kavramlar üzerinden Framework karşılaştırmaları yapılmaktadır.
Bir önceki yazımızda Hangi Frontend Framework Kullanmalıyım ? (Next, Remix, Qwik, Astro, Vite, …) aşağıdaki grafiği paylaşmıştık.
Sol tarafta ilk kolonda
- Routing
- Rendering
- Hydration
- Resumable
benzeri kavramların geçtiğini görebilirsiniz. Nedir bunlar ?
Rendering
Tarayıcılar HTML, CSS ve JS dosyalarını diğer Resim, Video vb.. kaynaklar ile bir şekilde birleştirerek Window içerisine çizme işlemini gerçekleştirir. Rendering konusuna uzunca değindiğim. Chrome üzerinde Rendering nasıl gerçekleşir yazımı okuyabilirsiniz.
Burada 2 temel Rendering Yöntemi ile Karşılaşırız.
- ClientSide Rendering
- ServerSide Rendering
Bu ayrımın nedeni ClientSide Rendering → JS React, Vue benzeri kütüphaneler ile DOM içerisinde sadece bir root div kullanarak tüm Rendering işlemini Tarayıcının JS üzerinden gerçekleştirmesi hatta CSS işlemleri için bile JS Kütüphaneleri kullanılarak CSS in JS ile gerçekleştirmeleri.
const root = ReactDOM.createRoot(
document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);ServerSide Rendering yönteminde ise → HTML tarayıcıya ulaşmadan Server tarafında Rendering işleminin hallediliyor olması PHP, ASPNet, JSP, Express ve Template hep bu yöntemleri kullanarak sununu tarafında HTML DOM elemanlarının çoğu oluşturulmuş şekilde dönerler. Hatta React kütüphanesininde bunun için birkaç yöntemi bulunur.
import { renderToString } from 'react-dom/server';
const html = renderToString(<App />);Hydration / Rehydration
Web uygulamanız sunucuda render edildi ve HTML, statik içerik ile tarayıcıda gösteriliyor, bu aşamada gerçek veriler olmadığı için placeholder gösteriyoruz, JS henüz tarayıcı kısmında DOM elemanlarına bağlanmış değil.
Bu durumda ekranlara ve ekrandaki bileşenlere interactivity yani etkileşim kazandırmak için EventListener eklenmesi, bileşenlerin ilk state atanması gerekmektedir.
Bu bağlanma sürecine Hydration deniliyor.
- Sunucu tarafında
import ReactDOMServer from 'react-dom/server';
import App from './App';
const html = ReactDOMServer.renderToString(<App />);
// 'html' now contains the server-rendered HTML- Tarayıcı Tarafında
Tarayıcı tarafında elimizde root içerinde render edilmiş bir HTML bulunuyor
<div id="root"><!-- Server-rendered HTML goes here --></div>Bu uygulamanın etkileşim kazanabilmesi için root içerisinde hydrate işlemini başlatıyoruz.
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.hydrate(<App />, document.getElementById('root'));Bu işlem sonrasında tarayıcıda bileşenler için artık eventListener eklendi ve bileşenlerin state atanmış oldu.
Not: Hydration işlemi React, Solid.JS syntax olarak aynı gibi olsada framework işletilmesi açısından farklılıklar içeriyor olabilir.
Resumability
Qwik gibi frameworkler Hydration kısmının ekstra zaman kaybı olduğunu bu Hydration işleminin zaman kaybına neden olduğunu bunun yerine
Resumable kavramını kullandığından bahsediyor . Düğme oluşturulurken hangi chunk içerisinde hangi fonksiyon olduğu belirlenir.
<button on:click="./chunk.js#handler_symbol">click me</button>Ve kullanıcı bu düğmeye bastığında QwikLoader ilgili chunk lazy olarak download ederek işletir.
Bu sayede ilk baştan tüm sayfalar üzerinde
- HTML alınması
- Tüm JS download edilmesi
- JS Parse edilip, çalıştırılması
- Listener Bind edilmesi
işlemleri için ilk baştan zaman kaybı yaşanmamış olur.
Ekstra Notlar:
Burada Rendering ve Hydration işlemlerinin daha performanslı yapılabilmesi için farklı optimization, prioritization tarzı işlemler yapılabilir
- Progressive Rendering, Progressive Hydration
- Island Architecture yöntemi ile Mimari seviye iyileştirmeler yapılabilir
- React Transition ile React DOM da ki Rendering öncelikleri
- React Server Component ile bileşenlerin Render edildiği kısımlar
değiştirebilir hale gelecek şekilde esnek hale getirilmeye başlandı.
LearnReactUI.dev
React Ekosisteminde kendi kariyerinizi daha ileriye götürmek için LearnReactUI.dev sitesine üye olmayı unutmayın. Bu site piyasada çalışan(real-world) Web Uygulaması geliştirmek isteyen React geliştiricileri için oluşturulmuş bir web sitesidir.
Referanlar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
