React Suspense: Veri Getirme ve Kod Bölme İçin Kapsamlı Bir Kılavuz

React Suspense, React 16.6'da tanıtılan ve bir şey beklerken (veri yüklenmesi veya kodun indirilmesi gibi) bileşen oluşturmayı "askıya almanızı" sağlayan güçlü bir özelliktir. Bu, yükleme durumlarını yönetmek ve eşzamansız işlemleri zarif bir şekilde ele alarak kullanıcı deneyimini iyileştirmek için açıklayıcı bir yol sağlar. Bu kılavuz, Suspense kavramlarını, kullanım durumlarını ve React uygulamalarınızda nasıl uygulanacağına dair pratik örnekleri size anlatacaktır.

React Suspense Nedir?

Suspense, diğer bileşenleri saran ve bu bileşenler bir sözün çözümlenmesini beklerken bir geri dönüş UI'si (örneğin, bir yükleme çarkı) görüntülemenizi sağlayan bir React bileşenidir. Bu söz şunlarla ilgili olabilir:

• Veri getirme: Bir API'den veri alınmasını beklemek.
• Kod bölme: JavaScript modüllerinin indirilmesini ve ayrıştırılmasını beklemek.

Suspense'den önce, yükleme durumlarını yönetmek genellikle karmaşık koşullu oluşturmayı ve eşzamansız işlemlerin manuel olarak ele alınmasını içeriyordu. Suspense, açıklayıcı bir yaklaşım sağlayarak bunu basitleştirir, kodunuzu daha temiz ve daha sürdürülebilir hale getirir.

Temel Kavramlar

• Suspense Bileşeni: <Suspense> bileşeninin kendisi. Sarılı bileşenler askıdayken görüntülenecek UI'yi belirten bir fallback prop'unu kabul eder.
• React.lazy(): Bileşenleri dinamik olarak içe aktararak kod bölmeyi sağlayan bir fonksiyon. Bileşen yüklendiğinde çözümlenen bir Promise döndürür.
• Promise Entegrasyonu: Suspense, Promise'larla sorunsuz bir şekilde entegre olur. Bir bileşen henüz çözümlenmemiş bir Promise'tan veri işlemeye çalıştığında, "askıya alınır" ve geri dönüş UI'sini görüntüler.

Kullanım Alanları

1. Suspense ile Veri Getirme

Suspense için birincil kullanım durumlarından biri, veri getirmeyi yönetmektir. Koşullu oluşturma ile yükleme durumlarını manuel olarak yönetmek yerine, verilerin gelmesini beklerken açıklayıcı bir şekilde bir yükleme göstergesi görüntülemek için Suspense'i kullanabilirsiniz.

Örnek: Bir API'den kullanıcı verilerini getirme

Bir API'den getirilen kullanıcı verilerini görüntüleyen bir bileşeniniz olduğunu varsayalım. Suspense olmadan, şöyle bir kodunuz olabilir:

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Kullanıcı verileri yükleniyor...</p>;
  }

  if (error) {
    return <p>Hata: {error.message}</p>;
  }

  if (!user) {
    return <p>Kullanıcı verisi yok.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>E-posta: {user.email}</p>
    </div>
  );
}

export default UserProfile;

Bu kod çalışır, ancak birden çok durum değişkenini (isLoading, error, user) ve koşullu oluşturma mantığını yönetmeyi içerir. Suspense ile, Suspense ile sorunsuz bir şekilde çalışmak üzere tasarlanmış SWR veya TanStack Query (eski adıyla React Query) gibi bir veri getirme kitaplığı kullanarak bunu basitleştirebilirsiniz.

İşte Suspense ile SWR'yi nasıl kullanabileceğiniz:

import React from 'react';
import useSWR from 'swr';

// Basit bir fetcher fonksiyonu
const fetcher = (...args) => fetch(...args).then(res => res.json());

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

  if (error) {
    return <p>Hata: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>E-posta: {user.email}</p>
    </div>
  );
}

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

export default App;

Bu örnekte:

