Sedat Demir
Geri dön

React 19 ile Yeni Bir Dönem: Server Actions ve Beklenen Yenilikler

React 19: Web Geliştirmenin Geleceğine Yönelik Devrim Niteliğinde Yenilikler

React topluluğu olarak her zaman yeni sürümleri heyecanla bekleriz. React 19 da bu beklentiyi fazlasıyla karşılayacak gibi görünüyor. React ekibi, web geliştirme deneyimini daha akıcı, daha verimli ve daha güçlü hale getirecek bir dizi yenilikle karşımıza çıkıyor. Bu yeniliklerin başında ise şüphesiz Server Actions geliyor. Ancak React 19 sadece Server Actions ile sınırlı kalmıyor; Context API'de yapılan iyileştirmeler, yeni use hook'u ve daha fazlası geliştiricilerin işini kolaylaştırmak için yolda.

Bu yazıda, React 19 ile gelen en önemli özellikleri, özellikle de Server Actions'ın nasıl çalıştığını ve projelerimize nasıl entegre edebileceğimizi detaylı bir şekilde ele alacağız. Teknik detaylara inerken, anlaşılır bir dil kullanmaya özen göstereceğiz.

Neden React 19? Mevcut Sorunlara Çözümler

React'in her yeni sürümü, geliştiricilerin karşılaştığı bazı zorlukları çözmeyi hedefler. React 19'un temel motivasyonlarından biri, sunucu ve istemci arasındaki veri akışını daha basit ve güvenli hale getirmektir. Geleneksel yaklaşımlarda, form gönderimleri, veri güncellemeleri gibi işlemler genellikle API çağrıları aracılığıyla yapılırdı. Bu durum, hem istemci hem de sunucu tarafında ekstra kod yazmayı gerektirir ve karmaşıklığı artırabilirdi.

React 19'un getirdiği yenilikler, bu karmaşıklığı azaltmayı ve geliştirme deneyimini iyileştirmeyi amaçlıyor.

Server Actions: Sunucu Tarafı Mantığını İstemciye Taşımanın Gücü

Server Actions, React 19'un belki de en heyecan verici özelliği. Bu özellik, sunucu tarafında çalıştırılacak fonksiyonları doğrudan React bileşenlerinizden çağırmanıza olanak tanır. Bu, "full-stack React" deneyimini bir üst seviyeye taşıyor.

Server Actions Nasıl Çalışır?

Server Actions, temelde React'in sunucu tarafı işleme yeteneklerini daha da ileriye taşıyan bir mekanizmadır. Bir Server Action, sunucu ortamında çalıştırılacak bir JavaScript fonksiyonudur. Bu fonksiyonlar, doğrudan istemci tarafındaki React bileşenlerinden çağrılabilir.

Temel Avantajları:

Server Actions Kullanım Alanları

Server Actions Örneği: Basit Bir Form Gönderimi

Bir blog yazısı oluşturma senaryosunu ele alalım. Geleneksel yöntemde, bir form gönderimi için hem istemci tarafında bir fetch isteği yapmamız hem de sunucu tarafında bu isteği karşılayacak bir API endpoint'i oluşturmamız gerekirdi. Server Actions ile bu süreç çok daha sadeleşir.

Öncelikle, sunucu tarafında çalışacak bir Server Action fonksiyonu tanımlayalım. Next.js gibi framework'ler, Server Actions'ı kolayca entegre etmenizi sağlar. Genellikle bir actions.js veya doğrudan bir API rotası dosyasında bu fonksiyonları tanımlayabilirsiniz.

// app/actions.js (Next.js App Router örneği)
'use server'; // Bu satır, fonksiyonun sunucuda çalışacağını belirtir.

import { revalidatePath } from 'next/cache'; // Cache'i geçersiz kılmak için

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;

  console.log('Yeni gönderi oluşturuluyor:', { title, content });

  // Burada veritabanına kaydetme gibi işlemler yapılır.
  // Örnek: await db.posts.create({ title, content });

  // Cache'i geçersiz kılınarak güncel verinin getirilmesi sağlanır.
  revalidatePath('/');

  return { success: true, message: 'Gönderi başarıyla oluşturuldu!' };
}

Şimdi de bu createPost Server Action'ını bir React bileşeninde kullanalım.

// app/page.js (Next.js App Router örneği)
import { createPost } from './actions';

