M

MLOG

Türkçe

Suspense ile React'te verimli veri çekmenin kilidini açın! Bileşen düzeyinde yüklemeden paralel veri çekmeye kadar çeşitli stratejileri keşfedin ve duyarlı, kullanıcı dostu uygulamalar oluşturun.

React Suspense: Modern Uygulamalar için Veri Çekme Stratejileri

React Suspense, React 16.6'da tanıtılan ve özellikle veri çekme gibi asenkron işlemleri basitleştiren güçlü bir özelliktir. Veri yüklenmesini beklerken bileşen render'ını "askıya almanıza" olanak tanıyarak, yükleme durumlarını yönetmek için daha bildirimsel ve kullanıcı dostu bir yol sunar. Bu kılavuz, React Suspense kullanarak çeşitli veri çekme stratejilerini inceler ve duyarlı ve performanslı uygulamalar oluşturma konusunda pratik bilgiler sunar.

React Suspense'i Anlamak

Belirli stratejilere dalmadan önce, React Suspense'in temel kavramlarını anlayalım:

Suspense ile Veri Çekme Stratejileri

İşte React Suspense kullanarak birkaç etkili veri çekme stratejisi:

1. Bileşen Düzeyinde Veri Çekme

Bu, her bileşenin kendi verisini bir Suspense sınırı içinde çektiği en basit yaklaşımdır. Bağımsız veri gereksinimleri olan basit bileşenler için uygundur.

Örnek:

Bir API'den kullanıcı verilerini çekmesi gereken bir UserProfile bileşenimiz olduğunu varsayalım:

// Basit bir veri çekme yardımcı programı (tercih ettiğiniz kütüphane ile değiştirin)
const fetchData = (url) => {
  let status = 'pending';
  let result;
  let suspender = fetch(url)
    .then(res => {
      if (!res.ok) {
        throw new Error(`HTTP hatası! Durum: ${res.status}`);
      }
      return res.json();
    })
    .then(
      res => {
        status = 'success';
        result = res;
      },
      err => {
        status = 'error';
        result = err;
      }
    );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }
      return result;
    }
  };
};

const userResource = fetchData('/api/user/123');

function UserProfile() {
  const user = userResource.read();
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<div>Kullanıcı verileri yükleniyor...</div>}>
      <UserProfile />
    </Suspense>
  );
}

Açıklama:

Avantajları:

Dezavantajları:

2. Paralel Veri Çekme

Şelale veri çekmeden kaçınmak için, birden fazla veri isteğini eşzamanlı olarak başlatabilir ve bileşenleri render etmeden önce hepsini beklemek için Promise.all veya benzer teknikleri kullanabilirsiniz. Bu, genel yükleme süresini en aza indirir.

Örnek:

const userResource = fetchData('/api/user/123');
const postsResource = fetchData('/api/user/123/posts');

function UserProfile() {
  const user = userResource.read();
  const posts = postsResource.read();

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <h3>Gönderiler:</h3>
      <ul>
        {posts.map(post => (<li key={post.id}>{post.title}</li>))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<div>Kullanıcı verileri ve gönderiler yükleniyor...</div>}>
      <UserProfile />
    </Suspense>
  );
}

Açıklama:

Avantajları:

Dezavantajları:

3. Seçici Hidrasyon (Sunucu Tarafı Render - SSR için)

Sunucu Tarafı Render (SSR) kullanırken, Suspense sayfanın bölümlerini seçici olarak hidrate etmek için kullanılabilir. Bu, Etkileşime Geçme Süresini (TTI) ve algılanan performansı iyileştirerek, sayfanın en önemli kısımlarını önce hidrate etmeye öncelik verebileceğiniz anlamına gelir. Bu, temel düzeni veya çekirdek içeriği mümkün olan en kısa sürede göstermek isterken, daha az kritik bileşenlerin hidrasyonunu ertelemek istediğiniz senaryolarda kullanışlıdır.

Örnek (Kavramsal):

// Sunucu tarafı:
<Suspense fallback={<div>Kritik içerik yükleniyor...</div>}>
  <CriticalContent />
</Suspense>
<Suspense fallback={<div>İsteğe bağlı içerik yükleniyor...</div>}>
  <OptionalContent />
</Suspense>

Açıklama:

Avantajları:

Dezavantajları:

4. Suspense Destekli Veri Çekme Kütüphaneleri

Birçok popüler veri çekme kütüphanesi, React Suspense için yerleşik desteğe sahiptir. Bu kütüphaneler genellikle veri çekmek ve Suspense ile entegre olmak için daha kullanışlı ve verimli bir yol sunar. Dikkate değer bazı örnekler şunlardır:

