M

MLOG

Türkçe

Etkin sunucu taraflı durum yönetimi için çığır açan bir özellik olan React Server Context'i keşfedin. Performansı, SEO'yu ve mimariyi nasıl geliştirdiğini öğrenin.

React Server Context: Sunucu Taraflı Durum Paylaşımına Derinlemesine Bir Bakış

React Sunucu Bileşenleri (RSC'ler), sunucu ve istemci arasındaki çizgileri bulanıklaştırarak React uygulamaları oluşturma şeklimizde bir paradigma değişikliği yarattı. Bu yeni paradigmanın merkezinde, durumu ve veriyi sunucuda sorunsuz bir şekilde paylaşmak için güçlü bir mekanizma olan React Server Context yer alıyor. Bu makale, React Server Context'i, faydalarını, kullanım alanlarını ve pratik uygulamasını kapsamlı bir şekilde incelemektedir.

React Server Context Nedir?

React Server Context, render işlemi sırasında sunucuda çalışan React Sunucu Bileşenleri arasında durum ve veri paylaşmanıza olanak tanıyan bir özelliktir. İstemci tarafı React'te kullanılan tanıdık React.Context'e benzer, ancak önemli bir farkı vardır: yalnızca sunucuda çalışır.

Bunu, bileşenlerin ilk render sırasında erişebileceği ve değiştirebileceği küresel, sunucu taraflı bir depo olarak düşünün. Bu, karmaşık prop aktarımına veya harici durum yönetimi kütüphanelerine ihtiyaç duymadan verimli veri çekme, kimlik doğrulama ve diğer sunucu taraflı işlemleri mümkün kılar.

Neden React Server Context Kullanmalısınız?

React Server Context, sunucu taraflı veri yönetimine yönelik geleneksel yaklaşımlara göre birçok cazip avantaj sunar:

Temel Kavramlar ve Terminoloji

Uygulamaya geçmeden önce, bazı temel kavramları tanımlayalım:

React Server Context'i Uygulama

Uygulamanızda React Server Context'i uygulamak için adım adım bir kılavuz:

1. Bir Context Oluşturun

İlk olarak, React.createContext kullanarak yeni bir context oluşturun:

// app/context/AuthContext.js
import { createContext } from 'react';

const AuthContext = createContext(null);

export default AuthContext;

2. Bir Context Sağlayıcı Oluşturun

Ardından, sunucu taraflı durumu paylaşmak istediğiniz uygulama bölümünü saran bir Context Sağlayıcı bileşeni oluşturun. Bu sağlayıcı, başlangıç verilerini çekecek ve alt bileşenlerinin kullanımına sunacaktır.

// app/providers/AuthProvider.js
'use client';

import { useState, useEffect } from 'react';
import AuthContext from '../context/AuthContext';

async function fetchUser() {
  // Bir API'den veya veritabanından kullanıcı verisi çekmeyi simüle et
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        id: 123,
        name: 'John Doe',
        email: 'john.doe@example.com',
      });
    }, 500);
  });
}

export default function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    async function getUser() {
      const userData = await fetchUser();
      setUser(userData);
    }

    getUser();
  }, []);

  return (
    
      {children}
    
  );
}

Önemli: `AuthProvider`, `'use client'` yönergesiyle belirtildiği gibi bir İstemci Bileşenidir. Bunun nedeni, istemci tarafı kancaları olan `useState` ve `useEffect` kullanmasıdır. İlk veri çekme işlemi `useEffect` kancası içinde eşzamansız olarak gerçekleşir ve `user` durumu daha sonra `AuthContext`'e sağlanır.

3. Context Değerini Tüketin

Şimdi, Sunucu Bileşenlerinizden veya İstemci Bileşenlerinizden herhangi birinde useContext kancasını kullanarak context değerini tüketebilirsiniz:

// app/components/Profile.js
'use client';

