Next.js 16 Optimistic UI'de Hızlı Tıklama Yarış Durumuna Yol Açıyor
Next.js 16'da useOptimistic ile checkbox demosu hızlı tıklamada yarış durumuna düşüyor. Cache invalidation ve error.tsx çözümleri.
Bir geliştirici, Next.js 16'da useOptimistic ile hazırladığı checkbox tabanlı görev listesinin demoda kusursuz çalıştığını, ancak aynı öğeye art arda beş kez hızlıca tıklanınca arka planda beş ayrı isteğin yarıştığını ve veritabanının son durumunun ekranla uyuşmadığını fark ediyor. Arayüz hatasız görünse de gerçek veri sessizce bozuluyor; bu, optimistic UI'nin en tehlikeli tarafı çünkü doğru görünmekle doğru olmak aynı şey değil. Çözüm, formlarda gönder butonunu devre dışı bırakma mantığının satır bazında uygulanması: hangi öğe için istek beklemede olduğu izleniyor ve o istek tamamlanana kadar ilgili checkbox kilitleniyor, böylece gereksiz ikinci istek hiç gönderilmiyor.
Yazı ayrıca useOptimistic'in kendi başına geri alma (rollback) mantığı gerektirmediğini gösteriyor; hook, geçici bir katman olarak çalıştığı için işlem başarısız olup gerçek durum değişmediğinde arayüz otomatik olarak eski haline dönüyor. Tek istisna, sunucunun henüz onaylamadığı, yalnızca istemci tarafında var olan yeni kayıtlar (örneğin geçici id'li bir yorum) için manuel temizleme gerekiyor. Ayrıca Next.js 16'nın üç önbellek geçersiz kılma yöntemi (revalidatePath, revalidateTag, updateTag) arasındaki farklar ve revalidateTag'in artık ikinci bir parametre gerektirdiği vurgulanıyor; anlık kullanıcı geri bildirimi için updateTag, uzak sayfalar için revalidateTag daha uygun. Son olarak, Next.js 16.2 ile gelen unstable_retry prop'unun, veri çekme kaynaklı hatalarda reset'ten farklı olarak sunucudan gerçek bir yeniden render tetiklediği anlatılıyor.