React Sunucu Eylemi Yanıt Akışı: Gelişmiş Kullanıcı Deneyimi için Aşamalı Form Yanıtı

React Sunucu Eylemleri (Server Actions), React uygulamalarımızdaki sunucu tarafı işlemleri ele alma biçimimizde güçlü bir paradigma değişikliği sunar. En heyecan verici özelliklerden biri, yanıtları aşamalı olarak akışla gönderme yeteneğidir, bu da tüm işlem tamamlanmadan önce bile kullanıcılara anında geri bildirim sağlamamıza olanak tanır. Bu, özellikle formlar için faydalıdır; burada veri kullanılabilir hale geldikçe kullanıcı arayüzünü güncelleyerek daha duyarlı ve etkileşimli bir kullanıcı deneyimi yaratabiliriz.

React Sunucu Eylemlerini Anlamak

Sunucu Eylemleri, React bileşenlerinden başlatılan ve sunucuda çalışan asenkron fonksiyonlardır. Geleneksel API çağrılarına göre çeşitli avantajlar sunarlar:

• Geliştirilmiş Güvenlik: Sunucu Eylemleri doğrudan sunucuda çalışır, bu da hassas verilerin veya mantığın istemciye ifşa olma riskini azaltır.
• Azaltılmış Standart Kod: Ayrı API rotalarına ve istemcide veri çekme mantığına olan ihtiyacı ortadan kaldırırlar.
• Gelişmiş Performans: Daha hızlı başlangıç yükleme süreleri ve gelişmiş performans için sunucu taraflı oluşturma (SSR) ve önbelleğe almadan yararlanabilirler.
• Tür Güvenliği: TypeScript ile Sunucu Eylemleri, istemci ve sunucu arasında veri tutarlılığını sağlayan uçtan uca tür güvenliği sunar.

Yanıt Akışının Gücü

Geleneksel form gönderimleri genellikle tüm verileri sunucuya göndermeyi, bir yanıt beklemeyi ve ardından arayüzü buna göre güncellemeyi içerir. Bu, özellikle karmaşık formlar veya yavaş ağ bağlantıları için algılanan bir gecikmeye yol açabilir. Yanıt akışı, sunucunun verileri istemciye parçalar halinde göndermesine olanak tanır, bu da veri kullanılabilir hale geldikçe arayüzü aşamalı olarak güncellememizi sağlar.

Kullanıcı girdisine dayalı olarak karmaşık bir fiyat hesaplayan bir form düşünün. Tüm hesaplamanın tamamlanmasını beklemek yerine, sunucu ara sonuçları istemciye akışla göndererek kullanıcıya gerçek zamanlı geri bildirim sağlayabilir. Bu, kullanıcı deneyimini önemli ölçüde iyileştirebilir ve uygulamanın daha duyarlı hissettirmesini sağlayabilir.

Sunucu Eylemleri ile Aşamalı Form Yanıtı Uygulamak

React Sunucu Eylemleri ile aşamalı form yanıtının nasıl uygulanacağına dair bir örnek üzerinden gidelim.

Örnek: Gerçek Zamanlı Para Birimi Dönüştürücü

Kullanıcı tutarı yazarken gerçek zamanlı döviz kuru güncellemeleri sağlayan basit bir para birimi dönüştürücü formu oluşturacağız.

1. Sunucu Eylemini Ayarlama

İlk olarak, para birimi dönüştürme işlemini yapan Sunucu Eylemini tanımlıyoruz.

// server/actions.ts
'use server';

import { unstable_cache } from 'next/cache';

async function getExchangeRate(fromCurrency: string, toCurrency: string): Promise<number> {
  // Harici bir API'den döviz kurunu getirmeyi simüle et
  console.log(`${fromCurrency} para biriminden ${toCurrency} para birimine döviz kuru getiriliyor`);
  await new Promise(resolve => setTimeout(resolve, 500)); // Ağ gecikmesini simüle et
  if (fromCurrency === 'USD' && toCurrency === 'EUR') return 0.92;
  if (fromCurrency === 'EUR' && toCurrency === 'USD') return 1.09;
  if (fromCurrency === 'USD' && toCurrency === 'JPY') return 145;
  if (fromCurrency === 'JPY' && toCurrency === 'USD') return 0.0069;
  throw new Error(`${fromCurrency} para biriminden ${toCurrency} para birimine döviz kuru bulunamadı`);
}