import { useContext } from 'react';
import AuthContext from '../context/AuthContext';

export default function Profile() {
  const { user } = useContext(AuthContext);

  if (!user) {
    return 
Yükleniyor...
;
  }

  return (
    

      
Profil

      
İsim: {user.name}

      
E-posta: {user.email}

    

  );
}

Bu örnekte, `Profile` bileşeni, kullanıcı verilerine erişmek için `AuthContext`'i tüketen bir İstemci Bileşenidir. Kullanıcının adını ve e-posta adresini görüntüler.

4. Sunucu Bileşenlerinde Server Context Kullanımı

Önceki örnek, Server Context'in bir İstemci Bileşeninde nasıl tüketileceğini göstermiş olsa da, onu doğrudan Sunucu Bileşenlerinde kullanmak genellikle daha verimlidir. Bu, verileri çekmenize ve bileşenleri tamamen sunucuda render etmenize olanak tanıyarak istemci tarafı JavaScript'i daha da azaltır.

Bir Sunucu Bileşeninde Server Context'i kullanmak için, context'i doğrudan bileşen içinde içe aktarabilir ve kullanabilirsiniz:

// app/components/Dashboard.js
import AuthContext from '../context/AuthContext';
import { useContext } from 'react';

export default async function Dashboard() {
    const { user } = useContext(AuthContext);

    if (!user) {
        return 
Yükleniyor...
;
    }

    return (
        

            
Hoş geldin, {user.name}!

            
Burası senin kontrol panelin.

        

    );
}

Önemli: Bunun bir Sunucu Bileşeni olmasına rağmen, context değerine erişmek için hala `useContext` kancasını kullanmamız gerektiğini unutmayın. Ayrıca, bileşen `async` olarak işaretlenmiştir, çünkü Sunucu Bileşenleri doğal olarak eşzamansız işlemleri destekler, bu da veri çekmeyi daha temiz ve verimli hale getirir.

5. Uygulamanızı Sarın

Son olarak, sunucu taraflı durumu tüm bileşenlerin kullanımına sunmak için uygulamanızı Context Sağlayıcı ile sarın:

// app/layout.js
import AuthProvider from './providers/AuthProvider';

export default function RootLayout({ children }) {
  return (
    
      
        
          {children}
        
      
    
  );
}

İleri Düzey Kullanım Alanları

Temel durum paylaşımının ötesinde, React Server Context daha gelişmiş senaryolarda kullanılabilir:

1. Uluslararasılaştırma (i18n)

Mevcut yerel ayarı veya dili uygulamanızla paylaşmak için Server Context'i kullanabilirsiniz. Bu, sunucuda yerelleştirilmiş içerik render etmenizi sağlayarak SEO ve erişilebilirliği artırır.

Örnek:

// app/context/LocaleContext.js
import { createContext } from 'react';

const LocaleContext = createContext('en'); // Varsayılan yerel ayar

export default LocaleContext;

// app/providers/LocaleProvider.js
'use client';

import { useState, useEffect } from 'react';
import LocaleContext from '../context/LocaleContext';

export default function LocaleProvider({ children, defaultLocale }) {
  const [locale, setLocale] = useState(defaultLocale || 'en');

  useEffect(() => {
    // Burada yerel ayara göre yerel ayara özgü verileri yüklemek isteyebilirsiniz
    // Örneğin, bir sunucudan veya veritabanından çevirileri çekin
    console.log(`Yerel ayar şuna ayarlanıyor: ${locale}`);
  }, [locale]);

  return (
    
      {children}
    
  );
}

// app/components/LocalizedText.js
'use client';

import { useContext } from 'react';
import LocaleContext from '../context/LocaleContext';
import translations from '../translations'; // Çevirilerinizi içe aktarın

export default function LocalizedText({ id }) {
  const { locale } = useContext(LocaleContext);
  const text = translations[locale][id] || id; // Çeviri eksikse ID'ye geri dön
  return <>{text};
}

