React Server Components and Next.Js 13

ESER ÖZVATAF React Server Components devnot DEVELOPER SUMMIT 07/10/2023 &

Bugün Konuşacaklarımız I. React Server Components III. Next 13 II.
Evrimleşen Mimari IV. Sıkça Sorulan Sorular React Server Components & V. Soru/Cevap

Eser Özvataf • • • • • • 1996 yılından
bu yana yazılım geliştiriyor, sektörü takip ediyorum. Alaylı ve Okulluyum. Kariyerimde profesyonel anlamda 20. yılı geride bıraktım. Büyük mühendislik organizasyonlarında yöneticilik görevlerinde bulundum. Birçok açık kaynak ve JavaScript topluluğunda liderlik tecrübem oldu. Boş zamanlarımda açık kaynak projelere katkıda bulunuyorum. YouTube üzerinde yazılımla ilgili yayınlar yapıyorum. Head of Engineering @ Teknasyon eser.live x.com/eser github.com/eser

React Server Components

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. REACT SERVER COMPONENTS Çeşitli problemler vardı. Bundle size'lar, SSR yapmak ve hydration'un zorluğu, Waterfall effect, Asenkron işlemlerin yönetilemezliği, Veri saklamak, Client'ın render işleminin uzun sürmesi vb. Neden İhtiyaç Oldu? Tanım

REACT SERVER COMPONENTS Fark CSR RSC

Evrimleşen Mimari

EVRİMLEŞEN MİMARİ Web Web Site Site Web Site <html> <html>
 --> <list> <list> <item <item /> /> <item <item /> /> </list> </list> <script <script /> /> </html> </html> <html>  <list> <item /> <item /> </list> <script /> </html> 2 2 items items 2 items Outputs Outputs HTML HTML Outputs HTML Web Web Developer Developer Web Developer a a Web Web Client Client a Web Client Basic Basic Animations, Animations, Events Events Basic Animations, Events Statik İçerik

2 2 items items 2 items Outputs Outputs HTML HTML
Outputs HTML Outputs Outputs JSON/XML JSON/XML Outputs JSON/XML a a Mobile Mobile Client Client a Mobile Client [ [ { { ...item1 ...item1 }, }, { { ...item2 ...item2 } } ] ] [ { ...item1 }, { ...item2 } ] Web Web Site Site Web Site <html> <html>  --> <list> <list> <item <item /> /> <item <item /> /> </list> </list> <script <script /> /> </html> </html> <html>  <list> <item /> <item /> </list> <script /> </html> Web Web Developer Developer Web Developer a a Web Web Client Client a Web Client Basic Basic Animations, Animations, Events Events Basic Animations, Events Mobile Mobile Developer Developer Mobile Developer EVRİMLEŞEN MİMARİ Statik İçerik + API Servisleri

Web Web Site Site Web Site 2 2 items items
2 items [ [ { { ...item1 ...item1 }, }, { { ...item2 ...item2 } } ] ] [ { ...item1 }, { ...item2 } ] Outputs Outputs HTML HTML & & JSON/XML JSON/XML Outputs HTML & JSON/XML a a Web Web Client Client a Web Client a a Mobile Mobile Client Client a Mobile Client <html> <html>  --> <list <list id="list-target"> id="list-target"> <item <item /> /> <item <item /> /> </list> </list> <script <script /> /> </html> </html> <html>  <list id="list-target"> <item /> <item /> </list> <script /> </html> DOM DOM Events, Events, State State Management, Management, Animations Animations DOM Events, State Management, Animations [ [ { { ...item1 ...item1 }, }, { { ...item2 ...item2 } } ] ] [ { ...item1 }, { ...item2 } ] Backend Backend Developer Developer Backend Developer Frontend Frontend Developer Developer Frontend Developer Mobile Mobile Developer Developer Mobile Developer EVRİMLEŞEN MİMARİ API'lar ile Beslenen İçerik (AJAX) + Asenkron JavaScript istekleri sayesinde sayfalarda hızlanma sağlandı - Arama motorları Asenkron JavaScript ile iyi geçinemiyordu

EVRİMLEŞEN MİMARİ Web Web Site Site Web Site 2 2
items items 2 items [ [ { { ...item1 ...item1 }, }, { { ...item2 ...item2 } } ] ] [ { ...item1 }, { ...item2 } ] Outputs Outputs JSON/XML JSON/XML Outputs JSON/XML a a Web Web Client Client a Web Client a a Mobile Mobile Client Client a Mobile Client <html> <html> <div <div id="dom-target" id="dom-target" /> /> <script <script /> /> </html> </html> <html> <div id="dom-target" /> <script /> </html> Router, Router, Data Data Fetching, Fetching, DOM DOM Events, Events, State State Management Management Router, Data Fetching, DOM Events, State Management [ [ { { ...item1 ...item1 }, }, { { ...item2 ...item2 } } ] ] [ { ...item1 }, { ...item2 } ] Backend Backend Developer Developer Backend Developer Frontend Frontend Developer Developer Frontend Developer Mobile Mobile Developer Developer Mobile Developer Platform Platform Developer Developer Platform Developer Frontend & Cloud Development + Router'ın client'a alınması ile sunucudan gelen tekrar eden veriler azaltıldı, caching verimi arttırıldı + Client'da sayfa geçişleri kullanıcı deneyimi açısından hızlandırıldı ve iyileştirildi - Client'a aktarılan dosya boyutlarında artış oldu