export const convertCurrency = async (prevState: any, formData: FormData) => {
  const fromCurrency = formData.get('fromCurrency') as string;
  const toCurrency = formData.get('toCurrency') as string;
  const amount = Number(formData.get('amount'));

  try {
    if (!fromCurrency || !toCurrency || isNaN(amount)) {
      return { message: 'Lütfen geçerli bir giriş yapın.' };
    }

    // Yanıtı akış olarak göndermeyi simüle et
    await new Promise(resolve => setTimeout(resolve, 250));
    const exchangeRate = await unstable_cache(
      async () => getExchangeRate(fromCurrency, toCurrency),
      [`exchange-rate-${fromCurrency}-${toCurrency}`],
      { tags: [`exchange-rate-${fromCurrency}-${toCurrency}`] }
    )();

    await new Promise(resolve => setTimeout(resolve, 250));
    const convertedAmount = amount * exchangeRate;

    return { message: `Dönüştürülen tutar: ${convertedAmount.toFixed(2)} ${toCurrency}` };
  } catch (e: any) {
    console.error(e);
    return { message: 'Para birimi dönüştürülemedi.' };
  }
};

Bu örnekte, convertCurrency Sunucu Eylemi döviz kurunu getirir (bir gecikmeyle simüle edilmiştir) ve dönüştürülen tutarı hesaplar. Ağ gecikmesini simüle etmek ve akış etkisini göstermek için setTimeout kullanarak yapay gecikmeler ekledik.

2. React Bileşenini Uygulama

Ardından, Sunucu Eylemini kullanan React bileşenini oluşturuyoruz.

// app/page.tsx
'use client';

import { useState, useTransition } from 'react';
import { convertCurrency } from './server/actions';
import { useFormState } from 'react-dom';

export default function CurrencyConverter() {
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [amount, setAmount] = useState('');
  const [isPending, startTransition] = useTransition();
  const [state, formAction] = useFormState(convertCurrency, { message: '' });

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    startTransition(() => {
      formAction(new FormData(event.target as HTMLFormElement));
    });
  };

  return (
    <div>
      <h2>Gerçek Zamanlı Para Birimi Dönüştürücü</h2>
      <form onSubmit={handleSubmit}>
        <label htmlFor="fromCurrency">Gönderen:</label>
        <select id="fromCurrency" name="fromCurrency" value={fromCurrency} onChange={(e) => setFromCurrency(e.target.value)}>
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
          <option value="JPY">JPY</option>
        </select>

        <label htmlFor="toCurrency">Alıcı:</label>
        <select id="toCurrency" name="toCurrency" value={toCurrency} onChange={(e) => setToCurrency(e.target.value)}>
          <option value="EUR">EUR</option>
          <option value="USD">USD</option>
          <option value="JPY">JPY</option>
        </select>

        <label htmlFor="amount">Tutar:</label>
        <input
          type="number"
          id="amount"
          name="amount"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />

        <button type="submit" disabled={isPending}>
          {isPending ? 'Dönüştürülüyor...' : 'Dönüştür'}
        </button>
      </form>
      <p>{state.message}</p>
    </div>
  );
}

Önemli noktalar:

• Form durumunu yönetmek ve Sunucu Eylemini çağırmak için useFormState kancasını kullanıyoruz.
• useTransition'dan gelen isPending durumu, gönderme düğmesini devre dışı bırakır ve eylem çalışırken "Dönüştürülüyor..." mesajını göstererek kullanıcıya geri bildirim verir.
• useFormState tarafından döndürülen formAction fonksiyonu, form gönderimini otomatik olarak yönetir ve durumu Sunucu Eyleminden gelen yanıtla günceller.

