React Server Components

'use server', React Sunucu Bileşenleri kullanımı için kullanılır.

'use server' istemci tarafı kodundan çağrılabilen sunucu tarafı işlevlerini işaretler.

Başvuru dokümanı

'use server'

Bir async fonksiyonunun başına 'use server' ekleyerek fonksiyonu istemci tarafından çağrılabilir hale getirin. Bu fonksiyonlara Server Functions denir.

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

Bir Sunucu Fonksiyon’u istemciden çağırdığınızda, geçilen tüm argümanların serileştirilmiş bir kopyasını içeren bir ağ isteği sunucuya yapılır. Eğer Sunucu Fonksiyon bir değer dönerse, bu değer serileştirilir ve istemciye geri gönderilir.

Fonksiyonları tek tek 'use server' ile işaretlemek yerine, bir dosyanın başına yönergeyi ekleyebilirsiniz, böylece o dosyadaki tüm export’lar, istemci kodunda da kullanılabilen Sunucu Fonksiyon’lar olarak işaretlenir.

Uyarılar

  • 'use server' fonksiyonlarının veya modüllerinin başında, diğer kodlardan (imports dahil) önce olmalıdır (yönergelerden önceki yorumlar kabul edilir). Tek tırnak veya çift tırnak ile yazılmalıdır, ters tırnak kullanılamaz.
  • 'use server' yalnızca sunucu tarafı dosyalarında kullanılabilir. Ortaya çıkan Sunucu Fonksiyon’lar, Sunucu Bileşen’lere prop’lar aracılığıyla iletilebilir. Desteklenen serileştirme türlerine bakın.
  • Bir Sunucu Fonksiyon’ı istemci kodu içinden içe aktarmak için, yönerge modül seviyesinde kullanılmalıdır.
  • Altta yatan ağ çağrıları her zaman asenkron olduğu için, 'use server' yalnızca async fonksiyonlarda kullanılabilir.
  • Sunucu Fonksiyon’lara geçirilen argümanları her zaman güvenilmeyen girişler olarak ele alın ve herhangi bir değişiklik yapmadan önce yetkilendirme yapın. Güvenlik önlemleri için bakın.
  • Sunucu Fonksiyon’lar bir Transition içinde çağrılmalıdır. <form action> veya formAction ile geçirilen Sunucu Fonksiyon’lar otomatik olarak bir geçiş içinde çağrılacaktır.
  • Sunucu Fonksiyon’lar, sunucu tarafı durumu güncelleyen değişiklikler için tasarlanmıştır; veri çekme işlemleri için önerilmezler. Bu nedenle, Sunucu Fonksiyon’ları uygulayan framework’ler genellikle her seferinde bir işlemi işler ve dönüş değerini önbelleğe almak için bir yöntem sunmazlar.

Güvenlikle ilgili hususlar

Sunucu Fonksiyon’lara geçirilen argümanlar tamamen istemci tarafından kontrol edilir. Güvenlik için, her zaman bunları güvenilmeyen girişler olarak ele alın ve argümanları uygun şekilde doğrulayın ve kaçış işlemi uygulayın.

Herhangi bir Sunucu Fonksiyonu içinde, giriş yapmış kullanıcının bu işlemi gerçekleştirmeye yetkili olduğundan emin olun.

Yapım Halinde

Bir Sunucu Fonksiyonun’dan hassas veri gönderimini önlemek için, istemci koduna benzersiz değerlerin ve nesnelerin iletilmesini engellemek amacıyla deneysel taint API’leri mevcuttur.

Bkz. experimental_taintUniqueValue ve experimental_taintObjectReference.

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

İstemci kodu, Sunucu Fonksiyon’u ağ üzerinden çağırdığı için, geçirilen tüm argümanların serileştirilebilir olması gerekir.

İşte Sunucu Fonksiyon argümanları için desteklenen türler:

Özellikle, bunlar desteklenmez:

  • React elemanları veya JSX
  • Fonksiyonlar, bileşen fonksiyonları veya Sunucu Fonksiyon olmayan diğer tüm fonksiyonlar dahil
  • Sınıflar
  • Herhangi bir sınıfın örnekleri olan nesneler (bahsedilen yerleşik sınıflar dışında) veya null prototipi olan nesneler
  • Küresel olarak kaydedilmemiş semboller, örneğin Symbol('my new symbol')
  • Olay yöneticilerinden gelen olaylar

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

Formlardaki Sunucu Fonksiyon’lar

Sunucu Fonksiyon’ların en yaygın kullanım senaryosu, veri üzerinde değişiklik yapan fonksiyonları çağırmaktır. Tarayıcıda, HTML form elemanı, bir kullanıcının bir değişiklik göndermesi için geleneksel yaklaşımdır. React Sunucu Bileşenleri ile React, formlarda Sunucu Fonksiyon’lar için birinci sınıf destek sunar.

İşte bir kullanıcının bir kullanıcı adı talep etmesine izin veren 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 geçirilen bir Sunucu Fonksiyon’dır. Bir kullanıcı bu formu gönderdiğinde, requestUsername sunucu fonksiyonuna yapılan bir ağ isteği gerçekleşir. Bir Sunucu Fonksiyon’ı form içinde çağırırken, React, formun FormData’sini birinci argüman olarak Sunucu Fonksiyon’a iletecektir.

Bir Sunucu Fonksiyon’ı form action’ına geçirerek, React formu kademeli olarak iyileş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.

Sunucu Fonksiyonu sonucuna dayalı olarak UI’yı güncellemek ve kademeli iyileştirmeyi desteklemek 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>
    </>
  );
}

Not: Diğer çoğu Hook gibi useActionStatein de yalnızca client code içinde çağrılabileceğini unutmayın.

<form> dışında bir Sunucu Fonksiyon’u çağırma

Sunucu Fonksiyon’lar, sunucu uç noktalarıdır ve istemci kodunda her yerde çağrılabilir.

Bir Sunucu Fonksiyon’u bir form dışında kullanırken, Sunucu Fonksiyon’u bir Transition içinde çağırın, bu sayede yükleme göstergesi gösterebilir, iyimser durum güncellemeleri yapabilir ve beklenmeyen hataları yönetebilirsiniz. Formlar, otomatik olarak Sunucu Fonksiyon’ları geçişler içinde sarar.

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 Fonksiyon dönüş değerini okumak için, döndürülen promise’i await etmeniz gerekecek.

Önceki'use client'