Optimistic vs. Pessimistic UI: Next.js Server Actions Rehberi

Hızın Psikolojisi: Optimistic vs. Pessimistic UI

Modern web geliştirme dünyasında, akıcı ve duyarlı bir kullanıcı deneyimi (UX) oluşturmak hayati önem taşır. Hiç kimse bir eylemden sonra sayfanın yeniden yüklenmesini veya uzun süre geri bildirim beklemeyi sevmez. Hız artık sadece sunucunuzun ne kadar hızlı yanıt verdiğiyle değil, kullanıcının uygulamayı ne kadar hızlı hissettiğiyle ilgilidir. İşte bu noktada Optimistic (İyimser) ve Pessimistic (Kötümser) UI kavramları devreye girer.

Gerçek Hayattan Bir Analoji: Anlık Mesaj vs. Banka Havalesi

Aradaki farkı anlamak için her gün karşılaştığımız iki senaryoya bakalım:

Optimistic UI (WhatsApp Yöntemi): WhatsApp'tan bir mesaj gönderdiğinizi hayal edin. 'Gönder' butonuna bastığınız anda mesaj balonu sohbette hemen belirir ve yanında tek bir gri tık oluşur. Kendi metninizi görmek için sunucunun mesajı aldığını onaylamasını beklemezsiniz. İşlemin başarılı olacağını varsayarsınız. Eğer internet kesilirse, ancak o zaman küçük bir 'hata' ikonu çıkar ve durum geri alınır.

Pessimistic UI (Banka Yöntemi): Geleneksel bir banka havalesini hayal edin. 'Para Gönder'e basarsınız, bir yükleme ikonu çıkar ve tüm ekran kilitlenir. Bakiyenizde bir değişiklik görmeden önce bankanın sunucusundan işlemin geçerli olduğuna, paranın var olduğuna ve alıcının doğru olduğuna dair onay gelmesini beklersiniz. Burada doğruluk, hız hissinden daha önemlidir.

Pessimistic UI Nedir?

Pessimistic UI, 'Önce Güvenlik' yaklaşımıdır. Katı bir sıralamayı takip eder: Eylem → Yükleme Durumu → Sunucu Onayı → Arayüz Güncelleme. Arayüz, ekranda herhangi bir değişiklik yapmadan önce sunucudan gelen 'Yeşil Işığı' bekler. Bir saniye bile olsa yanlış bilginin gösterilmemesi gereken hassas veriler için bu yöntem vazgeçilmezdir.

Next.js Pessimistic Uygulama Örneği:

Bu örnekte, standart React state kullanarak bir yükleme spinner'ı yönetiyoruz ve görünümü güncellemeden önce Server Action'ın tamamlanmasını bekliyoruz.

'use client';

import { useState } from 'react';
import { updateUsername } from './actions';

export default function ProfileForm({ currentName }: { currentName: string }) {
  const [name, setName] = useState(currentName);
  const [isPending, setIsPending] = useState(false);

  async function handleSubmit(formData: FormData) {
    const newName = formData.get('name') as string;
    
    // 1. Yükleme durumunu başlat (Pessimistic)
    setIsPending(true);

    try {
      // 2. Sunucu yanıtını bekle
      const result = await updateUsername(newName);
      
      // 3. Sadece sunucu başarılıysa UI'ı güncelle
      setName(result.newName);
      alert('Profil başarıyla güncellendi!');
    } catch (error) {
      alert('Güncelleme başarısız oldu.');
    } finally {
      // 4. Yükleme durumunu kapat
      setIsPending(false);
    }
  }

  return (
    <form action={handleSubmit} className="space-y-4">
      <input 
        name="name" 
        defaultValue={name} 
        className="border p-2 rounded" 
      />
      <button 
        type="submit" 
        disabled={isPending}
        className="bg-blue-500 text-white p-2 rounded disabled:bg-gray-400"
      >
        {isPending ? 'Sunucuya Kaydediliyor...' : 'Değişiklikleri Kaydet'}
      </button>
      <p>Güncel Görünen Ad: {name}</p>
    </form>
  );
}

Optimistic UI Nedir?

