React Suspense: Eine umfassende Anleitung zu Datenabruf und Code-Splitting

React Suspense ist eine leistungsstarke Funktion, die in React 16.6 eingef\u00fchrt wurde und es Ihnen erm\u00f6glicht, das Rendern von Komponenten zu "suspendieren", w\u00e4hrend auf etwas gewartet wird, z. B. auf das Laden von Daten oder das Herunterladen von Code. Dies bietet eine deklarative M\u00f6glichkeit, Ladestatus zu verwalten und die Benutzererfahrung durch die elegante Handhabung asynchroner Operationen zu verbessern. Dieser Leitfaden f\u00fchrt Sie durch die Konzepte von Suspense, seine Anwendungsf\u00e4lle und praktische Beispiele f\u00fcr die Implementierung in Ihren React-Anwendungen.

Was ist React Suspense?

Suspense ist eine React-Komponente, die andere Komponenten umschliesst und es Ihnen erm\u00f6glicht, eine Fallback-UI (z. B. einen Lade-Spinner) anzuzeigen, w\u00e4hrend diese Komponenten darauf warten, dass ein Promise aufgel\u00f6st wird. Dieses Promise k\u00f6nnte sich beziehen auf:

• Datenabruf: Warten auf das Abrufen von Daten von einer API.
• Code-Splitting: Warten auf das Herunterladen und Parsen von JavaScript-Modulen.

Vor Suspense beinhaltete die Verwaltung von Ladestatus oft komplexes bedingtes Rendern und die manuelle Handhabung asynchroner Operationen. Suspense vereinfacht dies, indem es einen deklarativen Ansatz bietet, der Ihren Code sauberer und wartungsfreundlicher macht.

Schl\u00fcsselkonzepte

• Suspense-Komponente: Die <Suspense>-Komponente selbst. Sie akzeptiert ein fallback-Prop, das die UI angibt, die angezeigt werden soll, w\u00e4hrend die umschlossenen Komponenten suspendieren.
• React.lazy(): Eine Funktion, die Code-Splitting durch dynamisches Importieren von Komponenten erm\u00f6glicht. Sie gibt ein Promise zur\u00fcck, das aufgel\u00f6st wird, wenn die Komponente geladen ist.
• Promise-Integration: Suspense integriert sich nahtlos in Promises. Wenn eine Komponente versucht, Daten von einem Promise zu rendern, das noch nicht aufgel\u00f6st wurde, wird sie "suspendiert" und zeigt die Fallback-UI an.

Anwendungsf\u00e4lle

1. Datenabruf mit Suspense

Einer der Hauptanwendungsf\u00e4lle f\u00fcr Suspense ist die Verwaltung des Datenabrufs. Anstatt Ladestatus manuell mit bedingtem Rendern zu verwalten, k\u00f6nnen Sie Suspense verwenden, um deklarativ einen Ladeindikator anzuzeigen, w\u00e4hrend auf das Eintreffen von Daten gewartet wird.

Beispiel: Abrufen von Benutzerdaten von einer API

Nehmen wir an, Sie haben eine Komponente, die Benutzerdaten anzeigt, die von einer API abgerufen wurden. Ohne Suspense h\u00e4tten Sie m\u00f6glicherweise Code wie diesen:

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>Loading user data...</p>;
  }

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

  if (!user) {
    return <p>No user data available.</p>;
  }

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

export default UserProfile;

Dieser Code funktioniert, beinhaltet aber die Verwaltung mehrerer Zustandsvariablen (isLoading, error, user) und bedingte Renderlogik. Mit Suspense k\u00f6nnen Sie dies mit einer Datenabrufbibliothek wie SWR oder TanStack Query (ehemals React Query) vereinfachen, die so konzipiert sind, dass sie nahtlos mit Suspense zusammenarbeiten.

So k\u00f6nnten Sie SWR mit Suspense verwenden:

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

// A simple fetcher function
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>Error: {error.message}</p>;
  }

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

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

export default App;

In diesem Beispiel:

• Wir verwenden useSWR, um die Benutzerdaten abzurufen. Die Option suspense: true weist SWR an, ein Promise auszul\u00f6sen, wenn die Daten noch nicht verf\u00fcgbar sind.
• Die UserProfile-Komponente muss keine Lade- oder Fehlerzust\u00e4nde explizit verwalten. Sie rendert einfach die Benutzerdaten, wenn sie verf\u00fcgbar sind.
• Die <Suspense>-Komponente f\u00e4ngt das von SWR ausgel\u00f6ste Promise ab und zeigt die Fallback-UI (<p>Loading user data...</p>) an, w\u00e4hrend die Daten abgerufen werden.