// app/translations.js
const translations = {
  en: {
    greeting: 'Hello!',
    description: 'Welcome to our website.',
  },
  tr: {
    greeting: 'Merhaba!',
    description: 'Web sitemize hoş geldiniz.',
  },
  fr: {
    greeting: 'Bonjour !',
    description: 'Bienvenue sur notre site web.',
  },
  es: {
    greeting: '¡Hola!',
    description: 'Bienvenido a nuestro sitio web.',
  },
  // Buraya daha fazla yerel ayar ve çeviri ekleyin
};

Bu örnek, bir `LocaleContext`'in nasıl oluşturulacağını ve mevcut yerel ayarı uygulamanıza sağlamak için nasıl kullanılacağını gösterir. `LocalizedText` bileşeni daha sonra bu yerel ayarı kullanarak bir `translations` nesnesinden uygun çeviriyi alır. Üretim ortamında `translations` verilerini muhtemelen bir veritabanı veya harici bir API gibi daha sağlam bir kaynaktan yüklersiniz.

2. Temalandırma

Mevcut temayı uygulamanızla paylaşmak için Server Context'i kullanabilirsiniz. Bu, bileşenlerinizi kullanıcının tercihlerine veya sistem ayarlarına göre dinamik olarak şekillendirmenize olanak tanır.

3. Özellik Bayrakları (Feature Flags)

Özellik bayraklarını uygulamanızla paylaşmak için Server Context'i kullanabilirsiniz. Bu, kullanıcı segmentlerine, A/B testlerine veya diğer kriterlere göre özellikleri etkinleştirmenize veya devre dışı bırakmanıza olanak tanır.

4. Kimlik Doğrulama

Başlangıç örneğinde gösterildiği gibi, Server Context, kimlik doğrulama durumunu yönetmek için mükemmeldir ve basit kullanıcı bilgileri için bir veritabanına birden fazla gidiş-gelişi önler.

En İyi Uygulamalar

React Server Context'ten en iyi şekilde yararlanmak için şu en iyi uygulamaları izleyin:

Küresel Hususlar

React Server Context'i küresel bir bağlamda kullanırken aşağıdakileri göz önünde bulundurun:

Örneğin, Amerika Birleşik Devletleri'nde tarihler genellikle AA/GG/YYYY olarak biçimlendirilirken, Avrupa'nın birçok yerinde GG/AA/YYYY olarak biçimlendirilir. Benzer şekilde, bazı kültürler ondalık ayırıcı olarak virgül ve binlik ayırıcı olarak nokta kullanırken, diğerleri tam tersi bir gelenek kullanır.

Dünyadan Örnekler

İşte React Server Context'in farklı küresel bağlamlarda nasıl kullanılabileceğine dair bazı örnekler:

Sonuç

React Server Context, React uygulamalarında sunucu taraflı durumu yönetmek için güçlü bir araçtır. Server Context'ten yararlanarak performansı artırabilir, SEO'yu geliştirebilir, mimarinizi basitleştirebilir ve daha iyi bir kullanıcı deneyimi sağlayabilirsiniz. Server Context, karmaşık uygulamalar için geleneksel istemci tarafı durum yönetimi çözümlerinin yerini almasa da, sunucu taraflı verileri etkili bir şekilde paylaşma sürecini kolaylaştırır.

React Sunucu Bileşenleri gelişmeye devam ettikçe, Server Context muhtemelen React ekosisteminin daha da önemli bir parçası haline gelecektir. Yeteneklerini ve sınırlılıklarını anlayarak, küresel bir kitle için daha verimli, performanslı ve kullanıcı dostu web uygulamaları oluşturmak için ondan yararlanabilirsiniz. Yeteneklerini ve sınırlılıklarını anlayarak, daha verimli, performanslı ve kullanıcı dostu web uygulamaları oluşturmak için ondan yararlanabilirsiniz.