Συντονισμός React Suspense: Κατακτήστε το Παράλληλο Fetching Δεδομένων

Το React Suspense έχει φέρει επανάσταση στον τρόπο που διαχειριζόμαστε ασύγχρονες λειτουργίες, ιδιαίτερα το fetching δεδομένων. Επιτρέπει στα components να "ανασταλούν" κατά την απόδοση ενώ περιμένουν να φορτωθούν δεδομένα, παρέχοντας έναν δηλωτικό τρόπο διαχείρισης των καταστάσεων φόρτωσης. Ωστόσο, η απλή επικάλυψη μεμονωμένων fetches δεδομένων με το Suspense μπορεί να οδηγήσει σε φαινόμενο waterfall, όπου ένα fetch ολοκληρώνεται πριν ξεκινήσει το επόμενο, επηρεάζοντας αρνητικά την απόδοση. Αυτή η ανάρτηση blog εμβαθύνει σε προηγμένες στρατηγικές για το συντονισμό πολλαπλών fetches δεδομένων παράλληλα με τη χρήση του Suspense, βελτιστοποιώντας την ανταπόκριση της εφαρμογής σας και βελτιώνοντας την εμπειρία χρήστη για ένα παγκόσμιο κοινό.

Κατανόηση του Προβλήματος Waterfall στο Fetching Δεδομένων

Φανταστείτε ένα σενάριο όπου χρειάζεται να εμφανίσετε ένα προφίλ χρήστη με το όνομα, το avatar και την πρόσφατη δραστηριότητά του. Αν κάνετε fetch κάθε κομματιού δεδομένων διαδοχικά, ο χρήστης βλέπει έναν spinner φόρτωσης για το όνομα, μετά έναν για το avatar, και τέλος, έναν για τη ροή δραστηριότητας. Αυτό το διαδοχικό μοτίβο φόρτωσης δημιουργεί ένα φαινόμενο waterfall, καθυστερώντας την απόδοση του πλήρους προφίλ και απογοητεύοντας τους χρήστες. Για διεθνείς χρήστες με διαφορετικές ταχύτητες δικτύου, αυτή η καθυστέρηση μπορεί να είναι ακόμη πιο έντονη.

Εξετάστε αυτό το απλοποιημένο απόσπασμα κώδικα:

function UserProfile() {
  const name = useName(); // Fetch το όνομα χρήστη
  const avatar = useAvatar(name); // Fetch το avatar με βάση το όνομα
  const activity = useActivity(name); // Fetch τη δραστηριότητα με βάση το όνομα

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

Σε αυτό το παράδειγμα, το useAvatar και το useActivity εξαρτώνται από το αποτέλεσμα του useName. Αυτό δημιουργεί ένα σαφές waterfall – το useAvatar και το useActivity δεν μπορούν να ξεκινήσουν να κάνουν fetch δεδομένα μέχρι να ολοκληρωθεί το useName. Αυτό είναι αναποτελεσματικό και ένα συνηθισμένο σημείο συμφόρησης στην απόδοση.

Στρατηγικές για Παράλληλο Fetching Δεδομένων με Suspense

Το κλειδί για τη βελτιστοποίηση του fetching δεδομένων με το Suspense είναι η έναρξη όλων των αιτήσεων δεδομένων ταυτόχρονα. Εδώ είναι μερικές στρατηγικές που μπορείτε να εφαρμόσετε:

1. Προ-φόρτωση Δεδομένων με `React.preload` και Resources

Μία από τις πιο ισχυρές τεχνικές είναι η προ-φόρτωση δεδομένων πριν ακόμη αποδοθεί το component. Αυτό περιλαμβάνει τη δημιουργία ενός "resource" (ενός αντικειμένου που ενθυλακώνει το promise fetching δεδομένων) και την προ-προφόρτωση των δεδομένων. Το `React.preload` βοηθάει σε αυτό. Μέχρι τη στιγμή που το component θα χρειαστεί τα δεδομένα, αυτά είναι ήδη διαθέσιμα, εξαλείφοντας σχεδόν πλήρως την κατάσταση φόρτωσης.

Εξετάστε ένα resource για fetching ενός προϊόντος:

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;
    },
  };
};

// Χρήση:
const productResource = createProductResource(123);

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

Τώρα, μπορείτε να προ-φορτώσετε αυτό το resource πριν από την απόδοση του component ProductDetails. Για παράδειγμα, κατά τη διάρκεια μεταβάσεων διαδρομής ή με hover.

React.preload(productResource);

Αυτό διασφαλίζει ότι τα δεδομένα είναι πιθανότατα διαθέσιμα μέχρι τη στιγμή που το component ProductDetails τα χρειάζεται, ελαχιστοποιώντας ή εξαλείφοντας την κατάσταση φόρτωσης.

2. Χρήση `Promise.all` για Ταυτόχρονο Fetching Δεδομένων