export default function HomePage() {
  return (
    <div>
      <h1>Yeni Blog Yazısı Oluştur</h1>
      <form action={createPost}> {/* action prop'u ile Server Action'ı bağlarız */}
        <div>
          <label htmlFor="title">Başlık:</label>
          <input type="text" id="title" name="title" required />
        </div>
        <div>
          <label htmlFor="content">İçerik:</label>
          <textarea id="content" name="content" required></textarea>
        </div>
        <button type="submit">Gönder</button>
      </form>
    </div>
  );
}

Açıklamalar:

Server Actions ile State Yönetimi ve Hata İşleme

Server Actions ile çalışırken, istemci tarafında bir pending durumu ve gelen sonuçları yönetmek önemlidir. React 19, useFormStatus ve useFormState gibi hook'lar ile bu süreci daha da kolaylaştırıyor.

useFormStatus Hook'u

Bu hook, formun mevcut durumunu (gönderiliyor mu, hata var mı vb.) izlemenizi sağlar.

// app/page.js (Next.js App Router örneği)
'use client'; // Bu bileşenin istemci tarafında çalışacağını belirtir.

import { useFormStatus } from 'react-dom';
import { createPost } from './actions';

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Gönderiliyor...' : 'Gönder'}
    </button>
  );
}

export default function HomePage() {
  return (
    <div>
      <h1>Yeni Blog Yazısı Oluştur</h1>
      <form action={createPost}>
        <div>
          <label htmlFor="title">Başlık:</label>
          <input type="text" id="title" name="title" required />
        </div>
        <div>
          <label htmlFor="content">İçerik:</label>
          <textarea id="content" name="content" required></textarea>
        </div>
        <SubmitButton />
      </form>
    </div>
  );
}

useFormStatus sayesinde, form gönderilirken "Gönderiliyor..." gibi bir metin göstererek kullanıcıya geri bildirim verebilir ve gönderim tamamlanana kadar butonu devre dışı bırakabilirsiniz.

useFormState Hook'u

Bu hook, Server Action'dan dönen değeri yönetmenize ve bu değere göre UI'da değişiklikler yapmanıza olanak tanır.

Önce Server Action'ımızı güncelleyelim:

// app/actions.js (Next.js App Router örneği)
'use server';

import { revalidatePath } from 'next/cache';

export async function createPost(prevState: any, formData: FormData) { // prevState ilk argüman olarak gelir
  try {
    const title = formData.get('title') as string;
    const content = formData.get('content') as string;

    if (!title || !content) {
      return { message: 'Başlık ve içerik boş olamaz!' };
    }

    console.log('Yeni gönderi oluşturuluyor:', { title, content });
    // await db.posts.create({ title, content });

    revalidatePath('/');
    return { message: 'Gönderi başarıyla oluşturuldu!' };
  } catch (error) {
    console.error('Gönderi oluşturma hatası:', error);
    return { message: 'Gönderi oluşturulurken bir hata oluştu.' };
  }
}

Şimdi de useFormState ile bu değeri kullanalım:

// app/page.js (Next.js App Router örneği)
'use client';

import { useFormState, useFormStatus } from 'react-dom';
import { createPost } from './actions';

const initialState = {
  message: null,
};

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Gönderiliyor...' : 'Gönder'}
    </button>
  );
}

export default function HomePage() {
  const [state, formAction] = useFormState(createPost, initialState);

  return (
    <div>
      <h1>Yeni Blog Yazısı Oluştur</h1>
      {state?.message && <p>{state.message}</p>} {/* Gelen mesajı göster */}
      <form action={formAction}> {/* formAction ile Server Action'ı bağlarız */}
        <div>
          <label htmlFor="title">Başlık:</label>
          <input type="text" id="title" name="title" required />
        </div>
        <div>
          <label htmlFor="content">İçerik:</label>
          <textarea id="content" name="content" required></textarea>
        </div>
        <SubmitButton />
      </form>
    </div>
  );
}

useFormState(createPost, initialState):

Bu şekilde, Server Action'dan gelen mesajları veya hata bilgilerini doğrudan bileşeninizde gösterebilir ve kullanıcıya daha iyi bir geri bildirim sağlayabilirsiniz.

React 19'daki Diğer Önemli Yenilikler

Server Actions'ın yanı sıra, React 19'da geliştiricilerin hayatını kolaylaştıracak başka önemli yenilikler de bulunuyor:

1. Yeni use Hook'u

