RENDERING CONCEPTS
Hydration Optimizasyon Yöntemleri — (2. React 18 Suspense, Streaming, Partial Hydration)
Son dönemde ServerSide Rendering sonrası Hydration maliyetini düşürmek için Farklı Framework’ ler farkı yöntemleri benimseyip kullanıyorlar. Bu yöntemler nelerdir bunları analiz edeceğim.
Bir önceki blog yazımızda bahsettiğimiz gibi React benzeri kütüphanelerin Server Side Rendering odaklanmaları ile birlikte Hydration sorunları ortaya çıkmış
- Qwik bunu Resumability ile çözmeye çalışıyor
- Astro, Marko, Fresh bunu Island Architecture ile çözmeye çalışıyor.
React ise daha genelde kullanılan UI Framework olduğu için API’sinin içerisine daha kapsamlı çözümler getirmesi gerekiyordu.
React 18 ile birlikte React Framework’ ünde bu yönde bir takım yeni yetenekler geldi.
- Concurrency
- Suspense
- Streaming
- Partial Hydration
- RSC
- Transition
1. React 18 Gelen Yetenekler ve Partial Hydration
Shaundai Person aşağıdaki video’da konuyu detaylıca anlatmış.
Shaundai aşağıdaki şekilde bir örnek üzerinden ilerliyor. Bir sayfamız olsun ve farklı bileşenlerden oluşuyor olsun.
2. Problemler
1. Problem (Tüm Veriye İhtiyaç Duymak)
Bu bileşenlerden Comments bileşeni yüksek API çağrımı ve ekranda oluşturulması zaman alan yüklü bir bileşen olduğunu varsayalım.
- Tüm Veriyi Çek — Fetch Everything (before you can)
- Birşeyler Göster — Show Anything.
Senaryo 1 (Tüm HTML ve Verileri Çek Sonra Göster)
Öncelikle ekranda ki bütün verilerin çağrılması gerçekleştirilir sonra tüm ekran Hydrate ettirilerek her şey gösterilir.
Dezavantaj: Bu durumda Comments verisi gelinceye kadar tüm ekran boş gösterilecek veya Placeholder gösterilecek ve bir anda tüm ekran gösterilecek. İyi bir kullanıcı deneyimi oluşturmuyor.
Senaryo 2 (Comment Bileşenini Çıkart ve Diğerlerini Göster)
Bu senaryo’ da Comment dışarı çıkardığımızda Web sayfası olarak tam sayfa işlevi kazanmıyor, bir süre sonrasında Comments kısmına ihtiyacımız olacak ve bir şekilde onun için işlemlerin başlatılması gerekecek.
2. Problem (Hydration için Tüm DOM ve JS yüklenmesine İhtiyaç Duyulur)
Server Rendering yönteminde öncelikle tüm
Bu yöntemde tüm HTML ve JS bundle inmiş olması gerekiyor React daha sonrasında Hydration işlemi için Component Tree üzerinden ilerleyerek state ve event listener bind işleminini gerçekleştirir.
Bu işlemi yaparken Comments verisinin gelmemiş olması bunların DOM elemanlarının çizilmemiş olması Hydration işleminini engelleyen bir durumdur.
Tüm bu beklemeler sonrasında Interactive bir uygulamaya erişiriz.
Code Splitting yöntemi ile Comments kısmı uygulamadan çıkarabiliriz ama geçen bahsettiğimiz konu uygulama kodu birbirleri ile iletişim vb.. açısından daha kullanılmaz ve anlamsız hale gelir.
3. Problem (Öncelikle Tüm Herseyi Hydrate Etmeniz Gerekiyor ki , Sonrasında Ekran ile Etkileşim Kurun)
React uygulamasının oluşturduğu ekrandaki bir parça ile etkileşime geçebilmek için tüm bileşenlerin Hydrate edilmiş olması gerekmektedir. Aşağıdaki resimde görüleceği gibi
Soldaki ekrand Profile kısmına tıklandığında Profile kısmı EventListener bağlanmadığı için herhangi bir etkileşim olmaz tüm uygulama Hydrate edildikten sonra bu işlemi gerçekleştirebilirsiniz.
3. React 18 ile Bu Problemleri Nasıl Çözeceğiz
Öncelikle Hydration işlemini parçalı bir şekilde gerçekleştirebiliyor olmamız gerekir.
- NavBar
- Post
- Comments
bileşenlerinin Hydration işlemlerini ayrıştırabilmek için React Suspense faydalanabiliriz. React 18 ile birlikte Suspense bizlere
- Streaming HTML ve
- Selective Hydration yeteneği sunmaktadır.
<Suspense fallback={<Spinner/>}
<AnyComponent/>
</Suspense>Bu durumda kodumuzda ağır işlevi olan bileşenler için aşağıdaki şekilde Comments bileşinini Suspense içerisine alıyor olmamız . Bu bileşenin geç işleme alınacağını belirtir.
Bu bizim Routing işlemlersinde Lazy olarak sayfalarda veya Nested Sayfalarda kullandığımız özelliği React bileşen seviyesinde Hydrate içinde çalışabilir hale getirmiş durumda.
Bu Loading işlemi tamamlandığında uygulama artık bir bütün olarak tarayıcıya inmiş durumda Streaming ile Server Render parçaları gecikmeli olarak sayfayı eklenebilir.
Bu durumda 1nci Problem ortadan kalkmış oluyor. Tüm veriyi çekmeden, hiç bir şey gösteremez sin ?
2nci olarak Hydration işlemi gecikmeli olarak Comments için yapılabilir hale geldi. Bu durumda uygulamanın diğer bileşenleri Hydrate edildiği için sayfanın bir kısmı ile etkileşimde mevcut.
Bu durumda Hydrate etmek için bekletme gerekmediği için artık 2nci problem olarak gördüğümüz tüm JS ve HTML load edilmesini bekle sonra hydration başlar sorunuda ortadan kalkmış oldu.
Bu durumda Tarayıcının Bloklanma durumuda ortadan kalkmış oldu, yani bazı bileşenler Hydrate edildiği için artık bunlar ile etkileşim kurulabiliyor.
- Bu durumda kullanıcı Hydration işleminin tamamlanmasını bekleyebilir .
- Hydration tamamlanmadan Profile düğmesine tıklayabilir.
Sayfanızda Bir’den Fazla Yoğun API işlevli Bileşen Var İse ?
Örneğin sadece sayfanızda <Comments/> değilde aynı zamanda <Sidebar/>’ da API ile etkileşimi olan bir bileşen olsun, bu durumda birincil olarak Sidebar ile Hydration işlemine başlayacak..
Sonrasında da sırası ile Lazy hale getirdiği bileşenleri Hydrate etmeye başlayacak. Peki bu durumda kullanıcı gitti ve Comments ile etkileşim oluşturmaya çalıştı.
React’ ın Priority (Öncelik) olarak kullanıcı etkileşiminde ki bileşene odaklanması gerekiyor. Bu durumda React Hydrate sırasını önceliklendiriyor ve <Comments/> bileşenine odaklanıyor. 3ncü problem olan her bileşenin Hydrate olması sonra etkileşim problemi ‘da ortadan kalkıyor çünkü React önceliklendirmesi etkileşime göre algılama olayı gerçekleşiyor.
Artık React 18 ile birlikte, Suspense ile birlikte tüm bileşenler üzerinde çalışan yapıların Async olarak çalışabilmesini sağlayacak bir altyapıya sahip.
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.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