• Kullanıcı verilerini getirmek için useSWR kullanıyoruz. suspense: true seçeneği, SWR'ye veri henüz kullanılabilir değilse bir Promise atmasını söyler.
• UserProfile bileşeninin yükleme veya hata durumlarını açıkça yönetmesi gerekmez. Sadece kullanıcı verilerini kullanılabilir olduğunda işler.
• <Suspense> bileşeni, SWR tarafından atılan Promise'ı yakalar ve veri getirilirken geri dönüş UI'sini (<p>Kullanıcı verileri yükleniyor...</p>) görüntüler.

Bu yaklaşım, bileşen mantığınızı basitleştirir ve veri getirmeyi akıl yürütmeyi kolaylaştırır.

Veri Getirme için Küresel Hususlar:

Küresel bir kitle için uygulamalar oluştururken, aşağıdakileri göz önünde bulundurun:

• Ağ Gecikmesi: Farklı coğrafi konumlardaki kullanıcılar, farklı ağ gecikmeleri yaşayabilir. Suspense, uzak sunuculardan veri getirilirken yükleme göstergeleri görüntüleyerek daha iyi bir kullanıcı deneyimi sağlamaya yardımcı olabilir. Verilerinizi kullanıcılarınıza daha yakın bir yerde önbelleğe almak için bir İçerik Dağıtım Ağı (CDN) kullanmayı düşünün.
• Veri Yerelleştirme: API'nizin veri yerelleştirmeyi desteklediğinden emin olun ve verileri kullanıcının tercih ettiği dil ve biçimde sunmanıza olanak tanıyın.
• API Kullanılabilirliği: Tutarlı bir kullanıcı deneyimi sağlamak için API'lerinizin kullanılabilirliğini ve performansını farklı bölgelerden izleyin.

2. React.lazy() ve Suspense ile Kod Bölme

Kod bölme, uygulamanızı isteğe bağlı olarak yüklenebilen daha küçük parçalara ayırma tekniğidir. Bu, özellikle büyük ve karmaşık projeler için uygulamanızın ilk yükleme süresini önemli ölçüde iyileştirebilir.

React, bileşenleri kod bölmek için React.lazy() fonksiyonunu sağlar. Suspense ile birlikte kullanıldığında, bileşenin indirilmesini ve ayrıştırılmasını beklerken bir geri dönüş UI'si görüntülemenizi sağlar.

Örnek: Bir bileşeni tembel yükleme

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>Yükleniyor...</p>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

Bu örnekte:

• OtherComponent'i dinamik olarak içe aktarmak için React.lazy() kullanıyoruz. Bu, bileşen yüklendiğinde çözümlenen bir Promise döndürür.
• <OtherComponent />'i <Suspense> ile sarıyoruz ve bir fallback prop'u sağlıyoruz.
• OtherComponent yüklenirken, geri dönüş UI'si (<p>Yükleniyor...</p>) görüntülenecektir. Bileşen yüklendiğinde, geri dönüş UI'sinin yerini alacaktır.

Kod Bölmenin Faydaları:

• İyileştirilmiş İlk Yükleme Süresi: İlk görünüm için yalnızca gerekli kodu yükleyerek, uygulamanızın etkileşimli hale gelmesi için gereken süreyi azaltabilirsiniz.
• Azaltılmış Paket Boyutu: Kod bölme, uygulamanızın JavaScript paketinin genel boyutunu azaltmaya yardımcı olabilir, bu da özellikle düşük bant genişliğine sahip bağlantılarda performansı iyileştirebilir.
• Daha İyi Kullanıcı Deneyimi: Daha hızlı bir ilk yükleme sağlayarak ve yalnızca gerektiğinde kod yükleyerek, daha akıcı ve daha duyarlı bir kullanıcı deneyimi oluşturabilirsiniz.

Gelişmiş Kod Bölme Teknikleri:

