M

MLOG

Türkçe

React Server Actions, form gönderimlerini ve veri mutasyonlarını doğrudan sunucuda işlemek için güçlü bir özelliktir. React geliştirmeyi basitleştirir ve güvenliği artırır.

React Server Actions: Sunucu Taraflı Form İşleme Basitleştirildi

React 18'de tanıtılan ve Next.js'de önemli ölçüde geliştirilen React Server Actions, form gönderimlerini ve veri mutasyonlarını doğrudan sunucuda işlemek için devrim niteliğinde bir yaklaşım sunar. Bu güçlü özellik, geliştirme sürecini basitleştirir, güvenliği artırır ve geleneksel istemci tarafı veri alma ve işleme yöntemlerine kıyasla performansı iyileştirir.

React Server Actions Nedir?

Server Actions, sunucuda çalışan ve doğrudan React bileşenlerinden çağrılabilen zaman uyumsuz fonksiyonlardır. Şunlar gibi sunucu tarafı görevleri gerçekleştirmenize olanak tanır:

Server Actions'ın temel avantajı, istemci tarafı ayrı API rotalarına ve karmaşık veri alma mantığına olan ihtiyacı ortadan kaldırarak sunucu tarafı kodu React bileşenleriniz içinde yazmanıza olanak tanımasıdır. UI ve sunucu tarafı mantığının bu şekilde bir arada bulunması, daha sürdürülebilir ve verimli bir kod tabanıyla sonuçlanır.

React Server Actions Kullanmanın Faydaları

React Server Actions kullanmak, birkaç önemli fayda sağlar:

Basitleştirilmiş Geliştirme

Server Actions, form gönderimlerini ve veri mutasyonlarını doğrudan React bileşenlerinizde işlemenize izin vererek tekrarlayan kodları azaltır. Bu, ayrı API uç noktalarına ve karmaşık istemci tarafı veri alma mantığına olan ihtiyacı ortadan kaldırır, geliştirme sürecini kolaylaştırır ve kodunuzu anlamayı ve sürdürmeyi kolaylaştırır. Basit bir iletişim formunu düşünün. Server Actions olmadan, form gönderimini işlemek için ayrı bir API rotası, veriyi göndermek için istemci tarafı JavaScript ve hem istemci hem de sunucuda hata işleme mantığına ihtiyacınız olacaktır. Server Actions ile bunların tümü bileşen içinde halledilebilir.

Gelişmiş Güvenlik

Kodu sunucuda çalıştırarak, Server Actions uygulamanızın saldırı yüzeyini azaltır. Hassas veriler ve iş mantığı istemciden uzakta tutularak kötü niyetli kullanıcıların bunlara müdahale etmesi engellenir. Örneğin, veritabanı kimlik bilgileri veya API anahtarları asla istemci tarafı kodda maruz bırakılmaz. Tüm veritabanı etkileşimleri sunucuda gerçekleşir, SQL enjeksiyonu veya yetkisiz veri erişimi riskini azaltır.

Geliştirilmiş Performans

Server Actions, istemcide indirilmesi ve çalıştırılması gereken JavaScript miktarını azaltarak performansı artırabilir. Bu, özellikle düşük güçlü cihazlara veya yavaş internet bağlantılarına sahip kullanıcılar için faydalıdır. Veri işleme sunucuda gerçekleşir ve yalnızca gerekli UI güncellemeleri istemciye gönderilir, bu da daha hızlı sayfa yüklemeleri ve daha sorunsuz bir kullanıcı deneyimi sağlar.

İyimser Güncellemeler

Server Actions, iyimser güncellemeleri etkinleştirmek için React'in Suspense ve Transitions'ı ile sorunsuz bir şekilde entegre olur. İyimser güncellemeler, sunucu eylemi onaylamadan önce bile kullanıcı arayüzünü hemen güncellemenize olanak tanır. Bu, kullanıcıların eylemlerinin sonuçlarını görmeden önce sunucunun yanıt vermesini beklemesi gerekmediği için daha duyarlı ve ilgi çekici bir kullanıcı deneyimi sağlar. E-ticarette, sunucu arka planda eklemeyi onaylarken bir öğeyi alışveriş sepetine eklemek hemen görüntülenebilir.

