M

MLOG

Hrvatski

Otključajte efikasno dohvaćanje podataka u Reactu uz Suspense! Istražite različite strategije, od učitavanja na razini komponente do paralelnog dohvaćanja podataka, i izgradite responzivne, korisnički-prijateljske aplikacije.

React Suspense: Strategije dohvaćanja podataka za moderne aplikacije

React Suspense je moćna značajka predstavljena u Reactu 16.6 koja pojednostavljuje rukovanje asinkronim operacijama, posebno dohvaćanjem podataka. Omogućuje vam da "suspendirate" renderiranje komponente dok čekate da se podaci učitaju, pružajući deklarativniji i korisnički-prijateljskiji način za upravljanje stanjima učitavanja. Ovaj vodič istražuje različite strategije dohvaćanja podataka koristeći React Suspense i nudi praktične uvide u izgradnju responzivnih i performansnih aplikacija.

Razumijevanje React Suspensea

Prije nego što zaronimo u specifične strategije, shvatimo osnovne koncepte React Suspensea:

Strategije dohvaćanja podataka sa Suspenseom

Ovdje je nekoliko učinkovitih strategija dohvaćanja podataka koristeći React Suspense:

1. Dohvaćanje podataka na razini komponente

Ovo je najjednostavniji pristup, gdje svaka komponenta dohvaća vlastite podatke unutar Suspense granice. Prikladan je za jednostavne komponente s neovisnim zahtjevima za podacima.

Primjer:

Recimo da imamo UserProfile komponentu koja treba dohvatiti korisničke podatke s API-ja:

// Jednostavna funkcija za dohvaćanje podataka (zamijenite je svojom omiljenom bibliotekom)
const fetchData = (url) => {
  let status = 'pending';
  let result;
  let suspender = fetch(url)
    .then(res => {
      if (!res.ok) {
        throw new Error(`HTTP error! Status: ${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>Učitavanje korisničkih podataka...</div>}>
      <UserProfile />
    </Suspense>
  );
}

Objašnjenje:

Prednosti:

Nedostaci:

2. Paralelno dohvaćanje podataka

Kako biste izbjegli "waterfall" dohvaćanje, možete pokrenuti više zahtjeva za podacima istovremeno i koristiti Promise.all ili slične tehnike kako biste pričekali da se svi završe prije renderiranja komponenti. To minimizira ukupno vrijeme učitavanja.

Primjer:

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>Objave:</h3>
      <ul>
        {posts.map(post => (<li key={post.id}>{post.title}</li>))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<div>Učitavanje korisničkih podataka i objava...</div>}>
      <UserProfile />
    </Suspense>
  );
}

Objašnjenje:

Prednosti:

Nedostaci:

3. Selektivna hidratacija (za Server-Side Rendering - SSR)

Kada se koristi Server-Side Rendering (SSR), Suspense se može koristiti za selektivnu hidrataciju dijelova stranice. To znači da možete dati prioritet hidrataciji najvažnijih dijelova stranice, poboljšavajući Time to Interactive (TTI) i percipirane performanse. Ovo je korisno u scenarijima gdje želite prikazati osnovni izgled ili ključni sadržaj što je brže moguće, dok odgađate hidrataciju manje kritičnih komponenti.

Primjer (konceptualni):

// Na strani poslužitelja:
<Suspense fallback={<div>Učitavanje ključnog sadržaja...</div>}>
  <CriticalContent />
</Suspense>
<Suspense fallback={<div>Učitavanje opcionalnog sadržaja...</div>}>
  <OptionalContent />
</Suspense>

Objašnjenje:

Prednosti:

Nedostaci:

4. Biblioteke za dohvaćanje podataka s podrškom za Suspense

Nekoliko popularnih biblioteka za dohvaćanje podataka ima ugrađenu podršku za React Suspense. Te biblioteke često pružaju praktičniji i učinkovitiji način za dohvaćanje podataka i integraciju sa Suspenseom. Neki značajni primjeri uključuju:

Primjer (koristeći SWR):

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>učitavanje nije uspjelo</div>
  if (!user) return <div>učitavanje...</div> // Ovo se vjerojatno nikada ne renderira sa Suspenseom

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

function App() {
  return (
    <Suspense fallback={<div>Učitavanje korisničkih podataka...</div>}>
      <UserProfile />
    </Suspense>
  );
}

Objašnjenje:

Prednosti:

Nedostaci:

Rukovanje pogreškama sa Suspenseom

Rukovanje pogreškama je ključno kada se koristi Suspense. React pruža komponentu ErrorBoundary za hvatanje pogrešaka koje se dogode unutar Suspense granica.

Primjer:

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

  static getDerivedStateFromError(error) {
    // Ažurirajte stanje kako bi sljedeće renderiranje prikazalo rezervno sučelje.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Pogrešku također možete zabilježiti u servisu za izvještavanje o pogreškama
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Možete renderirati bilo koje prilagođeno rezervno sučelje
      return <h1>Nešto je pošlo po zlu.</h1>;
    }

    return this.props.children; 
  }
}

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Učitavanje...</div>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  );
}

Objašnjenje:

Najbolje prakse za korištenje React Suspensea

Primjeri iz stvarnog svijeta

React Suspense se može primijeniti u različitim scenarijima, uključujući:

Primjer 1: Međunarodna e-commerce platforma

Zamislite e-commerce platformu koja opslužuje kupce u različitim zemljama. Detalji o proizvodima, kao što su cijene i opisi, možda će se morati dohvatiti na temelju lokacije korisnika. Suspense se može koristiti za prikazivanje indikatora učitavanja dok se dohvaćaju lokalizirane informacije o proizvodu.

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

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Cijena: {product.price}</p>
      <p>Opis: {product.description}</p>
    </div>
  );
}

function App() {
  const userLocale = getUserLocale(); // Funkcija za određivanje korisničke lokalizacije
  return (
    <Suspense fallback={<div>Učitavanje detalja o proizvodu...</div>}>
      <ProductDetails productId="123" locale={userLocale} />
    </Suspense>
  );
}

Primjer 2: Globalni feed društvenih medija

Razmotrite platformu društvenih medija koja prikazuje feed objava korisnika diljem svijeta. Svaka objava može uključivati tekst, slike i videozapise, čije učitavanje može trajati različito vrijeme. Suspense se može koristiti za prikazivanje zamjenskih elemenata za pojedinačne objave dok se njihov sadržaj učitava, pružajući glađe iskustvo scrollanja.

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="Slika objave" />}
      {post.video && <video src={post.video} controls />}
    </div>
  );
}

function App() {
  const postIds = getPostIds(); // Funkcija za dohvaćanje popisa ID-jeva objava
  return (
    <div>
      {postIds.map(postId => (
        <Suspense key={postId} fallback={<div>Učitavanje objave...</div>}>
          <Post postId={postId} />
        </Suspense>
      ))}
    </div>
  );
}

Zaključak

React Suspense je moćan alat za upravljanje asinkronim dohvaćanjem podataka u React aplikacijama. Razumijevanjem različitih strategija dohvaćanja podataka i najboljih praksi, možete izgraditi responzivne, korisnički-prijateljske i performansne aplikacije koje pružaju izvrsno korisničko iskustvo. Eksperimentirajte s različitim strategijama i bibliotekama kako biste pronašli najbolji pristup za svoje specifične potrebe.

Kako se React nastavlja razvijati, Suspense će vjerojatno igrati još značajniju ulogu u dohvaćanju i renderiranju podataka. Informiranje o najnovijim razvojima i najboljim praksama pomoći će vam da iskoristite puni potencijal ove značajke.

React Suspense: Strategije dohvaćanja podataka za moderne aplikacije | MLOG