• Rota Tabanlı Kod Bölme: Uygulamanızı rotalara göre bölün, böylece her rota yalnızca ihtiyaç duyduğu kodu yükler. Bu, React Router gibi kitaplıklarla kolayca elde edilebilir.
• Bileşen Tabanlı Kod Bölme: Özellikle büyük veya seyrek kullanılan bileşenler için, ayrı bileşenleri ayrı parçalara bölün.
• Dinamik İçe Aktarmalar: Kullanıcı etkileşimlerine veya diğer koşullara bağlı olarak isteğe bağlı olarak kod yüklemek için bileşenlerinizde dinamik içe aktarmalar kullanın.

3. Eşzamanlı Mod ve Suspense

Suspense, React'in birden çok görev üzerinde eşzamanlı olarak çalışmasını sağlayan bir dizi yeni özellik olan React'in Eşzamanlı Modu için önemli bir bileşendir. Eşzamanlı Mod, React'in önemli güncellemeleri önceliklendirmesine, uzun süren görevleri kesintiye uğratmasına ve uygulamanızın yanıt verme hızını artırmasına olanak tanır.

Eşzamanlı Mod ve Suspense ile React şunları yapabilir:

• Tüm veriler kullanılabilir olmadan önce bileşenleri işlemeye başlayın: React, veri bağımlılıklarının bazıları hala getiriliyorsa bile bir bileşeni işlemeye başlayabilir. Bu, React'in daha erken bir zamanda kısmi bir UI göstermesine olanak tanır ve uygulamanızın algılanan performansını artırır.
• İşlemeyi kesintiye uğratın ve devam ettirin: React bir bileşeni işlerken daha yüksek öncelikli bir güncelleme gelirse, işleme sürecini kesintiye uğratabilir, daha yüksek öncelikli güncellemeyi işleyebilir ve ardından bileşeni daha sonra işlemeye devam edebilir.
• Ana iş parçacığını engellemeyi önleyin: Eşzamanlı Mod, React'in ana iş parçacığını engellemeden uzun süren görevleri gerçekleştirmesine olanak tanır, bu da UI'nin yanıt vermemesini önleyebilir.

Eşzamanlı Modu etkinleştirmek için React 18'de createRoot API'sini kullanabilirsiniz:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // Bir kök oluşturun.
root.render(<App />);

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

• Veri Getirme Kitaplığı Kullanın: Suspense ile sorunsuz bir şekilde çalışmak üzere tasarlanmış SWR veya TanStack Query gibi bir veri getirme kitaplığı kullanmayı düşünün. Bu kitaplıklar, veri getirme mantığınızı basitleştirebilecek önbelleğe alma, otomatik yeniden deneme ve hata işleme gibi özellikler sağlar.
• Anlamlı Geri Dönüş UI'si Sağlayın: Geri dönüş UI'si, bir şeyin yüklendiğine dair net bir gösterge sağlamalıdır. Görsel olarak çekici ve bilgilendirici bir yükleme deneyimi oluşturmak için döndürücüler, ilerleme çubukları veya iskelet yükleyiciler kullanın.
• Hataları Zarifçe İşleyin: İşleme sırasında oluşan hataları yakalamak için Hata Sınırları kullanın. Bu, tüm uygulamanızın çökmesini önleyebilir ve daha iyi bir kullanıcı deneyimi sağlayabilir.
• Kod Bölmeyi Optimize Edin: Uygulamanızın ilk yükleme süresini azaltmak için kod bölmeyi stratejik olarak kullanın. Büyük veya seyrek kullanılan bileşenleri belirleyin ve bunları ayrı parçalara bölün.
• Suspense Uygulamanızı Test Edin: Suspense uygulamanızın doğru çalıştığından ve uygulamanızın yükleme durumlarını ve hataları zarifçe işlediğinden emin olmak için iyice test edin.

Hata Sınırları ile Hata İşleme

Suspense *yükleme* durumunu işlerken, Hata Sınırları işleme sırasında *hata* durumunu işler. Hata Sınırları, alt bileşen ağacındaki herhangi bir yerdeki JavaScript hatalarını yakalayan, bu hataları günlüğe kaydeden ve tüm bileşen ağacını çökertmek yerine bir geri dönüş UI'si görüntüleyen React bileşenleridir.

