React Server Components

Bursa Bilişim Topluluğu için yapmış olduğum workshop

Transcript

1. ESER OZVATAF React Server Components BURSA BİLİŞİM TOPLULUĞU WORKSHOP 27/07/2023
2. Bugün Konuşacaklarımız I. React Server Components TANIM DEĞİŞEN SSR VE HYDRATION İHTİYAÇ III. Next 13 NEXT NE KATIYOR? APP ROUTES VE MULTIPLE LAYOUTS <IMAGE /> VE LIGHTHOUSE METADATA API VE SEO II. Client/Server • • • • • İŞ PAYLAŞIMI FARKLILIKLAR CONTEXT CACHE "USE CLIENT" RİSKLER​ RİSKLERE ÖNLEMLER IV. Workshop
3. Eser Özvataf • Kariyerime profesyonel anlamda 2002'de başladım. • Okul ve çalışma hayatım paralel gitti. Yüksek lisans mezunuyum, tezim bir ethereum smart contract implementasyonu üzerine. • Startup, ajanslar ve kurumsallarda yöneticilik tecrübem oldu. • Kalan zamanımı çoğunlukla yazılım toplulukları için harcıyorum. Head of Engineering @ Teknasyon eser.live twitter.com/eser github.com/eser • YouTube üzerinde yayınlar yapıyorum.
4. React Server Components
5. Yalnızca SPA değil, bir Multiple Page Application'da da sunucu iletişimini optimize eden, veri erişim ve veriye transferinde çözümler sunan React'ın yeni uygulama mimarisi. Tanım REACT SERVER COMPONENTS Eskiden sunucu tabanlı bir Express vb. web framework üzerinde React bileşenlerini HTML çıktısına dönüştürüyor, daha sonra client'ın bağlantılarını "canlandırıyorduk". Şimdi ise… Değişen SSR ve Hydration Çeşitli problemler vardı. Bundle size'lar, SSR'ın zorluğu, Asenkron işlemlerin yönetilemezliği, vb. İhtiyaç
6. Getirileri async/await Acısız SSR <Suspense> + Loading Document Metadata Streaming Server Renderer Offscreen Rendering + Transitions REACT SERVER COMPONENTS
7. Client / Server
8. React Uygulaması CLIENT / SERVER Server Client DB API React CSR Client Bundle HTML
9. React Uygulaması w/ SSR CLIENT / SERVER Server Client DB API Client Bundle React CSR React SSR HTML Server Bundle HYDRATION
10. React Uygulaması w/ RSC CLIENT / SERVER Server Client DB API React CSR RSC HTML Server Bundle STREAMING CHANNEL
11. Örnek CLIENT / SERVER
12. Yeni Kurallar CLIENT / SERVER Isomorphism Context, useEffect, "use client" Context ve useEffect benzeri DOM ile ilişkili life-cycle hooklar sunucu taraflı çalışmıyor. Bu durumlarda "use client" kullanılması gerekiyor. Cache, Preload, ServerOnly Sunucu ve Client farklı runtime'lar ve JavaScript Engine'lara sahip olabilir. Bu da Web API'lar için de dahil ol​ mak üzere tutarsızlık oluşturabilir. Client taraflı memoization kavramı yerine sunucu taraflı cache kavramı hayatımıza giriyor. Bilhassa fetch requestlerini, db isteklerini deduplike etmek için cache kullanmak durumunda kalıyoruz. 1 2 3
13. Next 13
14. React aslında bir çözüm, React ekibi de "birleştirilebilir" (composable) kullanıcı arabirimleri nasıl en verimli yoldan oluşturabileceğimize kafa yoruyor. İşin mühendislik yükünü React ekibi üstlenirken, Next de bu çözümleri bizi rahat ettirecek şekilde derli toplu paketleyerek bir developer-experience sunuyor. Ne katıyor? NEXT 13
15. NEXT 13 Next 13 itibariyle File Based Router yapısı güncellenerek, "App Routes" ismi verdiğimiz bir yapıya geçiş yapıldı. Bu sayede nested routing, yüklenme, hata yönetimi vb. özelliklerini geliştirdiler. Yine bu sayede iç içe birden fazla layout'u kullanabiliyoruz. App Routes ve Multiple Layouts
16. Next aynı zamanda iyi bir paketleme deneyimi sunuyor. React projelerine koymuş olduğumuz assetlerin çoğunu uygun şekilde sıkıştırıp yüklenme deneyimini kendisi yönetiyor, bu da Lighthouse skorlarını etkiliyor. <Image /> ve Lighthouse NEXT 13 Yine Next 13 ile birlikte gelen Metadata API sayesinde her sayfa bileşeninin SEO metadataları çok daha rahat tanımlanabiliyor. Metadata API ve SEO
17. Örnek Uygulama NEXT 13 https://acikyazilimagi.com https://github.com/acikkaynak/aya-website Canlı Adres: Kaynak Kod:
18. Workshop Zamanı