Form Eylemleri: Değişiklikler için API Rotalarının Yerine Geçme

Geleneksel Next.js uygulamalarında form gönderimleri, onSubmit işleyicisi bulunan ve verileri bir API rotasına POST etmek için fetch() çağıran bir istemci bileşeni gerektirir. Bu yaklaşım çalışır; ancak hem istemci tarafındaki veri alma mantığını hem de sunucu tarafındaki rota işleyicisini ayrı ayrı yazmayı ve sürdürmeyi gerektirir.

Sunucu Eylemleriyle veri alma çağrısını ve API rotasını tek bir işlevle değiştirirsiniz. Form öğesi, Sunucu Eylemini action özelliği olarak alır: <form action={serverAction}>. React, gönderimi yakalar ve eylemi form verileriyle otomatik olarak çağırır.

Bir form tarafından tetiklendiğinde Sunucu Eylemi, bağımsız değişken olarak otomatik şekilde bir FormData nesnesi alır. Tek tek alanlara, değeri bir metin olarak döndüren formData.get('email') ile erişirsiniz. Çoklu seçim alanları için getAll() dahil olmak üzere tüm standart FormData yöntemleri kullanılabilir.

Bir Sunucu Eylemi, istemcinin kullanabileceği serileştirilebilir bir değer döndürebilir. { error: 'Email already exists' } gibi bir hata nesnesi veya { success: true } gibi bir başarı göstergesi döndürmek, istemcinin tam sayfa yenilemesi olmadan arayüzü buna göre güncellemesini sağlar.

Form eylemi bir Sunucu Eylemi olduğundan, formu barındıran sayfa bileşeninin İstemci Bileşeni olması gerekmez. Sunucu formu statik HTML olarak oluşturur ve yalnızca hata görüntüleme gibi etkileşimli bölümler istemci tarafı JavaScript gerektirir. Bu, istemci paketini önemli ölçüde küçültür.

action={serverAction} içeren bir form, JavaScript etkin olmasa da çalışır. Tarayıcı standart bir HTML form POST işlemi gerçekleştirir, sunucu eylemi yürütür ve güncellenmiş sayfayı döndürür. Bu gerçek aşamalı geliştirme sayesinde form, tüm ortamlarda işlevlerini zarif bir şekilde azaltır.

Bir Sunucu Eylemi verileri değiştirdikten sonra önbelleğe alınmış sayfa verileri yenilenmelidir. Eylem içinde revalidatePath('/dashboard') çağrısı yapmak, Next.js önbelleğini bu yol için geçersiz kılar ve bir sonraki isteğin güncel verileri almasını sağlar. Bu, veri değişikliklerinden sonra sunucu tarafından oluşturulan sayfaları güncel tutmanın standart yoludur.

revalidateTag('user-data'), revalidatePath işlevine göre daha ayrıntılı önbellek geçersiz kılma olanağı sunar. Veri getirme çağrılarını next: { tags: ['user-data'] } ile etiketler ve ardından bu verileri hangi yolların görüntülediğinden bağımsız olarak, etiketlenen tüm verileri Sunucu Eylemi içinden tek seferde geçersiz kılabilirsiniz.

Sunucu Eylemleri, başarılı bir veri değişikliğinden sonra next/navigation modülünden redirect('/success') çağrısı yaparak kullanıcıyı yeni bir sayfaya yönlendirebilir. Bu yönlendirme sunucu tarafında gerçekleştirilir; dolayısıyla tarayıcı istemci tarafı yönlendirmesi yerine uygun bir gezinme yanıtı alır.

Sunucu Eylemleri yalnızca form gönderimleriyle sınırlı değildir. Düğme tıklamaları ve diğer form dışı tetikleyiciler için eylem çağrısını startTransition(() => action(arg)) içine sarın. Bu, gezinmeyi bir geçiş olarak işaretler ve eylem sunucuda yürütülürken React'in mevcut arayüzü görünür tutmasını sağlar.

Sunucu Eylemleri, sunucu tarafı doğrulama için doğru yerdir. FormData alanlarını doğrulayın, doğrulama başarısız olursa hataları döndürün ve yalnızca tüm alanlar geçerliyse veri değişikliğine devam edin. Zod gibi kütüphaneler burada iyi çalışır: FormData'yı tür belirtilmiş bir şemaya ayrıştırın ve başarısızlık durumunda hata eşlemesini döndürün.

Bir form gönderimi tarafından tetiklendiğinde Sunucu Eylemi bağımsız değişken olarak ne alır?

Sunucu Eylemleri, form veri değişiklikleri için veri alma + API rotası kalıbının yerini alır. Formun action özelliği bir Sunucu Eylemini doğrudan kabul eder ve bu eylem bir FormData nesnesi alır. Eylemler, istemci arayüzü güncellemeleri için serileştirilebilir sonuçlar döndürür, önbellek geçersiz kılma amacıyla revalidatePath ve revalidateTag kullanımını destekler ve JavaScript olmadan aşamalı olarak çalışır.