EVRİMLEŞEN MİMARİ Server Side Rendering + Sunucunun da sayfaların ilk
halini oluşturması nedeniyle SEO dezavantajları azaltıldı + Artan internet bant hızlarıyla, sayfaların ilk hallerinin iletilmesi kullanıcının yükleme deneyimini iyileştirdi Web Web Site Site Web Site 2 2 items items 2 items Outputs Outputs JSON/XML JSON/XML Outputs JSON/XML a a Web Web Client Client a Web Client Other Other Clients... Clients... Other Clients... <html> <html>  --> <div <div id="dom-target"> id="dom-target"> <list> <list> <item <item /> /> <item <item /> /> </list> </list> </div> </div> <script <script /> /> </html> </html> <html>  <div id="dom-target"> <list> <item /> <item /> </list> </div> <script /> </html> Router, Router, Data Data Fetching, Fetching, DOM DOM Events, Events, State State Management, Management, Hydration Hydration Router, Data Fetching, DOM Events, State Management, Hydration [ [ { { ...item1 ...item1 }, }, { { ...item2 ...item2 } } ] ] [ { ...item1 }, { ...item2 } ] Backend Backend Developer Developer Backend Developer Frontend Frontend Developer Developer Frontend Developer Mobile Mobile Developer Developer Mobile Developer Platform Platform Developer Developer Platform Developer

Web Web Site Site Web Site 2 2 items items
2 items Outputs Outputs JSON/XML JSON/XML Outputs JSON/XML a a Web Web Client Client a Web Client Other Other Clients... Clients... Other Clients... <html> <html>  --> <div> <div> <list> <list> <item <item id="dom-target-1" id="dom-target-1" /> /> <item <item /> /> </list> </list> </div> </div> <script <script /> /> </html> </html> <html>  <div> <list> <item id="dom-target-1" /> <item /> </list> </div> <script /> </html> Router, Router, Data Data Fetching, Fetching, DOM DOM Events, Events, State State Management, Management, Hydration, Hydration, Partial Partial Hydration Hydration Router, Data Fetching, DOM Events, State Management, Hydration, Partial Hydration Backend Backend Developer Developer Backend Developer Frontend Frontend Developer Developer Frontend Developer Mobile Mobile Developer Developer Mobile Developer Platform Platform Developer Developer Platform Developer EVRİMLEŞEN MİMARİ Islands Architecture + React'ın sunucu tarafına geçmesiyle yalnızca o an yüklenmesi gereken veri streaming olarak client'a hızlıca aktarılıyor

React Uygulaması Server Client DB API React CSR Client Bundle
HTML EVRİMLEŞEN MİMARİ

React Uygulaması w/ SSR Server Client DB API Client Bundle
React CSR React SSR HTML Server Bundle HYDRATION EVRİMLEŞEN MİMARİ

React Uygulaması w/ RSC Server Client DB API React CSR
RSC HTML Server Bundle STREAMING CHANNEL EVRİMLEŞEN MİMARİ

Örnek EVRİMLEŞEN MİMARİ

EVRİMLEŞEN MİMARİ

Yeni Kurallar 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 EVRİMLEŞEN MİMARİ

Next 13

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

Getirileri App Router: Nested Routes & Layouts React Server Components
Simplified Data Fetching (async/await for Components) Built-in SEO Support w/ Metadata API Streaming & <Suspense> + Loading Offscreen Rendering + Transitions NEXT 13

NEXT 13 Next 13 itibariyle File Based Router yapısı güncellenerek,
"App Router" 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. Nested Routes & Layouts

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. Built-in SEO Support w/ Metadata API

Örnek Uygulama NEXT 13 https://github.com/eser Kaynak Kod:

Sıkça Sorulan Sorular…

Express'le SSR'a Halen Gerek Var Mı? SIKÇA SORULAN SORULAR Full-Stack
Uygulamalar İçin Uygun Mu? BFF'in Yerini Mi Alacak? ASP/PHP Günlerine Geri Mi Döndük?

Teşekkürler eser.live x.com/eser github.com/eser

React Server Components and Next.Js 13

React Server Components and Next.Js 13

Eser Ozvataf

More Decks by Eser Ozvataf

Other Decks in Technology

Featured

Transcript

ESER ÖZVATAF React Server Components devnot DEVELOPER SUMMIT 07/10/2023 &

Bugün Konuşacaklarımız I. React Server Components III. Next 13 II.

Eser Özvataf • • • • • • 1996 yılından