Μια άλλη απλή και αποτελεσματική προσέγγιση είναι η χρήση του Promise.all για την ταυτόχρονη έναρξη όλων των fetches δεδομένων εντός ενός ενιαίου ορίου Suspense. Αυτό λειτουργεί καλά όταν οι εξαρτήσεις δεδομένων είναι γνωστές εκ των προτέρων.

Ας επανεξετάσουμε το παράδειγμα προφίλ χρήστη. Αντί να κάνουμε fetch δεδομένων διαδοχικά, μπορούμε να κάνουμε fetch το όνομα, το avatar και τη ροή δραστηριότητας ταυτόχρονα:

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

async function fetchName() {
  // Προσομοίωση κλήσης API
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // Προσομοίωση κλήσης API
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // Προσομοίωση κλήσης API
  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;

Ωστόσο, εάν το `Avatar` και το `Activity` επίσης βασίζονται στο `fetchName`, αλλά αποδίδονται μέσα σε ξεχωριστά όρια suspense, μπορείτε να ανυψώσετε το promise του `fetchName` στο γονικό component και να το παρέχετε μέσω React Context.

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

async function fetchName() {
  // Προσομοίωση κλήσης API
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // Προσομοίωση κλήσης API
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // Προσομοίωση κλήσης API
  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. Χρήση ενός Προσαρμοσμένου Hook για Διαχείριση Παράλληλων Fetches

Για πιο σύνθετα σενάρια με πιθανές εξαρτήσεις δεδομένων υπό όρους, μπορείτε να δημιουργήσετε ένα προσαρμοσμένο hook για να διαχειριστείτε το παράλληλο fetching δεδομένων και να επιστρέψετε ένα resource που το Suspense μπορεί να χρησιμοποιήσει.

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 };
}

// Παράδειγμα χρήσης:
async function fetchUserData(userId) {
  // Προσομοίωση κλήσης API
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'User ' + userId };
}

