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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Çalışmalarımı https://x.com/eser üzerinden takip edebilirsiniz. Eser Özvataf Head of Engineering @ Teknasyon eser.live GDG DevFest İzmir 02 / 12 / 2023

Slide 3

Slide 3 text

[[]]]] 01 Paradigma Değişimi 02 React 19 & Next 15 03 Kod Yazım Alışkanlıklarımız 04 Demo

Slide 4

Slide 4 text

Paradigma Değişimi - Dün React & Next.js

Slide 5

Slide 5 text

Paradigma Değişimi - Bugün React & Next.js UI Composition SPA Routing Page Rendering Optimizations Server-Side Rendering Handling Forms Partial Loading

Slide 6

Slide 6 text

➔ Actions: Artık formlar da React’ın kapsamında ◆ , ◆ 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

Slide 7

Slide 7 text

➔ Async Loading: artık çalışıyor ◆ use() API ➔ Artık olmayanlar ◆ React.lazy ◆ forwardRef -> ref prop ◆ -> ◆ useContext() -> use() React 19 - Neler değişti? 2/2

Slide 8

Slide 8 text

➔ 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?

Slide 9

Slide 9 text

Kod Yazım Alışkanlıklarımız

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

Actions ➔ Sunucu taraﬂı importlar için çok daha iyi. ➔ Pratikte bizi React Server Components’ın ilk taslağına götürüyor.

Slide 13

Slide 13 text

useActionState API aslında bir wrapper Non-blocking UI

Slide 14

Slide 14 text

use() useEffect()’in yerini alıyor

Slide 15

Slide 15 text

RSC’de state ve proplar istemciye taşınıyor

Slide 16

Slide 16 text

Metadata artık bileşenler içinde yer alabiliyor

Slide 17

Slide 17 text

Stylesheet dosyaları da aynı şekilde bileşenler içinde yer alabiliyor

Slide 18

Slide 18 text

Browser’ı yükleme deneyimine hazırlamak için Preload API’larını kullanabiliyoruz

Slide 19

Slide 19 text

➔ 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?

Slide 20

Slide 20 text

Demo ● https://next-showcase-one.vercel.app/ ● https://github.com/eser/next-showcase

Slide 21

Slide 21 text

Teşekkürler Sorularınızı https://eser.live üzerinden iletebilirsiniz. Eser Özvataf Head of Engineering @ Teknasyon eser.live