React Suspense-koordinering: Att bemästra parallell datainhämtning

React Suspense har revolutionerat hur vi hanterar asynkrona operationer, särskilt datainhämtning. Det tillåter komponenter att "suspendera" rendering medan de väntar på att data ska laddas, vilket ger ett deklarativt sätt att hantera laddningstillstånd. Men att helt enkelt wrappa enskilda datahämtningar med Suspense kan leda till en vattenfallseffekt, där en hämtning slutförs innan nästa startar, vilket negativt påverkar prestandan. Detta blogginlägg fördjupar sig i avancerade strategier för att samordna flera datahämtningar parallellt med Suspense, optimera din applikations responsivitet och förbättra användarupplevelsen för en global publik.

Att förstå vattenfallsproblemet vid datainhämtning

Föreställ dig ett scenario där du behöver visa en användarprofil med deras namn, avatar och senaste aktivitet. Om du hämtar varje datastycke sekventiellt ser användaren en laddningssnurra för namnet, sedan en annan för avataren och slutligen en för aktivitetsflödet. Detta sekventiella laddningsmönster skapar en vattenfallseffekt, vilket fördröjer renderingen av den kompletta profilen och frustrerar användarna. För internationella användare med varierande nätverkshastigheter kan denna fördröjning bli ännu mer uttalad.

Tänk på detta förenklade kodavsnitt:

function UserProfile() {
  const name = useName(); // Hämtar användarnamn
  const avatar = useAvatar(name); // Hämtar avatar baserat på namn
  const activity = useActivity(name); // Hämtar aktivitet baserat på namn

  return (
    <div>
      <h2>{name}</h2>
      <img src={avatar} alt="User Avatar" />
      <ul>
        {activity.map(item => <li key={item.id}>{item.text}</li>)}
      </ul>
    </div>
  );
}

I detta exempel är useAvatar och useActivity beroende av resultatet av useName. Detta skapar ett tydligt vattenfall – useAvatar och useActivity kan inte börja hämta data förrän useName slutförts. Detta är ineffektivt och en vanlig prestandaflaskhals.

Strategier för parallell datainhämtning med Suspense

Nyckeln till att optimera datainhämtning med Suspense är att initiera alla dataförfrågningar samtidigt. Här är flera strategier du kan använda:

1. Förladda data med `React.preload` och resurser

En av de mest kraftfulla teknikerna är att förladda data innan komponenten ens renderas. Detta innebär att skapa en "resurs" (ett objekt som kapslar in datahämtningslöftet) och förhämta data. `React.preload` hjälper till med detta. När komponenten behöver data är den redan tillgänglig, vilket eliminerar laddningstillståndet nästan helt.

Tänk på en resurs för att hämta en produkt:

const createProductResource = (productId) => {
  let promise;
  let product;
  let error;

  const suspender = new Promise((resolve, reject) => {
    promise = fetch(`/api/products/${productId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        product = data;
        resolve();
      })
      .catch(e => {
        error = e;
        reject(e);
      });
  });

  return {
    read() {
      if (error) {
        throw error;
      }
      if (product) {
        return product;
      }
      throw suspender;
    },
  };
};

// Användning:
const productResource = createProductResource(123);

function ProductDetails() {
  const product = productResource.read();
  return (<div>{product.name}</div>);
}

Nu kan du förladda denna resurs innan ProductDetails-komponenten renderas. Till exempel under ruttövergångar eller vid hovring.

React.preload(productResource);

Detta säkerställer att data sannolikt är tillgängliga när ProductDetails-komponenten behöver dem, vilket minimerar eller eliminerar laddningstillståndet.

2. Använda `Promise.all` för samtidig datainhämtning

En annan enkel och effektiv metod är att använda Promise.all för att initiera alla datahämtningar samtidigt inom en enda Suspense-gräns. Detta fungerar bra när databeroenden är kända i förväg.

Låt oss återbesöka användarprofilexemplet. Istället för att hämta data sekventiellt kan vi hämta namn, avatar och aktivitetsflöde samtidigt:

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

async function fetchName() {
  // Simulera API-anrop
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // Simulera API-anrop
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // Simulera API-anrop
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Posted a photo' },
    { id: 2, text: 'Updated profile' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

function Name() {
  const name = useSuspense(fetchName());
  return <h2>{name}</h2>;
}

function Avatar({ name }) {
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="User Avatar" />;
}

function Activity({ name }) {
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const name = useSuspense(fetchName());
  return (
    <div>
      <Suspense fallback=<div>Loading Avatar...</div>>
        <Avatar name={name} />
      </Suspense>
      <Suspense fallback=<div>Loading Activity...</div>>
        <Activity name={name} />
      </Suspense>
    </div>
  );
}

export default UserProfile;

Men om Avatar och Activity också förlitar sig på fetchName, men renderas inom separata suspensgränser, kan du lyfta fetchName-löftet till föräldern och tillhandahålla det via React Context.

import React, { createContext, useContext, useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // Simulera API-anrop
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // Simulera API-anrop
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // Simulera API-anrop
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Posted a photo' },
    { id: 2, text: 'Updated profile' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

const NamePromiseContext = createContext(null);

function Avatar() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="User Avatar" />;
}

function Activity() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const namePromise = fetchName();

  return (
    <NamePromiseContext.Provider value={namePromise}>
      <Suspense fallback=<div>Loading Avatar...</div>>
        <Avatar />
      </Suspense>
      <Suspense fallback=<div>Loading Activity...</div>>
        <Activity />
      </Suspense>
    </NamePromiseContext.Provider>
  );
}

export default UserProfile;

3. Använda en anpassad Hook för att hantera parallella hämtningar

För mer komplexa scenarier med potentiellt villkorliga databeroenden kan du skapa en anpassad hook för att hantera den parallella datainhämtningen och returnera en resurs som Suspense kan använda.

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

function useParallelData(fetchFunctions) {
  const [resource, setResource] = useState(null);
  const mounted = useRef(true);

  useEffect(() => {
    mounted.current = true;
    const promises = fetchFunctions.map(fn => fn());

    const suspender = Promise.all(promises).then(
      (results) => {
        if (mounted.current) {
          setResource({ status: 'success', value: results });
        }
      },
      (error) => {
        if (mounted.current) {
          setResource({ status: 'error', value: error });
        }
      }
    );

    setResource({
      status: 'pending',
      value: suspender,
    });

    return () => {
      mounted.current = false;
    };
  }, [fetchFunctions]);

  const read = () => {
    if (!resource) {
      throw new Error('Resource not yet initialized');
    }
    if (resource.status === 'pending') {
      throw resource.value;
    }
    if (resource.status === 'error') {
      throw resource.value;
    }
    return resource.value;
  };

  return { read };
}

// Exempel användning:
async function fetchUserData(userId) {
  // Simulera API-anrop
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'User ' + userId };
}

async function fetchUserPosts(userId) {
  // Simulera API-anrop
  await new Promise(resolve => setTimeout(resolve, 500));
  return [{ id: 1, title: 'Post 1' }, { id: 2, title: 'Post 2' }];
}

function UserProfile({ userId }) {
  const { read } = useParallelData([
    () => fetchUserData(userId),
    () => fetchUserPosts(userId),
  ]);

  const [userData, userPosts] = read();

  return (
    <div>
      <h2>{userData.name}</h2>
      <ul>
        {userPosts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback=<div>Loading user data...</div>>
      <UserProfile userId={123} />
    </Suspense>
  );
}

export default App;

Denna metod inkapslar komplexiteten i att hantera löften och laddningstillstånd inom hooken, vilket gör komponentkoden renare och mer fokuserad på att rendera data.

4. Selektiv hydrering med streaming server rendering

För serverrenderade applikationer introducerar React 18 selektiv hydrering med streaming server rendering. Detta gör att du kan skicka HTML till klienten i bitar allt eftersom den blir tillgänglig på servern. Du kan wrappa långsamt laddande komponenter med <Suspense>-gränser, vilket gör att resten av sidan blir interaktiv medan de långsamma komponenterna fortfarande laddas på servern. Detta förbättrar avsevärt den upplevda prestandan, särskilt för användare med långsamma nätverksanslutningar eller enheter.

Tänk dig ett scenario där en nyhetswebbplats behöver visa artiklar från olika regioner i världen (t.ex. Asien, Europa, Amerika). Vissa datakällor kan vara långsammare än andra. Selektiv hydrering gör det möjligt att visa artiklar från snabbare regioner först, medan de från långsammare regioner fortfarande laddas, vilket förhindrar att hela sidan blockeras.

Hantering av fel och laddningstillstånd

Medan Suspense förenklar hanteringen av laddningstillstånd är felhantering fortfarande avgörande. Felgränser (med hjälp av componentDidCatch livscykelmetoden eller useErrorBoundary-hooken från bibliotek som `react-error-boundary`) gör att du elegant kan hantera fel som uppstår under datainhämtning eller rendering. Dessa felgränser bör placeras strategiskt för att fånga fel inom specifika Suspense-gränser, vilket förhindrar att hela applikationen kraschar.

import React, { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function MyComponent() {
  // ... hämtar data som kan generera fel
}

function App() {
  return (
    <ErrorBoundary fallback={<div>Something went wrong!</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

Kom ihåg att tillhandahålla informativt och användarvänligt fallback-UI för både laddnings- och feltillstånd. Detta är särskilt viktigt för internationella användare som kan stöta på långsammare nätverkshastigheter eller regionala serviceavbrott.

Bästa praxis för att optimera datainhämtning med Suspense

• Identifiera och prioritera kritisk data: Avgör vilken data som är väsentlig för den initiala renderingen av din applikation och prioritera att hämta den datan först.
• Förladda data när det är möjligt: Använd `React.preload` och resurser för att förladda data innan komponenter behöver det, vilket minimerar laddningstillstånd.
• Hämta data samtidigt: Använd `Promise.all` eller anpassade hooks för att initiera flera datahämtningar parallellt.
• Optimera API-slutpunkter: Se till att dina API-slutpunkter är optimerade för prestanda, vilket minimerar latens och payloadstorlek. Överväg att använda tekniker som GraphQL för att hämta bara den data du behöver.
• Implementera caching: Cache:a data som används ofta för att minska antalet API-förfrågningar. Överväg att använda bibliotek som `swr` eller `react-query` för robusta cachingmöjligheter.
• Använd kodsplittring: Dela upp din applikation i mindre bitar för att minska den initiala laddningstiden. Kombinera kodsplittring med Suspense för att gradvis ladda och rendera olika delar av din applikation.
• Övervaka prestanda: Övervaka regelbundet din applikations prestanda med verktyg som Lighthouse eller WebPageTest för att identifiera och åtgärda prestandaflaskhalsar.
• Hantering av fel på ett elegant sätt: Implementera felgränser för att fånga fel under datainhämtning och rendering, vilket ger informativa felmeddelanden till användarna.
• Överväg server-side rendering (SSR): Av SEO- och prestandaskäl, överväg att använda SSR med streaming och selektiv hydrering för att leverera en snabbare initial upplevelse.

Slutsats

React Suspense, i kombination med strategier för parallell datainhämtning, tillhandahåller en kraftfull verktygslåda för att bygga responsiva och högpresterande webbapplikationer. Genom att förstå vattenfallsproblemet och implementera tekniker som förladdning, samtidig hämtning med Promise.all och anpassade hooks, kan du avsevärt förbättra användarupplevelsen. Kom ihåg att hantera fel på ett elegant sätt och övervaka prestanda för att säkerställa att din applikation förblir optimerad för användare över hela världen. När React fortsätter att utvecklas kommer utforskningen av nya funktioner som selektiv hydrering med streaming server rendering ytterligare att förbättra din förmåga att leverera exceptionella användarupplevelser, oavsett plats eller nätverksförhållanden. Genom att omfamna dessa tekniker kan du skapa applikationer som inte bara är funktionella utan också en glädje att använda för din globala publik.

Detta blogginlägg har syftat till att ge en omfattande översikt över parallella datainhämtningsstrategier med React Suspense. Vi hoppas att du tyckte att det var informativt och hjälpsamt. Vi uppmuntrar dig att experimentera med dessa tekniker i dina egna projekt och dela dina resultat med communityn.