async function fetchUserPosts(userId) {
  // Προσομοίωση κλήσης API
  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;

Αυτή η προσέγγιση ενθυλακώνει την πολυπλοκότητα της διαχείρισης των promises και των καταστάσεων φόρτωσης εντός του hook, καθιστώντας τον κώδικα του component πιο καθαρό και εστιασμένο στην απόδοση των δεδομένων.

4. Επιλεκτική Ενυδάτωση με Streaming Server Rendering

Για εφαρμογές με server rendering, το React 18 εισάγει την επιλεκτική ενυδάτωση (selective hydration) με streaming server rendering. Αυτό σας επιτρέπει να στέλνετε HTML στον client σε κομμάτια καθώς αυτά γίνονται διαθέσιμα στον server. Μπορείτε να επενδύσετε αργά-φορτωμένα components με όρια <Suspense>, επιτρέποντας στο υπόλοιπο της σελίδας να γίνει διαδραστικό ενώ τα αργά components φορτώνουν ακόμη στον server. Αυτό βελτιώνει δραματικά την αντιληπτή απόδοση, ειδικά για χρήστες με αργές συνδέσεις δικτύου ή συσκευές.

Εξετάστε ένα σενάριο όπου ένας ειδησεογραφικός ιστότοπος χρειάζεται να εμφανίσει άρθρα από διάφορες περιοχές του κόσμου (π.χ. Ασία, Ευρώπη, Αμερική). Ορισμένες πηγές δεδομένων μπορεί να είναι πιο αργές από άλλες. Η επιλεκτική ενυδάτωση επιτρέπει την εμφάνιση άρθρων από ταχύτερες περιοχές πρώτα, ενώ εκείνα από πιο αργές περιοχές φορτώνουν ακόμη, αποτρέποντας ολόκληρη τη σελίδα από το να μπλοκαριστεί.

Διαχείριση Σφαλμάτων και Καταστάσεων Φόρτωσης

Ενώ το Suspense απλοποιεί τη διαχείριση καταστάσεων φόρτωσης, η διαχείριση σφαλμάτων παραμένει κρίσιμη. Τα Error Boundaries (χρησιμοποιώντας τη μέθοδο lifecycle componentDidCatch ή το hook useErrorBoundary από βιβλιοθήκες όπως η `react-error-boundary`) σας επιτρέπουν να διαχειριστείτε με χάρη τα σφάλματα που συμβαίνουν κατά τη διάρκεια του fetching δεδομένων ή της απόδοσης. Αυτά τα Error Boundaries πρέπει να τοποθετούνται στρατηγικά για να πιάνουν σφάλματα εντός συγκεκριμένων ορίων Suspense, αποτρέποντας την κατάρρευση ολόκληρης της εφαρμογής.

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

function MyComponent() {
  // ... κάνει fetch δεδομένων που μπορεί να προκαλέσουν σφάλμα
}

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

Θυμηθείτε να παρέχετε ενημερωτικό και φιλικό προς τον χρήστη fallback UI τόσο για τις καταστάσεις φόρτωσης όσο και για τις καταστάσεις σφάλματος. Αυτό είναι ιδιαίτερα σημαντικό για διεθνείς χρήστες που ενδέχεται να αντιμετωπίζουν πιο αργές ταχύτητες δικτύου ή διακοπές υπηρεσιών λόγω περιοχής.

Βέλτιστες Πρακτικές για Βελτιστοποίηση Fetching Δεδομένων με Suspense

• Προσδιορίστε και Δώστε Προτεραιότητα στα Κρίσιμα Δεδομένα: Καθορίστε ποια δεδομένα είναι απαραίτητα για την αρχική απόδοση της εφαρμογής σας και δώστε προτεραιότητα στο fetching αυτών των δεδομένων πρώτα.
• Προ-φορτώστε Δεδομένα Όταν Είναι Δυνατόν: Χρησιμοποιήστε το `React.preload` και τους πόρους (resources) για να προ-φορτώσετε δεδομένα πριν τα χρειαστούν τα components, ελαχιστοποιώντας τις καταστάσεις φόρτωσης.
• Κάντε Fetch Δεδομένων Ταυτόχρονα: Χρησιμοποιήστε το `Promise.all` ή προσαρμοσμένα hooks για να ξεκινήσετε πολλαπλά fetches δεδομένων παράλληλα.
• Βελτιστοποιήστε τα API Endpoints: Βεβαιωθείτε ότι τα API endpoints σας είναι βελτιστοποιημένα για απόδοση, ελαχιστοποιώντας την καθυστέρηση και το μέγεθος του payload. Εξετάστε τη χρήση τεχνικών όπως το GraphQL για να κάνετε fetch μόνο τα δεδομένα που χρειάζεστε.
• Εφαρμόστε Caching: Κάντε cache στα συχνά προσπελάσιμα δεδομένα για να μειώσετε τον αριθμό των αιτήσεων API. Εξετάστε τη χρήση βιβλιοθηκών όπως `swr` ή `react-query` για ισχυρές δυνατότητες caching.
• Χρησιμοποιήστε Code Splitting: Χωρίστε την εφαρμογή σας σε μικρότερα κομμάτια για να μειώσετε τον αρχικό χρόνο φόρτωσης. Συνδυάστε το code splitting με το Suspense για σταδιακή φόρτωση και απόδοση διαφορετικών τμημάτων της εφαρμογής σας.
• Παρακολουθήστε την Απόδοση: Παρακολουθείτε τακτικά την απόδοση της εφαρμογής σας χρησιμοποιώντας εργαλεία όπως το Lighthouse ή το WebPageTest για να εντοπίσετε και να επιλύσετε σημεία συμφόρησης στην απόδοση.
• Διαχειριστείτε Σφάλματα με Χάρη: Εφαρμόστε Error Boundaries για να πιάνετε σφάλματα κατά τη διάρκεια του fetching δεδομένων και της απόδοσης, παρέχοντας ενημερωτικά μηνύματα σφάλματος στους χρήστες.
• Εξετάστε το Server-Side Rendering (SSR): Για λόγους SEO και απόδοσης, εξετάστε τη χρήση SSR με streaming και επιλεκτική ενυδάτωση για να προσφέρετε μια ταχύτερη αρχική εμπειρία.

Συμπέρασμα

Το React Suspense, όταν συνδυάζεται με στρατηγικές για παράλληλο fetching δεδομένων, παρέχει ένα ισχυρό εργαλειοθήκη για τη δημιουργία ανταποκριτικών και αποδοτικών web εφαρμογών. Κατανοώντας το πρόβλημα του waterfall και εφαρμόζοντας τεχνικές όπως η προ-φόρτωση, το ταυτόχρονο fetching με Promise.all, και τα προσαρμοσμένα hooks, μπορείτε να βελτιώσετε σημαντικά την εμπειρία χρήστη. Θυμηθείτε να διαχειρίζεστε τα σφάλματα με χάρη και να παρακολουθείτε την απόδοση για να διασφαλίσετε ότι η εφαρμογή σας παραμένει βελτιστοποιημένη για χρήστες παγκοσμίως. Καθώς το React συνεχίζει να εξελίσσεται, η εξερεύνηση νέων χαρακτηριστικών όπως η επιλεκτική ενυδάτωση με streaming server rendering θα βελτιώσει περαιτέρω την ικανότητά σας να προσφέρετε εξαιρετικές εμπειρίες χρήστη, ανεξάρτητα από την τοποθεσία ή τις συνθήκες δικτύου. Υιοθετώντας αυτές τις τεχνικές, μπορείτε να δημιουργήσετε εφαρμογές που δεν είναι μόνο λειτουργικές, αλλά και ευχάριστες στη χρήση για το παγκόσμιο κοινό σας.

Αυτή η ανάρτηση blog είχε ως στόχο να παρέχει μια ολοκληρωμένη επισκόπηση των στρατηγικών παράλληλου fetching δεδομένων με το React Suspense. Ελπίζουμε να τη βρήκατε ενημερωτική και χρήσιμη. Σας ενθαρρύνουμε να πειραματιστείτε με αυτές τις τεχνικές στα δικά σας έργα και να μοιραστείτε τα ευρήματά σας με την κοινότητα.