Dieser Ansatz vereinfacht Ihre Komponentenlogik und erleichtert das Nachvollziehen des Datenabrufs.

Globale \u00dcberlegungen zum Datenabruf:

Ber\u00fccksichtigen Sie bei der Entwicklung von Anwendungen f\u00fcr ein globales Publikum Folgendes:

• Netzwerklatenz: Benutzer an verschiedenen geografischen Standorten k\u00f6nnen unterschiedliche Netzwerklatenzen erfahren. Suspense kann dazu beitragen, die Benutzererfahrung zu verbessern, indem Ladeanzeigen angezeigt werden, w\u00e4hrend Daten von entfernten Servern abgerufen werden. Erw\u00e4gen Sie die Verwendung eines Content Delivery Network (CDN), um Ihre Daten n\u00e4her an Ihren Benutzern zu speichern.
• Datenlokalisierung: Stellen Sie sicher, dass Ihre API die Datenlokalisierung unterst\u00fctzt, sodass Sie Daten in der bevorzugten Sprache und im bevorzugten Format des Benutzers bereitstellen k\u00f6nnen.
• API-Verf\u00fcgbarkeit: \u00dcberwachen Sie die Verf\u00fcgbarkeit und Leistung Ihrer APIs aus verschiedenen Regionen, um eine konsistente Benutzererfahrung zu gew\u00e4hrleisten.

2. Code-Splitting mit React.lazy() und Suspense

Code-Splitting ist eine Technik, um Ihre Anwendung in kleinere Teile zu zerlegen, die bei Bedarf geladen werden k\u00f6nnen. Dies kann die anf\u00e4ngliche Ladezeit Ihrer Anwendung erheblich verbessern, insbesondere bei gro\u00dfen und komplexen Projekten.

React bietet die Funktion React.lazy() zum Code-Splitting von Komponenten. In Verbindung mit Suspense k\u00f6nnen Sie eine Fallback-UI anzeigen, w\u00e4hrend auf das Herunterladen und Parsen der Komponente gewartet wird.

Beispiel: Lazy Loading einer Komponente

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

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

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

export default MyComponent;

In diesem Beispiel:

• Wir verwenden React.lazy(), um die OtherComponent dynamisch zu importieren. Dies gibt ein Promise zur\u00fcck, das aufgel\u00f6st wird, wenn die Komponente geladen ist.
• Wir umschliessen die <OtherComponent /> mit <Suspense> und stellen ein fallback-Prop bereit.
• W\u00e4hrend die OtherComponent geladen wird, wird die Fallback-UI (<p>Loading...</p>) angezeigt. Sobald die Komponente geladen ist, ersetzt sie die Fallback-UI.

Vorteile von Code-Splitting:

• Verbesserte anf\u00e4ngliche Ladezeit: Indem Sie nur den notwendigen Code f\u00fcr die anf\u00e4ngliche Ansicht laden, k\u00f6nnen Sie die Zeit verk\u00fcrzen, die Ihre Anwendung ben\u00f6tigt, um interaktiv zu werden.
• Reduzierte Bundle-Gr\u00f6sse: Code-Splitting kann dazu beitragen, die Gesamtgr\u00f6sse des JavaScript-Bundles Ihrer Anwendung zu reduzieren, was die Leistung verbessern kann, insbesondere bei Verbindungen mit geringer Bandbreite.
• Bessere Benutzererfahrung: Durch eine schnellere anf\u00e4ngliche Ladezeit und das Laden von Code nur bei Bedarf k\u00f6nnen Sie eine reibungslosere und reaktionsschnellere Benutzererfahrung schaffen.

Fortgeschrittene Code-Splitting-Techniken:

• Routenbasiertes Code-Splitting: Teilen Sie Ihre Anwendung basierend auf Routen auf, sodass jede Route nur den Code l\u00e4dt, den sie ben\u00f6tigt. Dies kann leicht mit Bibliotheken wie React Router erreicht werden.
• Komponentenbasiertes Code-Splitting: Teilen Sie einzelne Komponenten in separate Teile auf, insbesondere f\u00fcr gro\u00dfe oder selten verwendete Komponenten.
• Dynamische Imports: Verwenden Sie dynamische Imports in Ihren Komponenten, um Code bei Bedarf basierend auf Benutzerinteraktionen oder anderen Bedingungen zu laden.

