« Tüm yayınlar

React Server Component sınırından gerçekte ne geçer

React 19 Flight serileştiricisinin hangi prop tiplerini client bileşenlere taşıdığını, hangilerinde build'in patladığını ve iki gizli tuzağı anlatan teknik inceleme.

Yazı, "use client" sınırının aslında bir tip sistemi değil, React 19'un Flight serileştiricisi tarafından yönetilen bir dizi çalışma zamanı kuralı olduğunu ortaya koyuyor. Date, Set, Map, Promise, typed array'ler, Blob/File, FormData, ReadableStream, global semboller ile client/server referansları sınırı geçebiliyor; hatta Error nesneleri bile geçiyor ama production'da içi boş bir işaretçiye dönüşüyor. Buna karşılık RegExp, URL, WeakMap, class instance'ları ve null-prototype objeler reddediliyor — kontrol prototip üzerinden yapıldığı için yalnızca veri tutan sıradan bir class bile "Classes or null prototypes are not supported" hatasıyla patlayabiliyor.

Metin iki yaygın tuzağı gösteriyor. İlki, options={{ onSelect: fn }} gibi masum görünen bir "config objesi"nin aslında içine gömülü bir fonksiyon taşıması: serileştirici objeyi çözümleyip arrow fonksiyona ulaştığında prerender aşamasında patlıyor ve hata mesajı JSX attribute adını değil obje anahtarını gösteriyor. İkincisi, statik analiz aracı rsc-gate'in kendi geçmişindeki iki yanlış pozitif — paket alias'larını çözmeden "server-only" sızıntısı olarak işaretlemesi ve global sembolleri (Symbol.for) hatalı biçimde reddetmesi. Her iki durum da sağlıklı kodu kırmızı CI ile cezalandırmanın, bir build hatasını kaçırmaktan daha tehlikeli olduğunu vurguluyor.

Mühendisler için önemi net: sınırın davranışı kod incelemesinde görünmüyor, yalnızca serileştiricinin çalışma zamanı davranışında ortaya çıkıyor. Bu yüzden build veya .next/ çıktısına ihtiyaç duymadan, TypeScript compiler API üzerinden prop akışını statik olarak denetleyen araçlar (rsc-gate gibi) önem kazanıyor.