İşte bir Hata Sınırının temel bir örneği:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Durumu güncelleyin, böylece sonraki işleme geri dönüş UI'sini gösterecektir.
    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 geri dönüş UI'si işleyebilirsiniz
      return <h1>Bir şeyler ters gitti.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Hata Sınırını kullanmak için, hataya neden olabilecek bileşenin etrafına sarın:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

Suspense ve Hata Sınırlarını birleştirerek, hem yükleme durumlarını hem de hataları zarifçe işleyen sağlam ve esnek bir uygulama oluşturabilirsiniz.

Gerçek Dünya Örnekleri

İşte Suspense'in kullanıcı deneyimini iyileştirmek için nasıl kullanılabileceğine dair birkaç gerçek dünya örneği:

• E-ticaret Web Sitesi: Ürün ayrıntılarını veya resimlerini getirirken yükleme göstergeleri görüntülemek için Suspense kullanın. Bu, kullanıcının verilerin yüklenmesini beklerken boş bir sayfa görmesini önleyebilir.
• Sosyal Medya Platformu: Kullanıcı sayfayı aşağı kaydırdıkça yorumları veya gönderileri tembel yüklemek için Suspense kullanın. Bu, sayfanın ilk yükleme süresini iyileştirebilir ve indirilmesi gereken veri miktarını azaltabilir.
• Pano Uygulaması: Grafik veya çizelgeler için veri getirirken yükleme göstergeleri görüntülemek için Suspense kullanın. Bu, daha akıcı ve daha duyarlı bir kullanıcı deneyimi sağlayabilir.

Örnek: Uluslararası E-ticaret Platformu

Küresel olarak ürün satan uluslararası bir e-ticaret platformunu düşünün. Platform, Suspense ve React.lazy()'yi şunları yapmak için kullanabilir:

• Ürün Resimlerini Tembel Yükleme: Ürün resimlerini yalnızca görünüm alanında göründüklerinde yüklemek için React.lazy() kullanın. Bu, ürün listeleme sayfasının ilk yükleme süresini önemli ölçüde azaltabilir. Gerçek resim yüklenirken bir yer tutucu resim görüntülemek için her tembel yüklenmiş resmi <Suspense fallback={<img src="placeholder.png" alt="Yükleniyor..." />}> ile sarın.
• Ülkeye Özgü Bileşenleri Kodla Bölme: Platformda ülkeye özgü bileşenler varsa (örneğin, para birimi biçimlendirme, adres giriş alanları), bu bileşenleri yalnızca kullanıcı belirli bir ülke seçtiğinde yüklemek için React.lazy() kullanın.
• Yerelleştirilmiş Ürün Açıklamalarını Getirme: Kullanıcının tercih ettiği dilde ürün açıklamalarını getirmek için Suspense ile SWR gibi bir veri getirme kitaplığı kullanın. Yerelleştirilmiş açıklamalar getirilirken bir yükleme göstergesi görüntüleyin.

Sonuç

React Suspense, React uygulamalarınızın kullanıcı deneyimini önemli ölçüde iyileştirebilecek güçlü bir özelliktir. Yükleme durumlarını ve kod bölmeyi yönetmek için açıklayıcı bir yol sağlayarak, Suspense kodunuzu basitleştirir ve eşzamansız işlemleri akıl yürütmeyi kolaylaştırır. İster küçük bir kişisel proje, ister büyük bir kurumsal uygulama oluşturuyor olun, Suspense daha akıcı, daha duyarlı ve daha yüksek performanslı bir kullanıcı deneyimi oluşturmanıza yardımcı olabilir.

Suspense'i veri getirme kitaplıkları ve kod bölme teknikleriyle entegre ederek, React'in Eşzamanlı Modunun tüm potansiyelini ortaya çıkarabilir ve gerçekten modern ve ilgi çekici web uygulamaları oluşturabilirsiniz. Suspense'i benimseyin ve React geliştirmenizi bir sonraki seviyeye taşıyın.

Daha Fazla Öğrenme

• React Suspense Belgeleri
• SWR Belgeleri
• TanStack Query Belgeleri
• React 18 Duyurusu (Eşzamanlı Mod)