use hook'u, React'in eşzamansız (asynchronous) değerleri daha deklaratif bir şekilde işlemesine olanak tanır. Özellikle Promise'ları ve Context'leri daha akıcı bir şekilde kullanmanızı sağlar.

Promise'larla Kullanımı:

import { use } from 'react';

function fetchUserData(userId: string) {
  // Bu bir promise döndüren gerçek bir fetch fonksiyonu olmalı
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id: userId, name: 'Kullanıcı Adı' });
    }, 1000);
  });
}

function UserProfile({ userId }: { userId: string }) {
  const userData = use(fetchUserData(userId)); // Promise'ın çözülmesini bekler

  return (
    <div>
      <h2>{userData.name}</h2>
      <p>Kullanıcı ID: {userData.id}</p>
    </div>
  );
}

Bu kullanım, useEffect ve useState ile karmaşık hale gelebilen veri yükleme durumlarını (loading, error, data) daha sade bir şekilde yönetmenizi sağlar. use hook'u, Promise çözülene kadar bileşenin askıya alınmasını (suspense) sağlar.

Context ile Kullanımı:

import { createContext, useContext, use } from 'react';

const ThemeContext = createContext('light');

function ThemeProvider({ children }: { children: React.ReactNode }) {
  // Bu örnekte context'i doğrudan kullanıyoruz,
  // ancak daha karmaşık senaryolarda use ile de işlenebilir.
  return (
    <ThemeContext.Provider value="dark">
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedComponent() {
  const theme = use(ThemeContext); // Context değerini doğrudan kullanır

  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#333' }}>
    Bu tema: {theme}
  </div>;
}

function App() {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
}

use hook'u, bileşenlerin okunabilirliğini artırır ve karmaşık asenkron akışları daha kolay yönetilebilir hale getirir.

2. Geliştirilmiş Context API

React 19 ile birlikte Context API'de de iyileştirmeler bekleniyor. Bu iyileştirmeler, context'in daha performanslı ve daha öngörülebilir çalışmasını sağlayacak. Özellikle büyük uygulamalarda context güncellemelerinin performansa etkisini azaltmaya yönelik çalışmalar yapılıyor.

3. Yeni observer API (Potansiyel)

Bu API, bileşenlerin DOM elemanlarının görünürlüğünü izlemesine olanak tanır. Lazy loading, sonsuz kaydırma (infinite scrolling) gibi özellikler için kullanışlı olabilir.

4. Gelişmiş Suspense Desteği

Suspense, asenkron veri yükleme ve kod bölme (code splitting) gibi senaryolarda daha iyi bir kullanıcı deneyimi sunmak için tasarlanmıştır. React 19 ile Suspense'in daha geniş bir alanda ve daha stabil bir şekilde kullanılabilmesi hedefleniyor. use hook'u da Suspense'in daha güçlü bir şekilde entegre edilmesine yardımcı oluyor.

5. Daha İyi Hata Yönetimi

React 19'da hata sınırları (error boundaries) ve genel hata yönetimi konusunda iyileştirmeler yapılması bekleniyor. Bu, uygulamalarda karşılaşılan hataların daha kontrollü bir şekilde ele alınmasını sağlayacaktır.

React 19'a Geçiş ve Dikkat Edilmesi Gerekenler

React 19'un kararlı sürümü yayınlandığında, projenize geçiş yaparken bazı noktalara dikkat etmeniz gerekecektir:

Sonuç: React 19 ile Geliştirme Deneyimi Yeniden Tanımlanıyor

React 19, web geliştirme dünyasında heyecan verici bir dönemin başlangıcını işaret ediyor. Server Actions, geliştiricilere sunucu ve istemci tarafı mantığını daha entegre bir şekilde yönetme gücü vererek, veri akışını basitleştiriyor ve daha az kodla daha fazlasını yapmayı mümkün kılıyor. use hook'u gibi diğer yenilikler ise asenkron işlemleri ve context yönetimini daha akıcı hale getiriyor.

Bu yenilikler, özellikle karmaşık full-stack uygulamalar geliştiren ekipler için büyük bir nimet olacak.

Share this post on:
Share this post via WhatsApp Share this post on Facebook Share this post on X Share this post via Telegram Share this post on Pinterest Share this post via email
Önceki Yazı
React'te useOptimistic Hook ile Anlık UI Güncellemeleri: Kullanıcı Deneyimini Devrimleştirin