React 19 ve Next 15 Yenilikleri: React Compiler, Partial Prerendering, use(), useOptimistic()

BBT Connect ReactKonf 2024 için yapmış olduğum sunum

Transcript

1. React 19 ve Next 15 Yenilikleri React Compiler, Partial Prerendering, use(), useOptimistic() Eser Özvataf Head of Engineering @ Teknasyon BBT Connect: ReactKonf 20 / 07 / 2024 eser.live
2. Çalışmalarımı https://x.com/eser üzerinden takip edebilirsiniz. Eser Özvataf Head of Engineering @ Teknasyon eser.live GDG DevFest İzmir 02 / 12 / 2023
3. [[]]]] 01 Paradigma Değişimi 02 React 19 & Next 15 03 Kod Yazım Alışkanlıklarımız 04 Demo
4. Paradigma Değişimi - Dün React & Next.js
5. Paradigma Değişimi - Bugün React & Next.js UI Composition SPA Routing Page Rendering Optimizations Server-Side Rendering Handling Forms Partial Loading
6. ➔ Actions: Artık formlar da React’ın kapsamında ◆ <button formAction={action}>, <form action={action}> ◆ useTransition/startTransition, useActionState, useFormStatus ◆ Server Actions ➔ Server-Side Programming: Sunucuda çalışan kodlar ◆ Server Actions ◆ Server Components (React 18’de geldi ancak yeniden değinelim) ◆ Preloading APIs, Metadata, Stylesheets, vb. React 19 - Neler değişti? 1/2
7. ➔ Async Loading: <Suspense> artık çalışıyor ◆ use() API ➔ Artık olmayanlar ◆ React.lazy ◆ forwardRef -> ref prop ◆ <Context.Provider> -> <Context> ◆ useContext() -> use() React 19 - Neler değişti? 2/2
8. ➔ React Compiler ◆ useMemo, useCallback ve React.memo tarihe karışıyor ➔ Partial Prerendering ◆ ISR, CSR ve SSR’ın dezavantajları olmaksızın “Next.js için” yeni bir rendering yaklaşımı ◆ https://www.partialprerendering.com/ Next 15 - Neler değişecek?
9. Kod Yazım Alışkanlıklarımız
11. Actions ➔ Bileşen kodunun sunucu ve istemcide çalışacak kısımlarını birbirinden izole etmemiz gerekiyor. ◆ “use client” hem istemcide hem sunucuda çalışır. (browser + runtime) ◆ “use server” yalnızca sunucuda çalışır. (runtime) ➔ Soldaki örnekte temiz bir yaklaşımla, dinamik kısım ayrı tutulmuş… ancak pratikte formlar bu kadar küçük olmuyor.
12. Actions ➔ Sunucu taraflı importlar için çok daha iyi. ➔ Pratikte bizi React Server Components’ın ilk taslağına götürüyor.
13. useActionState API aslında bir wrapper Non-blocking UI
14. use() useEffect()’in yerini alıyor
15. RSC’de state ve proplar istemciye taşınıyor
16. Metadata artık bileşenler içinde yer alabiliyor
17. Stylesheet dosyaları da aynı şekilde bileşenler içinde yer alabiliyor
18. Browser’ı yükleme deneyimine hazırlamak için Preload API’larını kullanabiliyoruz
19. ➔ Kapsam genişledi Formlar ve SEO/Metadata da artık React’ın kontrol ettiği alanda ➔ React browser’ı merkezine alan bir Full Stack Web Framework olarak geliştirilmeye devam ediyor ➔ Eski mekanik/imperatif yaklaşımlar (useState/useEffect) yerine yeni yaklaşımlar geldi: use(), useActionState(), useOptimistic() Değerlendirme - Ne anlama geliyor?
20. Demo • https://next-showcase-one.vercel.app/ • https://github.com/eser/next-showcase
21. Teşekkürler Sorularınızı https://eser.live üzerinden iletebilirsiniz. Eser Özvataf Head of Engineering @ Teknasyon eser.live