3. Aşamalı Güncellemeleri Anlamak

Kullanıcı formu gönderdiğinde, handleSubmit fonksiyonu çağrılır. Formdan bir FormData nesnesi oluşturur ve bunu formAction fonksiyonuna geçirir. Sunucu Eylemi daha sonra sunucuda çalışır. Sunucu Eyleminde eklenen yapay gecikmeler nedeniyle aşağıdakileri gözlemleyeceksiniz:

1. Gönderme düğmesi neredeyse anında "Dönüştürülüyor..." olarak değişir.
2. Kısa bir gecikmeden (250ms) sonra, kod döviz kurunu almayı simüle eder.
3. Dönüştürülen tutar hesaplanır ve sonuç istemciye geri gönderilir.
4. React bileşenindeki state.message güncellenir ve dönüştürülen tutar görüntülenir.

Bu, yanıt akışının veri kullanılabilir hale geldikçe kullanıcıya ara güncellemeler sunmamızı nasıl sağladığını ve daha duyarlı ve ilgi çekici bir kullanıcı deneyimine yol açtığını gösterir.

Aşamalı Form Yanıtının Faydaları

• Gelişmiş Kullanıcı Deneyimi: Kullanıcılara anında geri bildirim sağlayarak uygulamanın daha duyarlı ve daha az yavaş hissettirmesini sağlar.
• Azaltılmış Algılanan Gecikme: Ara sonuçları göstererek, genel işlem aynı süreyi alsa bile kullanıcılar süreci daha hızlı algılar.
• Artırılmış Etkileşim: Gerçek zamanlı güncellemeler sunarak ve algılanan gecikmeler nedeniyle formu terk etmelerini önleyerek kullanıcıları meşgul eder.
• Artan Dönüşüm Oranları: Daha akıcı ve duyarlı bir kullanıcı deneyimi, özellikle karmaşık formlar için daha yüksek dönüşüm oranlarına yol açabilir.

İleri Düzey Teknikler

1. Anında Arayüz Güncellemeleri için `useOptimistic` Kullanımı

useOptimistic kancası, Sunucu Eylemi tamamlanmadan önce arayüzü iyimser bir şekilde güncellemenize olanak tanır. Arayüz beklenen sonucu hemen yansıttığı için bu, daha da hızlı bir algılanan yanıt süresi sağlayabilir.

import { useOptimistic } from 'react';

function MyComponent() {
  const [optimisticState, addOptimistic] = useOptimistic(
    initialState,
    (state, newUpdate) => {
      // Güncellemeye göre yeni durumu döndür
      return { ...state, ...newUpdate };
    }
  );

  const handleClick = async () => {
    addOptimistic({ someValue: 'iyimser güncelleme' });
    await myServerAction();
  };

  return (
    <div>
      <p>{optimisticState.someValue}</p>
      <button onClick={handleClick}>Güncelle</button>
    </div>
  );
}

Para birimi dönüştürücü örneğinde, sunucudaki gerçek hesaplama tamamlanmadan önce kullanıcıya anında bir önizleme sağlamak için dönüştürülen tutarı mevcut döviz kuruna göre iyimser bir şekilde güncelleyebilirsiniz. Sunucu bir hata döndürürse, iyimser güncellemeyi geri alabilirsiniz.

2. Hata Yönetimi ve Geri Dönüş Mekanizmalarını Uygulama

Sunucu Eyleminin başarısız olduğu veya ağ bağlantısının kesildiği durumları ele almak için sağlam hata yönetimi ve geri dönüş mekanizmaları uygulamak çok önemlidir. Hataları yakalamak ve istemciye uygun bir hata mesajı döndürmek için Sunucu Eylemi içinde try...catch bloğunu kullanabilirsiniz.

// server/actions.ts