Aşamalı Geliştirme

Server Actions, JavaScript devre dışı bırakılsa veya yüklenemese bile uygulamanızın çalışmaya devam edebileceği anlamına gelen aşamalı geliştirmeyi destekler. JavaScript devre dışı bırakıldığında, formlar geleneksel HTML formları olarak gönderilir ve sunucu gönderimi işler ve kullanıcıyı yeni bir sayfaya yönlendirir. Bu, uygulamanızın tarayıcı yapılandırması veya ağ koşulları ne olursa olsun tüm kullanıcılara erişilebilir kalmasını sağlar. Bu özellikle erişilebilirlik ve SEO için önemlidir.

React Server Actions Nasıl Kullanılır

React Server Actions'ı kullanmak için Next.js gibi bunları destekleyen bir çerçeve kullanmanız gerekir. İşte adım adım bir kılavuz:

1. Server Action Tanımlama

Sunucuda çalışacak zaman uyumsuz bir fonksiyon oluşturun. Bu fonksiyon, veritabanını güncelleme veya bir API çağırma gibi sunucuda yürütmek istediğiniz mantığı işlemelidir. Fonksiyonu, sunucu tarafı bir fonksiyon olduğunu belirtmek için en üstte 'use server' yönergesiyle işaretleyin. Bu yönerge, React derleyicisine fonksiyonu sunucu tarafı bir fonksiyon olarak değerlendirmesini ve istemci ile sunucu arasındaki verilerin serileştirilmesini ve serisizleştirilmesini otomatik olarak işlemesini söyler.

// app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Rota önbelleğini temizle
    return { message: 'Mesaj başarıyla kaydedildi!' };
  } catch (e) {
    return { message: 'Mesaj kaydedilemedi' };
  }
}

Açıklama:

2. Bileşeninizde Server Action'ı İçe Aktarma ve Kullanma

Server Action'ı React bileşeninize aktarın ve bir form öğesindeki `action` özelliğine kullanın. `useFormState` kancası, formun durumunu yönetmek ve kullanıcıya geri bildirim göstermek için kullanılabilir.

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

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      
      
      
      {state?.message && 
{state.message}
}
    

  );
}

Açıklama:

3. Form Verilerini İşleme

Server Action içinde, `FormData` API'sini kullanarak form verilerine erişebilirsiniz. Bu API, form alanlarının değerlerine erişmek için kullanışlı bir yol sağlar.

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}

4. Hataları İşleme

Server Action'ın yürütülmesi sırasında oluşabilecek hataları işlemek için `try...catch` bloklarını kullanın. Kullanıcıya görüntülemek için durum nesnesine bir hata mesajı döndürün.

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Mesaj kaydedilemedi' };
  }
}

5. Verileri Yeniden Doğrulama

Bir Server Action başarıyla veri değiştirdikten sonra, UI'nin en son değişiklikleri yansıtmasını sağlamak için veri önbelleğini yeniden doğrulamanız gerekebilir. Belirli yolları veya etiketleri yeniden doğrulamak için `next/cache`'den `revalidatePath` veya `revalidateTag` fonksiyonlarını kullanın.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Rota önbelleğini temizle
  // ...
}

Gelişmiş Kullanım

Veri Mutasyonu

Server Actions, veritabanlarını veya harici API'leri güncelleme gibi veri mutasyonları için özellikle uygundur. Verileri doğrulama, hesaplamalar yapma veya birden çok veri kaynağıyla etkileşim kurma gibi sunucu tarafı mantığı gerektiren karmaşık veri mutasyonlarını işlemek için Server Actions'ı kullanabilirsiniz. Bir kullanıcının profilini güncellemeniz ve bir onay e-postası göndermeniz gereken bir senaryoyu düşünün. Bir Server Action, veritabanı güncellemesini ve e-posta gönderme işlemini tek bir atomik işlemde işleyebilir.