3. Concurrent Mode und Suspense

Suspense ist eine Schl\u00fcsselkomponente f\u00fcr den Concurrent Mode von React, eine Reihe neuer Funktionen, die es React erm\u00f6glichen, mehrere Aufgaben gleichzeitig auszuf\u00fchren. Der Concurrent Mode erm\u00f6glicht es React, wichtige Aktualisierungen zu priorisieren, l\u00e4nger dauernde Aufgaben zu unterbrechen und die Reaktionsf\u00e4higkeit Ihrer Anwendung zu verbessern.

Mit Concurrent Mode und Suspense kann React:

• Mit dem Rendern von Komponenten beginnen, bevor alle Daten verf\u00fcgbar sind: React kann mit dem Rendern einer Komponente beginnen, auch wenn einige ihrer Datenabh\u00e4ngigkeiten noch abgerufen werden. Dies erm\u00f6glicht es React, fr\u00fcher eine partielle UI anzuzeigen, wodurch die wahrgenommene Leistung Ihrer Anwendung verbessert wird.
• Rendern unterbrechen und fortsetzen: Wenn eine Aktualisierung mit h\u00f6herer Priorit\u00e4t eingeht, w\u00e4hrend React eine Komponente rendert, kann es den Rendering-Prozess unterbrechen, die Aktualisierung mit h\u00f6herer Priorit\u00e4t behandeln und dann das Rendern der Komponente sp\u00e4ter fortsetzen.
• Vermeiden Sie das Blockieren des Haupt-Threads: Der Concurrent Mode erm\u00f6glicht es React, l\u00e4nger dauernde Aufgaben auszuf\u00fchren, ohne den Haupt-Thread zu blockieren, was verhindern kann, dass die UI nicht mehr reagiert.

Um den Concurrent Mode zu aktivieren, k\u00f6nnen Sie die createRoot-API in React 18 verwenden:

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

const container = document.getElementById('root');
const root = createRoot(container); // Create a root.
root.render(<App />);

Best Practices f\u00fcr die Verwendung von Suspense

• Verwenden Sie eine Datenabrufbibliothek: Erw\u00e4gen Sie die Verwendung einer Datenabrufbibliothek wie SWR oder TanStack Query, die so konzipiert sind, dass sie nahtlos mit Suspense zusammenarbeiten. Diese Bibliotheken bieten Funktionen wie Caching, automatische Wiederholungsversuche und Fehlerbehandlung, die Ihre Datenabruflogik vereinfachen k\u00f6nnen.
• Stellen Sie eine aussagekr\u00e4ftige Fallback-UI bereit: Die Fallback-UI sollte einen deutlichen Hinweis darauf geben, dass etwas geladen wird. Verwenden Sie Spinner, Fortschrittsbalken oder Skeleton-Loader, um eine optisch ansprechende und informative Ladeerfahrung zu schaffen.
• Behandeln Sie Fehler elegant: Verwenden Sie Error Boundaries, um Fehler abzufangen, die w\u00e4hrend des Renderns auftreten. Dies kann verhindern, dass Ihre gesamte Anwendung abst\u00fcrzt, und eine bessere Benutzererfahrung bieten.
• Optimieren Sie Code-Splitting: Verwenden Sie Code-Splitting strategisch, um die anf\u00e4ngliche Ladezeit Ihrer Anwendung zu reduzieren. Identifizieren Sie gro\u00dfe oder selten verwendete Komponenten und teilen Sie sie in separate Teile auf.
• Testen Sie Ihre Suspense-Implementierung: Testen Sie Ihre Suspense-Implementierung gr\u00fcndlich, um sicherzustellen, dass sie korrekt funktioniert und dass Ihre Anwendung Ladezust\u00e4nde und Fehler elegant behandelt.

Fehlerbehandlung mit Error Boundaries

W\u00e4hrend Suspense den *Ladezustand* behandelt, behandeln Error Boundaries den *Fehlerzustand* w\u00e4hrend des Renderns. Error Boundaries sind React-Komponenten, die JavaScript-Fehler an beliebiger Stelle in ihrer untergeordneten Komponentenstruktur abfangen, diese Fehler protokollieren und eine Fallback-UI anzeigen, anstatt die gesamte Komponentenstruktur zum Absturz zu bringen.

