Slide 1

Slide 1 text

ESER OZVATAF React Server Components with Next 13 MEETUP 11/07/2023

Slide 2

Slide 2 text

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 VE LIGHTHOUSE METADATA API VE SEO II. Client/Server • • • • • İŞ PAYLAŞIMI FARKLILIKLAR CONTEXT CACHE "USE CLIENT" RİSKLER​ RİSKLERE ÖNLEMLER IV. Sıkça Sorulan Sorular EXPRESS'E HALEN GEREK VAR MI? FULL-STACK UYGULAMALAR İÇİN UYGUN MU?​ BFF'İN YERİNİ Mİ ALACAK? V. Teşekkürler

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

React Server Components

Slide 5

Slide 5 text

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ç

Slide 6

Slide 6 text

Getirileri async/await Acısız SSR + Loading Document Metadata Streaming Server Renderer Offscreen Rendering + Transitions REACT SERVER COMPONENTS

Slide 7

Slide 7 text

Client / Server

Slide 8

Slide 8 text

React Uygulaması CLIENT / SERVER Server Client DB API React CSR Client Bundle HTML

Slide 9

Slide 9 text

React Uygulaması w/ SSR CLIENT / SERVER Server Client DB API Client Bundle React CSR React SSR HTML Server Bundle HYDRATION

Slide 10

Slide 10 text

React Uygulaması w/ RSC CLIENT / SERVER Server Client DB API React CSR RSC HTML Server Bundle STREAMING CHANNEL

Slide 11

Slide 11 text

Örnek CLIENT / SERVER

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Next 13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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. 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

Slide 17

Slide 17 text

Sıkça Sorulan Sorular…

Slide 18

Slide 18 text

Express'e Halen Gerek Var Mı? SIKÇA SORULAN SORULAR Full-Stack Uygulamalar İçin Uygun Mu? BFF'in Yerini Mi Alacak?

Slide 19

Slide 19 text

Örnek Uygulama SIKÇA SORULAN SORULAR https://acikyazilimagi.com https://github.com/acikkaynak/aya-website Canlı Adres: Kaynak Kod:

Slide 20

Slide 20 text

Teşekkürler TWITTER.COM/ESER BATUHAN BİLGİN - FATİH ALTINOK - ORHAN ÖZKERÇİN GÖKAY GÜRCAN - BATIN (BATINDOTSH) - KUDRET YILMAZ ARİF (MARIFC25) - AYHAN SİPAHİ - EMRE AKDAŞ ERSİN DENİZ - GÖKDENİZ (GOKVEYADENIZ) - CAN KANBUR MEHMET EREN ÇELİK