React Server Components Nedir ?
React core team 2020'nin son ayında Server Components’i duyurdu. İlerleyen süreçte hayatımıza girecek olan bu yeni yaklaşım; daha iyi kullanıcı deneyimi, ucuz maintenance ve performans vaat ediyor.
Bu blog yazısında, React Server Components’in özelliklerinden ve front end geliştirme dünyasına katabileceklerinden bahsedeceğiz.
React Server Components Nedir?
Server components, uygulama performansını iyileştirmek için sadece server’da çalışan react component’leri yazmamızı sağlayan bir yoldur. Şimdilik deneysel ve geliştirme aşamasında olan özellik, şu anda yalnızca Node.js server ortamında kullanılabiliyor.
Öne çıkan özelliklerine bakalım.
Sıfır Paket Boyutuna Sahip Component’ler
Uygulama geliştirirken sürekli olarak bazı faydalı paketleri kullanıyoruz. Paket kullanımı bundle boyutunu arttırıp performansa olumsuz etki edebileceğinden dolayı, bu da beraberinde hangi paketin kullanılmasının uygulama performansına en az etki edeceği sorusunu getiriyor. İlk yüklemedeki performans önemlidir çünkü herkes iyi bir cihaz gücü ve hızlı bir internet erişimine sahip değildir.
Bundan dolayı kullanacak olduğumuz paketlerin boyut ve performanslarını sürekli olarak dikkate almamız gerekiyor.
Server components; component’i server üzerinde sadece bir defa çalıştırır. Çıktısı olan statik içeriği oluşturarak browser’a aktarır ve bunu yaparken component içerisindeki javascriptleri browser’a aktarmaz. Bu da geliştiricilere server üzerinde istedikleri paketi, bundle boyutuna etki etmeden özgürce kullanabilme imkanı sağlar.
Aşağıdaki örnekte html’i sterilize edebilmek için sanitilize-html adında bir paket kullanılıyor. Bu uygulamanın bundle boyutunu arttırır ve browser üzerinde çalışması maliyetlidir.
Yukarıdaki kodu server component’e çevirdiğimizde; tamamen aynı kodu kullanarak 206KB kodu client a göndermeyerek tasarruf etmiş, performans kazanmış oluruz.
Server components; maliyetli paketlerin, bundle boyutunda yaratacağı etkiden tasarruf etmemize olanak sağlıyor. Bir uygulama üzerinde yapılan testte, uygulama bundle boyutunun 29% azaldığı görünmüş. Tabii ki bu oran uygulama durumuna bağlı olarak farklılık gösterebilir.
Burada farkında olmamız gereken nokta; server components içerisindeki javascript kodunu browser’a göndermediği için user interaction sağlayamaz, fakat dahil ettiği client component ile user interaction sağlanabilir.
Server Kaynaklarına Erişim
Geliştirdiğimiz react uygulamaları; eğer server side rendering yapmıyorsak, browser ortamında çalışır ve server kaynaklarından faydalanamaz. Server components; sadece server üzerinde çalıştığı için file system, database erişimi vs. tüm server nimetlerinden faydalanmamızı sağlar. Demo ile birlikte de file system ve postgresql database erişimlerini kolaylaştırmak için react-fs ve react-pg adında paketler yayınlandı.
Aşağıdaki örnekte server component, database’den postları çekip render ediyor.
Buradaki önemli nokta; javascript in çalışma süresidir. Herhangi javascript kodunu, herhangi bir cihaz, iyi diye tabir edebileceğimiz sürelerde çalıştırabilirken yeterli güce sahip olmayan diğer bir cihazda çalıştırma süresi epey uzun olabiliyor. Uygulama metriklerini incelediğimizde özellikle android mobile kullanıcılarının javascript çalıştırma sürelerinin diğerlerine göre daha uzun sürdüğünü görüyoruz. Server components; sunucu kaynaklarından faydalanırken, sunucu gücünden de faydalanmamıza olanak sağlıyor.
Client-Server Waterfall’unun Engellenmesi
İç içe geçmiş component’lerin her biri http request yaptıktan sonra rendering yaptığı senaryoyu hayal edelim. Parent component içerisindeki request tamamlanıp render yapılana kadar, child component herhangi bir veriyi yüklemeye başlayamaz. Bu durumda birbirinden sonra yüklenen bir user interface ortaya çıkar. Buna waterfall denir.
Server components; birbiri ardına client’dan server’a yapılan request’leri, server tarafına taşımamıza olanak sağlıyor. Server’dan verilere ulaşmak client’dan verilere ulaşmaktan çok daha hızlı olacağından, waterfall gecikmesini azaltarak performansta iyileşme sağlıyor.
Sunucu bileşenleri waterfall için iyileşme sağlar fakat kesin çozüm http request’lerinin en önce yapılmasıdır. React ekibinden bunun için api sağlaması bekleniyor.
Nasıl Kullanılır?
Server components ile javascript dosyalarımız suffix ler ile 3 e ayrıldı.
- component.server.js : Server(sunucu) component’leri belirtir.
- component.client.js : Client(istemci) component’leri belirtir.
- component.js : Shared(paylaşımlı) component’leri belirtir.
Suffix’ler mantıklı fakat; farklı isimlendirmeler yapmak, server component’leri client component’e çevirmek vs. farklı ihtiyaçlar olabilir. Suffix’lerin değiştirilebileceği bir api’nin var olması, geçiş aşaması için faydalı olabilir.
Component’lerin yetenek ve kısıtlamaları
Server components yeni özellikler ile birlikte bazı doğal kısıtlamalar getirir, ancak bu kuralları ezberlemek gerekmiyor. Çünkü component’lerin kullanım durumları basittir ve muhtemelen linter tarafından destek sağlanacaktır.
Server components
- ❌ Server’a gelen her request için sadece bir defa çalıştıkları için state bulundurmazlar, useState ve useReducer gibi işlevleri kullanamazlar.
- ❌ İçerisindeki javascript’ler bundle’a dahil olmadığı için, onClick gibi eventler ile user interaction sağlayamazlar.
- ❌ Server üzerinde çalıştıkları için DOM gibi tarayıcı api’lerini kullanamazlar.
- ✅ File system, database gibi server kaynaklarına erişebilirler.
- ✅ Diğer server ve client component’leri içerebilirler.
Client Component
- ✅ State bulundurabilir useState ve useReducer gibi işlevleri kullanabilirler.
- ✅ İçerisindeki javascript’ler bundle a dahil olduğu için user interaction sağlayabilirler.
- ✅ Client üzerinde çalıştıkları için DOM gibi tarayıcı api’lerini kullanabilirler.
- ❌ File system, database gibi server kaynaklarına erişemezler.
- ❌ Server component’leri içe aktaramazlar. Child olarak verilen server components bulundurabilirler.
Shared Components
Shared components, onları kimin kullandığına bağlı olarak server veya client üzerinde çalışabilir. Eğer bir server component tarafından kullanılıyorlarsa server kaynaklarına erişebilirler, eğer bir client component tarafından kullanılıyorlarsa browser’ın tüm özelliklerini kullanabilirler. Bu durumda server components öncesinde kullanıyor olduğumuz component’ler, versiyon arttırdığımız da server components değişikliğinden etkilenmiyor olacak.
Özet olarak: Server component’ler server’da bir defa çalışırlar, state bulunduramazlar, server kaynaklarını kullanabilirler, server ve client component’lerini içe aktarabilirler. Client component’ler browser üzerinde çalışırlar, state bulundurabilirler, server kaynaklarından faydalanamazken tüm browser özelliklerini kullanabilirler ve sadece client component’leri içe aktarabilirler.
Bunun SSR’dan Farkı Nedir?
Server side rendering’de, sayfadaki tüm component’ler server tarafında render edilip browser’a statik html olarak aktarılırlar. Böylelikle ilk görüntü hızlı oluşur ve search engine botları tarafında sayfa okunup index’lenebilir hale gelir. Ardından çalışan javascript dosyası ile oluşturduğumuz statik html hydrate edilir ve sayfa interactive hale gelir. Yani server side rendering’de hedef; sayfanın ilk oluşturulmasındaki bazı ihtiyaçlara yöneliktir. Bu konuyla alakalı daha önce yaptığımız konuşmaya da göz atabilirsiniz.
Server componens’da olay daha dinamiktir. Uygulamanın yürütülmesi esnasında, yani kullanıcı oluşturulmuş olan bi sayfa üzerinde etkileşim halinde iken uygulamamızın farklı farklı alanlarını farklı zamanlarda server üzerinde çalıştırarak render edebiliriz. Yapılan render’ın çıktısı da json’a benzer bir formattadır.
Component çıktısı browser’a iletildikten sonra browser üzerinde hali hazırda çalışır durumda olan uygulamanın dom ağacı ile birleşir. Bunu yaparken browser üzerindeki uygulamanın durumunu ve odağını korur, devam eden animasyonlar bile sıfırlanmadan çalışmasını sürdürebilir.
SSR ve server components birbirlerinden farklılar ve birbirinin yerini alabilecek şeyler değiller. Bir arada kullanımları ise mümkün.
Hangi Amaçlar İçin Kullanılabilir ?
Api gerektirmeyen front end uygulamaları
Front end uygulamaları data sağlayan api ihtiyaçı duyarlar. Bu da api sağlamak için backend eforu gerektirir. Server components; server kaynaklarına erişebildiği için, data katmanı sadece server’da bulunan ve api ihtiyaçı duymadan database ile konuşabilen uçtan uca front end uygulamaları oluşturmaya olanak sağlayabilir.
Browser’a inmesi istenmeyen logic’ler 😈
İçerisinde önemli logic barındıran durumlar genel olarak backend tarafında çözüme kavuşturulur. Çünkü front end tarafında yazdığımız javascript kodları bundle haline gelip browser’a indirilecektir. Server components; server’da çalışıp sadece statik çıktıyı browser’a aktarır ve bunu yaparken içerisindeki javascript kodlarını browser’a aktarmaz. Böylelikle server componen’ler, içerisinde browser’a inmeyen önemli logicler bulundurabilirler.
SSR uygulamalarında server-client geçiş maliyetini azaltılmak
Eğer isomorphic bir uygulamayı, next.js gibi bir framework kullanmadan organize ediyorsanız, hem server hem de client side bakım yapmanız gerekebilir. Server ve client bakım maliyeti yüksek olan alanları server components’e geçirip client bakımından tasarruf edilebilir.
SSR uygulamalarındaki initial state’den kurtulmak
Isomorphic uygulamalar server tarafında çektiği data’ları browser üzerinde kullanmaya devam edebilmek için, sayfa kaynağına initial state olarak basar. Bunu sayfa kaynağına basmak, hem response boyutunu arttırır hem de initial state için stringify yapmak maliyetlidir. Isomorphic uygulamaların data katmanlarını server components ile organize ederek initial state maliyetinden tasarruf edilebilir.
Maliyetli component’leri tahmin edilebilir sürelerde çalıştırmak
Server components, server kaynaklarından yararlanırken server gücünden de faydalanmamızı sağlar. Hangi cihaz üzerinde ne kadar sürede çalışacağı konusunda endişe ettiğimiz component’leri, server gücünü arkamıza alarak hem tahmin edilebilir hem de browser’a göre daha iyi sürelerde çalıştırabilmemize olanak sağlayabilir.
Server componens gerçek hayata kulanılmaya başlandıktan sonra muhtemelen çok daha farklı kullanım alanları olup front end dünyasına yeni bir soluk katacaktır. Şimdilik aklıma gelenler bu kadar.
Sonuç Olarak
React’ın kararlı gelişimi, server components’lerin kullanıcı deneyimi ve performans konusundaki sağlayacağı artılar heyecan verici.
Front end dünyasının sorumlulukları artmaya devam ederken; önümüzdeki süreçte front end geliştiricilerinden daha farklı yetkinlikler bekleniyor olup roadmap’e yeni maddeler eklenebilir.
Geri bildirim 📬
Tavsiye, eleştiri ve geri bildirimleriniz için iletişime geçebilirsiniz.
