Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

RSC with Next 13

RSC with Next 13

Teknasyon Meetup etkinliği için yapmış olduğum sunum

Eser Ozvataf

July 11, 2023
Tweet

More Decks by Eser Ozvataf

Other Decks in Technology

Transcript

  1. 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. 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
  2. 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.
  3. 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ç
  4. Getirileri async/await Acısız SSR <Suspense> + Loading Document Metadata Streaming

    Server Renderer Offscreen Rendering + Transitions REACT SERVER COMPONENTS
  5. React Uygulaması w/ SSR CLIENT / SERVER Server Client DB

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

    API React CSR RSC HTML Server Bundle STREAMING CHANNEL
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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