Hier ist ein einfaches Beispiel f\u00fcr eine Error Boundary:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Um die Error Boundary zu verwenden, umschliessen Sie sie mit der Komponente, die m\u00f6glicherweise einen Fehler ausl\u00f6st:

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

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

export default App;

Durch die Kombination von Suspense und Error Boundaries k\u00f6nnen Sie eine robuste und widerstandsf\u00e4hige Anwendung erstellen, die sowohl Ladezust\u00e4nde als auch Fehler elegant behandelt.

Beispiele aus der Praxis

Hier sind einige Beispiele aus der Praxis, wie Suspense verwendet werden kann, um die Benutzererfahrung zu verbessern:

• E-Commerce-Website: Verwenden Sie Suspense, um Ladeanzeigen anzuzeigen, w\u00e4hrend Produktdetails oder Bilder abgerufen werden. Dies kann verhindern, dass der Benutzer eine leere Seite sieht, w\u00e4hrend auf das Laden der Daten gewartet wird.
• Social-Media-Plattform: Verwenden Sie Suspense, um Kommentare oder Beitr\u00e4ge bei Bedarf zu laden, w\u00e4hrend der Benutzer die Seite nach unten scrollt. Dies kann die anf\u00e4ngliche Ladezeit der Seite verbessern und die Menge der herunterzuladenden Daten reduzieren.
• Dashboard-Anwendung: Verwenden Sie Suspense, um Ladeanzeigen anzuzeigen, w\u00e4hrend Daten f\u00fcr Diagramme oder Grafiken abgerufen werden. Dies kann eine reibungslosere und reaktionsschnellere Benutzererfahrung bieten.

Beispiel: Internationale E-Commerce-Plattform

Betrachten Sie eine internationale E-Commerce-Plattform, die Produkte weltweit verkauft. Die Plattform kann Suspense und React.lazy() nutzen, um:

• Produktbilder bei Bedarf laden: Verwenden Sie React.lazy(), um Produktbilder nur dann zu laden, wenn sie im Anzeigebereich sichtbar sind. Dies kann die anf\u00e4ngliche Ladezeit der Produktlistenseite erheblich reduzieren. Umschliessen Sie jedes bei Bedarf geladene Bild mit <Suspense fallback={<img src="placeholder.png" alt="Loading..." />}>, um ein Platzhalterbild anzuzeigen, w\u00e4hrend das eigentliche Bild geladen wird.
• L\u00e4nderspezifische Komponenten aufteilen: Wenn die Plattform l\u00e4nderspezifische Komponenten hat (z. B. W\u00e4hrungsformatierung, Adresseneingabefelder), verwenden Sie React.lazy(), um diese Komponenten nur dann zu laden, wenn der Benutzer ein bestimmtes Land ausw\u00e4hlt.
• Lokalisierte Produktbeschreibungen abrufen: Verwenden Sie eine Datenabrufbibliothek wie SWR mit Suspense, um Produktbeschreibungen in der bevorzugten Sprache des Benutzers abzurufen. Zeigen Sie eine Ladeanzeige an, w\u00e4hrend die lokalisierten Beschreibungen abgerufen werden.

Fazit

React Suspense ist eine leistungsstarke Funktion, die die Benutzererfahrung Ihrer React-Anwendungen erheblich verbessern kann. Durch die Bereitstellung einer deklarativen M\u00f6glichkeit zur Verwaltung von Ladestatus und Code-Splitting vereinfacht Suspense Ihren Code und erleichtert das Nachvollziehen asynchroner Operationen. Egal, ob Sie ein kleines pers\u00f6nliches Projekt oder eine gro\u00dfe Unternehmensanwendung entwickeln, Suspense kann Ihnen helfen, eine reibungslosere, reaktionsschnellere und leistungsst\u00e4rkere Benutzererfahrung zu schaffen.

Durch die Integration von Suspense mit Datenabrufbibliotheken und Code-Splitting-Techniken k\u00f6nnen Sie das volle Potenzial des Concurrent Mode von React aussch\u00f6pfen und wirklich moderne und ansprechende Webanwendungen erstellen. Nutzen Sie Suspense und bringen Sie Ihre React-Entwicklung auf die n\u00e4chste Stufe.

Weiterf\u00fchrende Informationen

• React Suspense Dokumentation
• SWR Dokumentation
• TanStack Query Dokumentation
• React 18 Ank\u00fcndigung (Concurrent Mode)