Kimlik Doğrulama ve Yetkilendirme

Server Actions, kimlik doğrulama ve yetkilendirme işlemlerini yapmak için kullanılabilir. Kimlik doğrulama ve yetkilendirme denetimlerini sunucuda gerçekleştirerek, yalnızca yetkili kullanıcıların hassas verilere ve işlevlere erişebilmesini sağlayabilirsiniz. Kullanıcı girişlerini, kayıtları ve parola sıfırlamalarını işlemek için Server Actions'ı kullanabilirsiniz. Örneğin, bir Server Action, kullanıcı kimlik bilgilerini bir veritabanına karşı doğrulayabilir ve sonraki istekleri kimlik doğrulamak için kullanılabilecek bir belirteç döndürebilir.

Edge Fonksiyonları

Server Actions, kullanıcılarınıza yakın küresel bir sunucu ağı üzerinde çalışan Edge Fonksiyonları olarak dağıtılabilir. Bu, özellikle coğrafi olarak dağınık konumlardaki kullanıcılar için gecikmeyi önemli ölçüde azaltabilir ve performansı artırabilir. Edge Fonksiyonları, düşük gecikme gerektiren Server Actions'ı işlemek için idealdir, örneğin gerçek zamanlı veri güncellemeleri veya kişiselleştirilmiş içerik sunumu gibi. Next.js, Server Actions'ı Edge Fonksiyonları olarak dağıtmak için yerleşik destek sağlar.

Akış (Streaming)

Server Actions akışı destekler; bu da veriler hazır hale geldikçe istemciye parçalar halinde göndermenize olanak tanır. Bu, özellikle uzun süren Server Actions için uygulamanızın algılanan performansını artırabilir. Akış, büyük veri kümelerini veya karmaşık hesaplamaları işlemek için özellikle yararlıdır. Örneğin, veritabanından alınırken arama sonuçlarını istemciye aktarabilirsiniz, bu da daha duyarlı bir kullanıcı deneyimi sağlar.

En İyi Uygulamalar

React Server Actions'ı kullanırken izlenecek bazı en iyi uygulamalar şunlardır:

Gerçek Dünya Örnekleri

React Server Actions'ın farklı uygulama türlerinde nasıl kullanılabileceğine dair bazı gerçek dünya örneklerini inceleyelim:

E-ticaret Uygulaması

Sosyal Medya Uygulaması

İçerik Yönetim Sistemi (CMS)

Uluslararasılaştırma Konuları

Küresel bir kitleye yönelik uygulama geliştirirken, uluslararasılaştırmayı (i18n) ve yerelleştirmeyi (l10n) göz önünde bulundurmak önemlidir. Uluslararasılaştırılmış uygulamalarda React Server Actions kullanırken dikkate alınması gereken bazı noktalar şunlardır:

Örneğin, bir tarih girdisi gerektiren bir formu işlerken, bir Server Action, kullanıcının yerel ayarlarına göre tarihi ayrıştırmak için `Intl.DateTimeFormat` API'sini kullanabilir ve tarihin kullanıcının bölgesel ayarlarından bağımsız olarak doğru şekilde yorumlanmasını sağlayabilir.

Sonuç

React Server Actions, React uygulamalarında sunucu tarafı form işlemenin ve veri mutasyonlarının basitleştirilmesi için güçlü bir araçtır. Sunucu tarafı kodu doğrudan React bileşenleriniz içinde yazmanıza izin vererek, Server Actions tekrarlayan kodları azaltır, güvenliği artırır, performansı iyileştirir ve iyimser güncellemeleri etkinleştirir. Bu kılavuzda belirtilen en iyi uygulamaları izleyerek, daha sağlam, ölçeklenebilir ve sürdürülebilir React uygulamaları oluşturmak için Server Actions'dan yararlanabilirsiniz. React gelişmeye devam ettikçe, Server Actions şüphesiz web geliştirmenin geleceğinde giderek daha önemli bir rol oynayacaktır.

React Server Actions: Sunucu Taraflı Form İşleme Basitleştirildi | MLOG