Sunucu Eylemleri

• Sunucu Bileşeninden Sunucu Eylemi Oluşturma
• İstemci Bileşenlerinden Sunucu Eylemlerini İçe Aktarma
• Sunucu Eylemlerini Eylemlerle Oluşturma
• Sunucu Eylemleri ile Form Eylemleri
• UseActionState ile Sunucu Eylemleri
• UseActionState ile aşamalı iyileştirme

Bir Sunucu Eylemi “use server” direktifi tanımlandığında, çatınız otomatik olarak sunucu işlevine bir referans oluşturacak ve bu referansı İstemci Bileşenine aktaracaktır. Bu işlev istemcide çağrıldığında, React işlevi yürütmek için sunucuya bir istek gönderecek ve sonucu return edecektir.

Sunucu Eylemleri, Sunucu Bileşenlerinde oluşturulabilir ve İstemci Bileşenlerine destek olarak aktarılabilir veya İstemci Bileşenlerinde içe aktarılabilir ve kullanılabilir

Sunucu Bileşeninden Sunucu Eylemi Oluşturma

Sunucu Bileşenleri “use server” yönergesi ile Sunucu Eylemleri tanımlayabilir:

// Sunucu Bileşeni
import Button from './Button';

function EmptyNote () {
  async function createNoteAction() {
    // Sunucu Eylemi
    'use server';
    
    await db.notes.create();
  }

  return <Button onClick={createNoteAction}/>;
}

React, EmptyNote Sunucu Bileşenini işlediğinde, createNoteAction fonksiyonuna bir referans oluşturacak ve bu referansı Button İstemci Bileşenine aktaracaktır. Butona tıklandığında, React, sağlanan referansla createNoteAction fonksiyonunu çalıştırmak için sunucuya bir istek gönderecektir:

"use client";

export default function Button({onClick}) { 
  console.log(onClick); 
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
  return <button onClick={() => onClick()}>Boş Not Oluştur</button>
}

Daha fazlası için “use server” dokümanlarına bakın.

İstemci Bileşenlerinden Sunucu Eylemlerini İçe Aktarma

İstemci Bileşenleri, “use server” direktifini kullanan dosyalardan Sunucu Eylemlerini içe aktarabilir:

"use server";

export async function createNoteAction() {
  await db.notes.create();
}

Paketleyici EmptyNote İstemci Bileşenini oluşturduğunda, paketteki createNoteAction işlevine bir referans oluşturacaktır. Butona tıklandığında React, sağlanan referansı kullanarak createNoteAction fonksiyonunu çalıştırmak için sunucuya bir istek gönderecektir:

"use client";
import {createNoteAction} from './actions';

function EmptyNote() {
  console.log(createNoteAction);
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
  return <button onClick={createNoteAction} />
}

Daha fazlası için “use server” dokümanlarına bakın.

Sunucu Eylemlerini Eylemlerle Oluşturma

Sunucu Eylemleri, istemci üzerindeki Eylemlerle birlikte oluşturulabilir:

"use server";

export async function updateName(name) {
  if (!name) {
    return {error: 'İsim gereklidir'};
  }
  await db.users.updateName(name);
}

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [name, setName] = useState('');
  const [error, setError] = useState(null);

  const [isPending, startTransition] = useTransition();

  const submitAction = async () => {
    startTransition(async () => {
      const {error} = await updateName(name);
      if (!error) {
        setError(error);
      } else {
        setName('');
      }
    })
  }
  
  return (
    <form action={submitAction}>
      <input type="text" name="name" disabled={isPending}/>
      {state.error && <span>Başarısız: {state.error}</span>}
    </form>
  )
}

Bu, Sunucu Eyleminin isPending durumuna, istemcideki bir Eyleme sararak erişmenizi sağlar.

Daha fazlası için Sunucu Eylemini <form> dışında çağırma dokümanlarına bakın

Sunucu Eylemleri ile Form Eylemleri

Sunucu Eylemleri, React 19’daki yeni Form özellikleri ile çalışır.

Formu otomatik olarak sunucuya göndermek için bir Form’a bir Sunucu Eylemi aktarabilirsiniz:

"use client";

import {updateName} from './actions';

function UpdateName() {
  return (
    <form action={updateName}>
      <input type="text" name="name" />
    </form>
  )
}

Form gönderimi başarılı olduğunda, React formu otomatik olarak sıfırlayacaktır. Pending state, son yanıta erişmek veya aşamalı geliştirmeyi desteklemek için useActionState ekleyebilirsiniz.

Daha fazla bilgi için Formlarda Sunucu Eylemleri dokümanlarına bakın.

UseActionState ile Sunucu Eylemleri

Yalnızca pending state’ine ve son döndürülen yanıta erişmeniz gereken yaygın durumlar için Sunucu Eylemlerini useActionState ile oluşturabilirsiniz:

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [state, submitAction, isPending] = useActionState(updateName, {error: null});

  return (
    <form action={submitAction}>
      <input type="text" name="name" disabled={isPending}/>
      {state.error && <span>Başarısız: {state.error}</span>}
    </form>
  );
}

Sunucu Eylemleri ile useActionState kullanıldığında, React ayrıca hidrasyon tamamlanmadan önce girilen form gönderimlerini otomatik olarak yeniden oynatacaktır. Bu, kullanıcıların uygulama hidratlanmadan önce bile uygulamanızla etkileşime girebileceği anlamına gelir.

Daha fazlası için useActionState dokümanlarına bakın.

UseActionState ile aşamalı iyileştirme

Sunucu Eylemleri ayrıca useActionState üçüncü bağımsız değişkeni ile aşamalı geliştirmeyi de destekler.

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [, submitAction] = useActionState(updateName, null, `/name/update`);

  return (
    <form action={submitAction}>
      ...
    </form>
  );
}

permalink useActionState için sağlandığında, form JavaScript paketi yüklenmeden önce gönderilirse React sağlanan URL’ye yönlendirecektir.

Daha fazlası için useActionState dokümanlarına bakın.