Rendering Concepts
Hydration Optimizasyon Yöntemleri — (1. Island Architecture)
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.
Bundan önceki yazılarımızda React üzerinde farklı Framework lere neden ihtiyaç olduğu konusunda bir blog yazısı paylaşmıştım.
Client Side Rendering olayı çok uzun zaman önce çözüldüğünü varsayarsak. Bugün React Ekosistemi olsun diğer Framework ler Server Side Rendering konusuna odaklanmış durumdalar.
- Kişisel Blog
- İçerik Siteleri (Gazete, Film, Oyun, Dokümantasyon vb.)
- StoreFront (E-Ticaret Siteleri)
- Social Network
uygulamalarının çoğu Server Side ihtiyaç duyuyor ve burada Frontend dilleri için bir takım fırsatlar bulunuyor ;
- PHP, JSP, ASP, Python üzerine kurulmuş büyük bir pazar var ve yeni teknolojiler ile bu pazardan pay kapma şansı var.
- Wordpress, Joomla, Drupal gibi CMS yapıları JamStack ile birlikte hem daha uygun fiyatlı hemde React teknolojileri ile geliştirilebilir hale geldi.
- Vercel,Netlify, ve Shopify gibi Web Uygulaması geliştirmesine yönelik sunucu altyapısı sağlayan şirketler Next, Gatsby ve Remix satın aldılar ve geliştiriyorlar
- AWS, Microsoft, Google ve Diger Vercel, Netlify, Shopify Edge Computing ve Serverless bu dönüşümü destekliyor
- GitHub ve diğer ortamlar artık daha fazla Markdown veya MDX formatlarını destekler hale geldi.
Yukarda bahsettiğim bu fırsatlar React, Vue, Angular, Svelte, Solid gibi UI kütüphaneleri veya bunlar üzerine geliştirilmiş Next, Remix, Gatsby, Astro, Qwi gibi Framework’ lerin artık Server Side ve Hybrid çözümleri desteklemesini zorunlu hale getiriyor.
Bu desteklemeler nasıl olacak peki ? Framework’ler nasıl başarılı bir şekilde uygulamaların performanslı çalışmasını sağlayacak ?
Sunucu’dan olabildiğince az JS dosyasının Tarayıcı’ya gelmesi ve işletilmesi gerekiyor Zamanında bu konu hakkında 0 Kb JS Web Uygulamaları Geliştirilebilir mi ? blog yazısını paylaşmıştım.
Bugün bu konuya biraz daha derinlemesine analiz etmek istiyorum. Yani Server Side inen JS dosyalarının Hydration zaman alıyor ise bu kısımlarda nasıl optimizasyonlar yapabiliriz.
Island Architecture
Ada Mimarisi dediğimiz bu yöntem Etsy’nin Frontend mimari Katie Sylor-Miller tarafından 2019 yılında ortaya atıldı.
Bu yapıda sayfa farklı Rendering ve Etkileşim ihtiyaçları olan parçalardan meydana geliyor
- Header App
- Sidebar App
- Image Coursel App
- Content
- Advertisement
- Footer
Görüleceği gibi bunların bazıları
- App : JS ihtiyacı olan kullanıcı etkileşimi, animasyon olan parçalar iken
- Server Rendered HTML: Sunucuda oluşturulmuş, HTML elemanlarının sağladığı etkileşim dışında JS ihtiyacı olmayan parçalardır.
Şimdi bu yukarıdaki yapı Micro-Frontend ile benzerlik kurulabilir. Fakat Micro frontend Container — Layout birleştirme yöntemlerinde farklı farklı yöntemler vardır.
Container/Layout içerisinde Micro Frontends Birleştirme Yöntemleri
Burada ise konuştuğumuz HTML elemanları yani <div> veya <section> içerisinde bu ayrışımı yapılması, ve bu ayrışımlar üzerinden Framework ’lerin çalışabiliyor olmaları.
Şimdi bu yapının nasıl çalıştığına gelirsek Astro üzerinde bir örnek ile anlatalım.
Aşağıdaki örnekte Section bulunuyor (Intro, Intro ve Social)
---
// Component Imports
import { SocialButtons } from '../../components/SocialButtons.js';
---
<html lang="en">
<head>
<link rel="stylesheet" href="/blog.css" />
</head>
<body>
<div class="layout">
<article class="content">
<section class="intro">
<h1 class="title">Post title (static)</h1>
<br/>
<p>Post sub-title (static)</p>
</section>
<section class="intro">
<p>This is the post content with images that is rendered by the server.</p>
<Image src="https://source.unsplash.com/user/c_v_r/200x200" />
<p>The next section contains the interactive social buttons component which includes its script.</p>
</section>
<section class="social">
<div>
<SocialButtons client:visible></SocialButtons>
</div>
</section>
</article>
</div>
</body>
</html>https://www.patterns.dev/posts/islands-architecture
Burada SocialButtons düğmesi etkileşimde olması gereken bir bileşen client:visible tanımı ile SocialButtons ekranda gözükeceği zaman Hydrate ediliyor
<SocialButtons client:visible></SocialButtons>Yani hem görseli parçalara ayırdık, Bu parçaların içerisinde hangi bazı kısımlar Static HTML iken bazı kısımlarda
- React
- Vue
- Angular
- vb farklı bileşenleri kullanabiliyoruz.
---
// Example: Mixing multiple framework components on the same page.
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
<MySvelteComponent />
<MyReactComponent />
<MyVueComponent />
</div>Aynı zamanda bu bileşenlerin Hydration nasıl yapacağı konusunda Client Direktifleri verebiliyoruz. Bunlar sayesinde Hydration boş vakittemi, yoksa HTML sayfaya yüklendiğinde mi, bileşen ekranda gösterilence mi Hydration gerçekleşeceği siz karar verebiliyorsunuz.
- client:load
- client:idle
- client:visible
- client:media
- clieent:only
Örnek bir kullanım.
<BuyButton client:load />Astro, Marko gibi yapılar sayesinde Partial Hydration olayını gerçekleştirmiş oluyoruz. Bunu client direktiflerimiz ile yapıyoruz.
Astro → Next.JS göre olabildiğince küçük size olması ve sadece dinamiklik gerektiren kısımlar için JS belirtilen zamanda yükletmesi size büyük kolaylıklar sağlatıyor.
Astro statik sayfa gereksinimleri olup, küçük etkileşimleride içerecek sayfalar için ideal bir Framework
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.