export const convertCurrency = async (prevState: any, formData: FormData) => {
  // ...
  try {
    // ...
  } catch (error: any) {
    console.error(error);
    return { message: 'Para birimi dönüştürülürken bir hata oluştu. Lütfen daha sonra tekrar deneyin.' };
  }
};

İstemci tarafında, kullanıcıya hata mesajını görüntüleyebilir ve işlemi yeniden denemek veya destekle iletişime geçmek için seçenekler sunabilirsiniz.

3. Performans için Döviz Kurlarını Önbelleğe Alma

Harici bir API'den döviz kurlarını getirmek bir performans darboğazı olabilir. Performansı artırmak için, Redis veya Memcached gibi bir önbelleğe alma mekanizması kullanarak döviz kurlarını önbelleğe alabilirsiniz. Next.js'in unstable_cache'i (örnekte kullanıldığı gibi) yerleşik bir önbelleğe alma çözümü sunar. Döviz kurlarının güncel olmasını sağlamak için önbelleği periyodik olarak geçersiz kılmayı unutmayın.

4. Uluslararasılaştırma Hususları

Küresel bir kitle için uygulamalar oluştururken, uluslararasılaştırmayı (i18n) dikkate almak önemlidir. Bu şunları içerir:

• Sayı Biçimlendirme: Farklı yerel ayarlar için uygun sayı biçimlerini kullanın (örneğin, ondalık ayırıcı olarak virgül veya nokta kullanmak).
• Para Birimi Biçimlendirme: Para birimi simgelerini ve biçimlerini kullanıcının yerel ayarına göre görüntüleyin.
• Tarih ve Saat Biçimlendirme: Farklı yerel ayarlar için uygun tarih ve saat biçimlerini kullanın.
• Yerelleştirme: Kullanıcı arayüzünü farklı dillere çevirin.

Intl ve react-intl gibi kütüphaneler, React uygulamalarınızda i18n uygulamanıza yardımcı olabilir.

Gerçek Dünya Örnekleri ve Kullanım Alanları

• E-ticaret: Kullanıcı sepetine ürün ekledikçe gerçek zamanlı kargo ücretlerini ve teslimat tahminlerini gösterme.
• Finansal Uygulamalar: Gerçek zamanlı hisse senedi fiyatları ve portföy güncellemeleri sağlama.
• Seyahat Rezervasyonu: Gerçek zamanlı uçuş fiyatlarını ve uygunluğunu gösterme.
• Veri Görselleştirme: Grafiklere ve diyagramlara veri güncellemelerini akışla gönderme.
• İşbirliği Araçları: Belgelere ve projelere gerçek zamanlı güncellemeleri gösterme.

Sonuç

React Sunucu Eylemi yanıt akışı, React uygulamalarınızın kullanıcı deneyimini geliştirmek için güçlü bir yol sunar. Aşamalı form yanıtları sunarak, kullanıcıları meşgul eden ve dönüşüm oranlarını artıran daha hızlı, daha duyarlı ve daha ilgi çekici formlar oluşturabilirsiniz. Yanıt akışını iyimser güncellemeler ve önbelleğe alma gibi tekniklerle birleştirerek gerçekten olağanüstü kullanıcı deneyimleri oluşturabilirsiniz.

React Sunucu Eylemleri gelişmeye devam ettikçe, karmaşık ve dinamik web uygulamalarının geliştirilmesini daha da basitleştiren daha güçlü özelliklerin ve yeteneklerin ortaya çıkmasını bekleyebiliriz.

Daha Fazla Kaynak

• Next.js Sunucu Eylemleri Dokümantasyonu
• Resmi React Dokümantasyonu
• Streams API

Bu kılavuz, React Sunucu Eylemi yanıt akışına ve bunun aşamalı form yanıtlarına uygulanmasına kapsamlı bir genel bakış sunmaktadır. Burada tartışılan kavramları ve teknikleri anlayarak, bu güçlü özelliği daha hızlı, daha duyarlı ve daha ilgi çekici web uygulamaları oluşturmak için kullanabilirsiniz.