Örnek (SWR kullanarak):

import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then(res => res.json())

function UserProfile() {
  const { data: user, error } = useSWR('/api/user/123', fetcher, { suspense: true })

  if (error) return <div>yüklenemedi</div>
  if (!user) return <div>yükleniyor...</div> // Bu muhtemelen Suspense ile asla render edilmez

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  )
}

function App() {
  return (
    <Suspense fallback={<div>Kullanıcı verileri yükleniyor...</div>}>
      <UserProfile />
    </Suspense>
  );
}

Açıklama:

Avantajları:

Dezavantajları:

Suspense ile Hata Yönetimi

Suspense kullanırken hata yönetimi çok önemlidir. React, Suspense sınırları içinde meydana gelen hataları yakalamak için bir ErrorBoundary bileşeni sağlar.

Örnek:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Bir sonraki render'ın yedek arayüzü göstermesi için state'i güncelleyin.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Hatayı bir hata raporlama servisine de kaydedebilirsiniz
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Herhangi bir özel yedek arayüzü render edebilirsiniz
      return <h1>Bir şeyler ters gitti.</h1>;
    }

    return this.props.children; 
  }
}

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Yükleniyor...</div>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  );
}

Açıklama:

React Suspense Kullanımı için En İyi Uygulamalar

Gerçek Dünya Örnekleri

React Suspense, aşağıdakiler de dahil olmak üzere çeşitli senaryolarda uygulanabilir:

Örnek 1: Uluslararası E-ticaret Platformu

Çeşitli ülkelerdeki müşterilere hizmet veren bir e-ticaret platformu hayal edin. Fiyatlar ve açıklamalar gibi ürün detaylarının, kullanıcının konumuna göre çekilmesi gerekebilir. Yerelleştirilmiş ürün bilgilerini çekerken bir yükleme göstergesi görüntülemek için Suspense kullanılabilir.

function ProductDetails({ productId, locale }) {
  const productResource = fetchData(`/api/products/${productId}?locale=${locale}`);
  const product = productResource.read();

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Fiyat: {product.price}</p>
      <p>Açıklama: {product.description}</p>
    </div>
  );
}

function App() {
  const userLocale = getUserLocale(); // Kullanıcının yerel ayarını belirlemek için fonksiyon
  return (
    <Suspense fallback={<div>Ürün detayları yükleniyor...</div>}>
      <ProductDetails productId="123" locale={userLocale} />
    </Suspense>
  );
}

Örnek 2: Küresel Sosyal Medya Akışı

Dünya çapındaki kullanıcılardan gelen gönderilerin bir akışını görüntüleyen bir sosyal medya platformu düşünün. Her gönderi metin, resim ve video içerebilir ve bunların yüklenmesi farklı süreler alabilir. İçerikleri yüklenirken bireysel gönderiler için yer tutucular görüntülemek ve daha akıcı bir kaydırma deneyimi sağlamak için Suspense kullanılabilir.

function Post({ postId }) {
  const postResource = fetchData(`/api/posts/${postId}`);
  const post = postResource.read();

  return (
    <div>
      <p>{post.text}</p>
      {post.image && <img src={post.image} alt="Gönderi Resmi" />}
      {post.video && <video src={post.video} controls />}
    </div>
  );
}

function App() {
  const postIds = getPostIds(); // Gönderi ID'lerinin bir listesini almak için fonksiyon
  return (
    <div>
      {postIds.map(postId => (
        <Suspense key={postId} fallback={<div>Gönderi yükleniyor...</div>}>
          <Post postId={postId} />
        </Suspense>
      ))}
    </div>
  );
}

Sonuç

React Suspense, React uygulamalarında asenkron veri çekmeyi yönetmek için güçlü bir araçtır. Çeşitli veri çekme stratejilerini ve en iyi uygulamaları anlayarak, harika bir kullanıcı deneyimi sunan duyarlı, kullanıcı dostu ve performanslı uygulamalar oluşturabilirsiniz. Özel ihtiyaçlarınız için en iyi yaklaşımı bulmak üzere farklı stratejiler ve kütüphanelerle denemeler yapın.

React gelişmeye devam ettikçe, Suspense'in veri çekme ve render etmede daha da önemli bir rol oynaması muhtemeldir. En son gelişmeler ve en iyi uygulamalar hakkında bilgi sahibi olmak, bu özelliğin tüm potansiyelinden yararlanmanıza yardımcı olacaktır.