'use server'

• Başvuru dokümanı
  • 'use server'
  • Güvenlikle ilgili hususlar
  • Serileştirilebilir bağımsız değişkenler ve dönüş değerleri
• Kullanım
  • Formlarda Sunucu Eylemleri
  • Sunucu Eylemini <form> dışında çağırma

Başvuru dokümanı

'use server'

Fonksiyonu istemci tarafından çağrılabilir olarak işaretlemek için bir asenkron fonksiyon gövdesinin başına `‘use server” ekleyin. Bu işlevlere Sunucu Eylemleri adını veriyoruz.

async function addToCart(data) {
  'use server';
  // ...
}

İstemcide bir Sunucu Eylemi çağrıldığında, sunucuya iletilen tüm bağımsız değişkenlerin serileştirilmiş bir kopyasını içeren bir ağ isteği gönderilir. Sunucu Eylemi bir değer döndürürse, bu değer serileştirilir ve istemciye döndürülür.

İşlevleri tek tek 'use server' ile işaretlemek yerine, bir dosyanın en üstüne bu yönergeyi ekleyerek o dosyadaki tüm dışa aktarımları, istemci koduna aktarılanlar da dahil olmak üzere her yerde kullanılabilecek Sunucu Eylemleri olarak işaretleyebilirsiniz.

Uyarılar

• 'use server' fonksiyon veya modüllerinin en başında olmalıdır; içe aktarmalar dahil diğer tüm kodların üzerinde (direktiflerin üzerindeki yorumlar uygundur). Tek ya da çift tırnakla yazılmalıdırlar, ters tırnakla değil.
• 'use server' sadece sunucu tarafındaki dosyalarda kullanılabilir. Ortaya çıkan Sunucu Eylemleri prop’lar aracılığıyla İstemci Bileşenlerine aktarılabilir. Desteklenen serileştirme türleri bölümüne bakın.
• Sunucu Eylemini istemci kodu’ndan içe aktarmak için yönerge modül düzeyinde kullanılmalıdır
• Temel ağ çağrıları her zaman asenkron olduğundan, 'use server' yalnızca asenkron fonksiyonlarda kullanılabilir.
• Sunucu Eylemlerine yönelik bağımsız değişkenleri her zaman güvenilmeyen girdi olarak değerlendirin ve tüm mutasyonları yetkilendirin. Bkz. güvenlik hususları.
• Sunucu Eylemleri bir Transition içinde çağrılmalıdır. <form action> veya formAction’a geçirilen Sunucu Eylemleri otomatik olarak bir geçişte çağrılacaktır.
• Sunucu Eylemleri sunucu tarafı durumunu güncelleyen mutasyonlar için tasarlanmıştır; veri getirme için önerilmezler. Buna göre, Sunucu Eylemlerini uygulayan çatılar genellikle bir seferde bir eylemi işler ve dönüş değerini önbelleğe almanın bir yolu yoktur.

Güvenlikle ilgili hususlar

Sunucu Eylemlerine yönelik bağımsız değişkenler tamamen istemci kontrolündedir. Güvenlik için bunları her zaman güvenilmeyen girdi olarak ele alın ve bağımsız değişkenleri uygun şekilde doğruladığınızdan ve kaçtığınızdan emin olun.

Herhangi bir Sunucu Eyleminde, oturum açan kullanıcının bu eylemi gerçekleştirmesine izin verildiğini doğruladığınızdan emin olun.

Serileştirilebilir bağımsız değişkenler ve dönüş değerleri

İstemci kodu Sunucu Eylemini ağ üzerinden çağırdığından, aktarılan tüm argümanların serileştirilebilir olması gerekir.

Sunucu Eylemi bağımsız değişkenleri için desteklenen türler şunlardır:

• Primitives
  • string
  • number
  • bigint
  • boolean
  • undefined
  • null
  • symbol, Symbol.for aracılığıyla yalnızca global Sembol kayıt defterine kayıtlı semboller
• Serileştirilebilir değerler içeren yinelenebilir dosyalar
  • String
  • Array
  • Map
  • Set
  • TypedArray ve ArrayBuffer
• Date
• FormData nesne
• Plain objects: object initializers ile oluşturulmuş olanlar, serileştirilebilir özelliklerle
• Sunucu Eylemleri Olan İşlevler
• Promises

Özellikle, bunlar desteklenmemektedir:

• React elemanları, ya da JSX
• Bileşen işlevleri veya Sunucu Eylemi olmayan diğer işlevler dahil olmak üzere işlevler
• Classes
• Herhangi bir sınıfın örneği olan nesneler (belirtilen yerleşikler dışında) veya null prototipli
• Global olarak kaydedilmemiş semboller, örn. Symbol('yeni sembolüm')

Desteklenen serileştirilebilir dönüş değerleri, bir sınır İstemci Bileşeni için serileştirilebilir proplar ile aynıdır.

Kullanım

Formlarda Sunucu Eylemleri

Sunucu Eylemlerinin en yaygın kullanım durumu, verileri değiştiren sunucu işlevlerini çağırmak olacaktır. Tarayıcıda, HTML form elemanı kullanıcının bir mutation göndermesi için geleneksel yaklaşımdır. React Sunucu Bileşenleri ile React, forms Sunucu Eylemleri için birinci sınıf destek sunuyor.

İşte bir kullanıcının kullanıcı adı talep etmesini sağlayan bir form.

// App.js

async function requestUsername(formData) {
  'use server';
  const username = formData.get('username');
  // ...
}

export default function App() {
  return (
    <form action={requestUsername}>
      <input type="text" name="username" />
      <button type="submit">İstek</button>
    </form>
  );
}

Bu örnekte requestUsername bir <form>a aktarılan bir Sunucu Eylemidir. Bir kullanıcı bu formu gönderdiğinde, requestUsername sunucu işlevine bir ağ isteği gönderilir. Bir formda bir Sunucu Eylemi çağırırken, React formun FormData öğesini Sunucu Eylemine ilk argüman olarak sağlayacaktır.

React, action formuna bir Sunucu Eylemi geçirerek formu aşamalı olarak geliştirebilir. Bu, formların JavaScript paketi yüklenmeden önce gönderilebileceği anlamına gelir.

Formlarda dönüş değerlerini işleme

Kullanıcı adı istek formunda, bir kullanıcı adının mevcut olmaması ihtimali olabilir. requestUsername bize başarısız olup olmadığını söylemelidir.

Aşamalı geliştirmeyi desteklerken bir Sunucu Eyleminin sonucuna göre kullanıcı arayüzünü güncellemek için useActionState kullanın.

// requestUsername.js
'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  if (canRequest(username)) {
    // ...
    return 'başarılı';
  }
  return 'başarısız oldu';
}

// UsernameForm.js
'use client';

import { useActionState } from 'react';
import requestUsername from './requestUsername';

function UsernameForm() {
  const [state, action] = useActionState(requestUsername, null, 'n/a');

  return (
    <>
      <form action={action}>
        <input type="text" name="username" />
        <button type="submit">İstek</button>
      </form>
      <p>Son gönderim talebi iade edildi: {state}</p>
    </>
  );
}

Note that like most Hooks, useActionState can only be called in client code. Çoğu Hook gibi useActionStatein de yalnızca client code içinde çağrılabileceğini unutmayın.

Sunucu Eylemini <form> dışında çağırma

Sunucu Eylemleri açık sunucu uç noktalarıdır ve istemci kodunun herhangi bir yerinde çağrılabilir.

Form dışında bir Sunucu Eylemi kullanırken, Sunucu Eylemini bir Transition içinde çağırın; bu sayede bir yükleme göstergesi görüntüleyebilir, iyimser state güncellemeleri gösterebilir ve beklenmedik hataları ele alabilirsiniz

import incrementLike from './actions';
import { useState, useTransition } from 'react';

function LikeButton() {
  const [isPending, startTransition] = useTransition();
  const [likeCount, setLikeCount] = useState(0);

  const onClick = () => {
    startTransition(async () => {
      const currentCount = await incrementLike();
      setLikeCount(currentCount);
    });
  };

  return (
    <>
      <p>Toplam Beğeni: {likeCount}</p>
      <button onClick={onClick} disabled={isPending}>Beğen</button>;
    </>
  );
}

// actions.js
'use server';

let likeCount = 0;
export default async function incrementLike() {
  likeCount++;
  return likeCount;
}

Bir Sunucu Eylemi dönüş değerini okumak için, döndürülen promise’i await etmeniz gerekir.