Optimistic UI, başarılı bir sunucu yanıtı beklentisiyle arayüzün anında güncellendiği bir tasarım desenidir. Kullanıcıya yükleme ikonu göstermek yerine, ön uç başarıyı varsayar ve sonucu hemen yansıtır. Eğer bir şeyler ters giderse, UI önceki durumuna geri döner. Bu, 'algılanan gecikmeyi' (perceived latency) neredeyse sıfıra indirir.

Next.js'de useOptimistic Hook'u

Next.js ve React, bu deseni uygulamayı kolaylaştırmak için useOptimistic hook'unu geliştirdi. Bu hook, arka planda bir işlem (Server Action gibi) devam ederken gösterilecek 'geçici bir durumu' tanımlamanıza olanak tanır.

Next.js Optimistic Uygulama Örneği:

'use client';

import { useOptimistic } from 'react';
import { addCommentAction } from './actions';

type Comment = { id: number; text: string; sending?: boolean };

export default function CommentSection({ initialComments }: { initialComments: Comment[] }) {
  // 1. İyimser state'i ve güncelleme mantığını tanımlayın
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    initialComments,
    (state, newCommentText: string) => [
      ...state,
      { id: Date.now(), text: newCommentText, sending: true } // Geçici durum
    ]
  );

  async function handleAction(formData: FormData) {
    const text = formData.get('comment') as string;
    
    // 2. UI'ı anında güncelleyin
    addOptimisticComment(text);

    // 3. Gerçek sunucu işlemini başlatın
    try {
      await addCommentAction(text);
      // Sunucu işlemi bittiğinde gerçek veri bu state'in yerini alacaktır
    } catch (e) {
      console.error("Hata nedeniyle geri alınıyor");
    }
  }

  return (
    <div className="max-w-md mx-auto">
      <form action={handleAction} className="flex gap-2 mb-4">
        <input name="comment" placeholder="Yorum yaz..." className="flex-1 border p-2" />
        <button type="submit" className="bg-green-500 text-white p-2">Gönder</button>
      </form>
      
      <ul className="space-y-2">
        {optimisticComments.map((comment) => (
          <li 
            key={comment.id} 
            className={`p-2 rounded ${comment.sending ? 'bg-gray-100 opacity-60' : 'bg-white shadow'}`}
          >
            {comment.text} {comment.sending && <span className="text-xs">(Gönderiliyor...)</span>}
          </li>
        ))}
      </ul>
    </div>
  );
}

Kıyaslama: Hangisini Kullanmalısınız?

• Şu Durumlarda Optimistic UI Kullanın: Etkileşimi yüksek, riski düşük işlemler. Örnekler: Bir gönderiyi beğenmek, yorum eklemek, emoji tepkisi vermek veya yapılacaklar listesinde bir maddeyi işaretlemek.

• Şu Durumlarda Pessimistic UI Kullanın: Kritik ve geri dönüşü zor işlemler. Örnekler: Hesap silme, ödeme yapma, güvenlik ayarlarını değiştirme veya hatalı bir gösterimin kullanıcıyı ciddi şekilde yanıltabileceği durumlar.

Avantajlar ve Dezavantajlar

Avantajlar: Artan kullanıcı memnuniyeti, sıfır algılanan gecikme ve çok daha akıcı bir uygulama deneyimi. Kullanıcılar uygulamanın kendilerine anında yanıt verdiğini hissederler.

Dezavantajlar: State yönetimi daha karmaşık hale gelir. Hata durumlarında veriyi eski haline getirme (rollback) mekanizmalarını doğru kurmalı ve 'geçici' durum ile 'final' durum arasındaki geçişin (flickering) pürüzsüz olduğundan emin olmalısınız.

Sonuç

Next.js Server Actions ile birleşen Optimistic UI, yüksek düzeyde duyarlı web uygulamaları oluşturmamıza olanak tanır. Başarıyı varsayarak ve anında geri bildirim sağlayarak, algılanan performansı devasa düzeyde artırabiliriz. useOptimistic gibi araçlar, kullanıcı deneyiminden ödün vermeden ön uç ve arka uç arasındaki mantığı basitleştirmemize yardımcı olur.