M

MLOG

Ελληνικά

Εξερευνήστε το React Suspense για την άντληση δεδομένων πέρα από το code splitting. Κατανοήστε το Fetch-As-You-Render, τη διαχείριση σφαλμάτων και τα μελλοντικά πρότυπα για global εφαρμογές.

Φόρτωση Πόρων με React Suspense: Κατακτώντας τα Σύγχρονα Πρότυπα Άντλησης Δεδομένων

Στον δυναμικό κόσμο της ανάπτυξης ιστοσελίδων, η εμπειρία χρήστη (UX) κυριαρχεί. Οι εφαρμογές αναμένεται να είναι γρήγορες, αποκριτικές και ευχάριστες, ανεξάρτητα από τις συνθήκες του δικτύου ή τις δυνατότητες της συσκευής. Για τους προγραμματιστές React, αυτό συχνά μεταφράζεται σε περίπλοκη διαχείριση κατάστασης (state management), σύνθετους δείκτες φόρτωσης και μια συνεχή μάχη ενάντια στα data fetching waterfalls. Εδώ έρχεται το React Suspense, ένα ισχυρό, αν και συχνά παρεξηγημένο, χαρακτηριστικό που σχεδιάστηκε για να μεταμορφώσει θεμελιωδώς τον τρόπο με τον οποίο χειριζόμαστε τις ασύγχρονες λειτουργίες, ιδίως την άντληση δεδομένων.

Αρχικά, το Suspense παρουσιάστηκε για το code splitting με το React.lazy(), αλλά το πραγματικό του δυναμικό έγκειται στην ικανότητά του να ενορχηστρώνει τη φόρτωση *οποιουδήποτε* ασύγχρονου πόρου, συμπεριλαμβανομένων των δεδομένων από ένα API. Αυτός ο περιεκτικός οδηγός θα εμβαθύνει στο React Suspense για τη φόρτωση πόρων, εξερευνώντας τις βασικές του έννοιες, τα θεμελιώδη πρότυπα άντλησης δεδομένων και πρακτικές σκέψεις για την κατασκευή αποδοτικών και ανθεκτικών global εφαρμογών.

Η Εξέλιξη της Άντλησης Δεδομένων στο React: Από την Προστακτική στη Δηλωτική Προσέγγιση

Για πολλά χρόνια, η άντληση δεδομένων σε components του React βασιζόταν κυρίως σε ένα κοινό πρότυπο: τη χρήση του useEffect hook για την έναρξη μιας κλήσης API, τη διαχείριση των καταστάσεων φόρτωσης και σφάλματος με το useState, και την υπό συνθήκη απόδοση (conditional rendering) με βάση αυτές τις καταστάσεις. Αν και λειτουργική, αυτή η προσέγγιση συχνά οδηγούσε σε αρκετές προκλήσεις:

Εξετάστε ένα τυπικό σενάριο άντλησης δεδομένων χωρίς το Suspense:

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

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

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setIsLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        setError(e);
      } finally {
        setIsLoading(false);
      }
    };
    fetchUser();
  }, [userId]);

  if (isLoading) {
    return <p>Φόρτωση προφίλ χρήστη...</p>;
  }

  if (error) {
    return <p style={"color: red;"}>Σφάλμα: {error.message}</p>;
  }

  if (!user) {
    return <p>Δεν υπάρχουν διαθέσιμα δεδομένα χρήστη.</p>;
  }

  return (
    <div>
      <h2>Χρήστης: {user.name}</h2>
      <p>Email: {user.email}</p>
      <!-- Περισσότερες λεπτομέρειες χρήστη -->
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Καλώς ορίσατε στην Εφαρμογή</h1>
      <UserProfile userId={"123"} />
    </div>
  );
}

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

Κατανοώντας το React Suspense Πέρα από το Code Splitting

Οι περισσότεροι προγραμματιστές συναντούν για πρώτη φορά το Suspense μέσω του React.lazy() για code splitting, όπου σας επιτρέπει να αναβάλλετε τη φόρτωση του κώδικα ενός component μέχρι να χρειαστεί. Για παράδειγμα:

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

const LazyComponent = lazy(() => import('./MyHeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Φόρτωση component...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Σε αυτό το σενάριο, εάν το MyHeavyComponent δεν έχει φορτωθεί ακόμα, το όριο <Suspense> θα «πιάσει» το promise που «πετάγεται» από το lazy() και θα εμφανίσει το fallback μέχρι ο κώδικας του component να είναι έτοιμος. Η βασική ιδέα εδώ είναι ότι το Suspense λειτουργεί «πιάνοντας» promises που «πετάγονται» κατά την απόδοση (rendering).

Αυτός ο μηχανισμός δεν περιορίζεται στη φόρτωση κώδικα. Οποιαδήποτε συνάρτηση καλείται κατά την απόδοση και «πετάει» ένα promise (π.χ., επειδή ένας πόρος δεν είναι ακόμα διαθέσιμος) μπορεί να «πιαστεί» από ένα όριο Suspense υψηλότερα στο δέντρο των components. Όταν το promise επιλυθεί (resolves), το React προσπαθεί να αποδώσει ξανά το component, και αν ο πόρος είναι πλέον διαθέσιμος, το fallback κρύβεται και εμφανίζεται το πραγματικό περιεχόμενο.

Βασικές Έννοιες του Suspense για την Άντληση Δεδομένων

Για να αξιοποιήσουμε το Suspense για την άντληση δεδομένων, πρέπει να κατανοήσουμε μερικές βασικές αρχές:

1. Throwing a Promise (Το «Πέταγμα» ενός Promise)

Σε αντίθεση με τον παραδοσιακό ασύγχρονο κώδικα που χρησιμοποιεί async/await για την επίλυση των promises, το Suspense βασίζεται σε μια συνάρτηση που *«πετάει»* (throws) ένα promise εάν τα δεδομένα δεν είναι έτοιμα. Όταν το React προσπαθεί να αποδώσει ένα component που καλεί μια τέτοια συνάρτηση, και τα δεδομένα είναι ακόμα σε εκκρεμότητα, το promise «πετάγεται». Το React τότε «παγώνει» την απόδοση αυτού του component και των παιδιών του, αναζητώντας το πλησιέστερο όριο <Suspense>.

2. Το Όριο Suspense (The Suspense Boundary)

Το component <Suspense> λειτουργεί ως ένα error boundary για promises. Δέχεται ένα prop fallback, το οποίο είναι το UI που θα αποδοθεί όσο οποιοδήποτε από τα παιδιά του (ή οι απόγονοί τους) βρίσκονται σε αναστολή (δηλαδή, «πετούν» ένα promise). Μόλις όλα τα promises που «πετάχτηκαν» εντός του υποδέντρου του επιλυθούν, το fallback αντικαθίσταται από το πραγματικό περιεχόμενο.

Ένα μόνο όριο Suspense μπορεί να διαχειριστεί πολλαπλές ασύγχρονες λειτουργίες. Για παράδειγμα, αν έχετε δύο components μέσα στο ίδιο όριο <Suspense>, και το καθένα πρέπει να αντλήσει δεδομένα, το fallback θα εμφανίζεται μέχρι να ολοκληρωθούν *και οι δύο* αντλήσεις δεδομένων. Αυτό αποφεύγει την εμφάνιση μερικού UI και παρέχει μια πιο συντονισμένη εμπειρία φόρτωσης.

3. Ο Διαχειριστής Cache/Πόρων (Ευθύνη του Userland)

Είναι κρίσιμο να κατανοήσουμε ότι το Suspense από μόνο του δεν χειρίζεται την άντληση ή την αποθήκευση δεδομένων (caching). Είναι απλώς ένας μηχανισμός συντονισμού. Για να λειτουργήσει το Suspense για την άντληση δεδομένων, χρειάζεστε ένα επίπεδο που:

Αυτός ο «διαχειριστής πόρων» υλοποιείται συνήθως χρησιμοποιώντας μια απλή cache (π.χ., ένα Map ή ένα object) για να αποθηκεύσει την κατάσταση κάθε πόρου (εκκρεμής, επιλυμένος ή με σφάλμα). Ενώ μπορείτε να το φτιάξετε χειροκίνητα για λόγους επίδειξης, σε μια πραγματική εφαρμογή, θα χρησιμοποιούσατε μια στιβαρή βιβλιοθήκη άντλησης δεδομένων που ενσωματώνεται με το Suspense.

4. Concurrent Mode (Οι Βελτιώσεις του React 18)

Ενώ το Suspense μπορεί να χρησιμοποιηθεί σε παλαιότερες εκδόσεις του React, η πλήρης ισχύς του απελευθερώνεται με το Concurrent React (ενεργοποιημένο από προεπιλογή στο React 18 με το createRoot). Το Concurrent Mode επιτρέπει στο React να διακόπτει, να παγώνει και να συνεχίζει την εργασία απόδοσης. Αυτό σημαίνει:

Πρότυπα Άντλησης Δεδομένων με το Suspense

Ας εξερευνήσουμε την εξέλιξη των προτύπων άντλησης δεδομένων με την έλευση του Suspense.

Πρότυπο 1: Fetch-Then-Render (Παραδοσιακό με Περιτύλιγμα Suspense)

Αυτή είναι η κλασική προσέγγιση όπου τα δεδομένα αντλούνται, και μόνο τότε αποδίδεται το component. Αν και δεν αξιοποιεί τον μηχανισμό «throw promise» απευθείας για τα δεδομένα, μπορείτε να περιτυλίξετε ένα component που *τελικά* αποδίδει δεδομένα σε ένα όριο Suspense για να παρέχετε ένα fallback. Αυτό αφορά περισσότερο τη χρήση του Suspense ως έναν γενικό ενορχηστρωτή του UI φόρτωσης για components που τελικά γίνονται έτοιμα, ακόμα κι αν η εσωτερική τους άντληση δεδομένων εξακολουθεί να βασίζεται στο παραδοσιακό useEffect.

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

function UserDetails({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchUserData = async () => {
      setIsLoading(true);
      const res = await fetch(`/api/users/${userId}`);
      const data = await res.json();
      setUser(data);
      setIsLoading(false);
    };
    fetchUserData();
  }, [userId]);

  if (isLoading) {
    return <p>Φόρτωση λεπτομερειών χρήστη...</p>;
  }

  return (
    <div>
      <h3>Χρήστης: {user.name}</h3>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Παράδειγμα Fetch-Then-Render</h1>
      <Suspense fallback={<div>Συνολική φόρτωση σελίδας...</div>}>
        <UserDetails userId={"1"} />
      </Suspense>
    </div>
  );
}

Υπέρ: Εύκολο στην κατανόηση, συμβατό με παλαιότερες εκδόσεις. Μπορεί να χρησιμοποιηθεί ως ένας γρήγορος τρόπος για να προσθέσετε μια global κατάσταση φόρτωσης.

Κατά: Δεν εξαλείφει τον επαναλαμβανόμενο κώδικα μέσα στο UserDetails. Εξακολουθεί να είναι επιρρεπές σε waterfalls αν τα components αντλούν δεδομένα διαδοχικά. Δεν αξιοποιεί πραγματικά τον μηχανισμό «throw-and-catch» του Suspense για τα ίδια τα δεδομένα.

Πρότυπο 2: Render-Then-Fetch (Άντληση Εντός του Render, όχι για Παραγωγή)

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

// ΜΗΝ ΤΟ ΧΡΗΣΙΜΟΠΟΙΕΙΤΕ ΣΕ ΠΑΡΑΓΩΓΗ ΧΩΡΙΣ ΕΝΑ ΚΑΤΑΛΛΗΛΟ ΕΠΙΠΕΔΟ CACHING
// Αυτό είναι καθαρά για την απεικόνιση του πώς θα μπορούσε να λειτουργήσει εννοιολογικά ένα απευθείας 'throw'.

let fetchedData = null;
let dataPromise = null;

function fetchDataSynchronously(url) {
  if (fetchedData) {
    return fetchedData;
  }

  if (!dataPromise) {
    dataPromise = fetch(url)
      .then(res => res.json())
      .then(data => { fetchedData = data; dataPromise = null; return data; })
      .catch(err => { dataPromise = null; throw err; });
  }
  throw dataPromise; // Εδώ είναι που μπαίνει το Suspense
}

function UserDetailsBadExample({ userId }) {
  const user = fetchDataSynchronously(`/api/users/${userId}`);
  return (
    <div>
      <h3>Χρήστης: {user.name}</h3>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Render-Then-Fetch (Ενδεικτικό, ΔΕΝ Συνιστάται Απευθείας)</h1>
      <Suspense fallback={<div>Φόρτωση χρήστη...</div>}>
        <UserDetailsBadExample userId={"2"} />
      </Suspense>
    </div>
  );
}

Υπέρ: Δείχνει πώς ένα component μπορεί απευθείας να «ζητήσει» δεδομένα και να μπει σε αναστολή αν δεν είναι έτοιμα.

Κατά: Εξαιρετικά προβληματικό για παραγωγή. Αυτό το χειροκίνητο, global σύστημα fetchedData και dataPromise είναι απλοϊκό, δεν χειρίζεται πολλαπλά αιτήματα, ακύρωση (invalidation) ή καταστάσεις σφάλματος με στιβαρό τρόπο. Είναι μια πρωτόγονη απεικόνιση της έννοιας «throw-a-promise», όχι ένα πρότυπο προς υιοθέτηση.

Πρότυπο 3: Fetch-As-You-Render (Το Ιδανικό Πρότυπο Suspense)

Αυτή είναι η αλλαγή παραδείγματος που το Suspense πραγματικά επιτρέπει για την άντληση δεδομένων. Αντί να περιμένουμε ένα component να αποδοθεί πριν αντλήσει τα δεδομένα του, ή να αντλήσουμε όλα τα δεδομένα εκ των προτέρων, το Fetch-As-You-Render σημαίνει ότι ξεκινάτε την άντληση δεδομένων *το συντομότερο δυνατό*, συχνά *πριν* ή *ταυτόχρονα με* τη διαδικασία απόδοσης. Τα components στη συνέχεια «διαβάζουν» τα δεδομένα από μια cache, και αν τα δεδομένα δεν είναι έτοιμα, μπαίνουν σε αναστολή. Η κεντρική ιδέα είναι να διαχωρίσουμε τη λογική άντλησης δεδομένων από τη λογική απόδοσης του component.

Για να υλοποιήσετε το Fetch-As-You-Render, χρειάζεστε έναν μηχανισμό για να:

  1. Ξεκινήσετε μια άντληση δεδομένων εκτός της συνάρτησης render του component (π.χ., όταν εισέρχεστε σε μια διαδρομή ή πατάτε ένα κουμπί).
  2. Αποθηκεύσετε το promise ή τα επιλυμένα δεδομένα σε μια cache.
  3. Παρέχετε έναν τρόπο για τα components να «διαβάζουν» από αυτήν την cache. Εάν τα δεδομένα δεν είναι ακόμη διαθέσιμα, η συνάρτηση read «πετάει» το εκκρεμές promise.

Αυτό το πρότυπο αντιμετωπίζει το πρόβλημα του waterfall. Εάν δύο διαφορετικά components χρειάζονται δεδομένα, τα αιτήματά τους μπορούν να ξεκινήσουν παράλληλα, και το UI θα εμφανιστεί μόνο όταν *και τα δύο* είναι έτοιμα, ενορχηστρωμένα από ένα μόνο όριο Suspense.

Χειροκίνητη Υλοποίηση (για Κατανόηση)

Για να κατανοήσουμε τους υποκείμενους μηχανισμούς, ας δημιουργήσουμε έναν απλοποιημένο χειροκίνητο διαχειριστή πόρων. Σε μια πραγματική εφαρμογή, θα χρησιμοποιούσατε μια εξειδικευμένη βιβλιοθήκη.

import React, { Suspense } from 'react';

// --- Απλός Διαχειριστής Cache/Πόρων --- //
const cache = new Map();

function createResource(promise) {
  let status = 'pending';
  let result;
  let suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      } else if (status === 'success') {
        return result;
      }
    },
  };
}

function fetchData(key, fetcher) {
  if (!cache.has(key)) {
    cache.set(key, createResource(fetcher()));
  }
  return cache.get(key);
}

// --- Συναρτήσεις Άντλησης Δεδομένων --- //
const fetchUserById = (id) => {
  console.log(`Άντληση χρήστη ${id}...`);
  return new Promise(resolve => setTimeout(() => {
    const users = {
      '1': { id: '1', name: 'Alice Smith', email: 'alice@example.com' },
      '2': { id: '2', name: 'Bob Johnson', email: 'bob@example.com' },
      '3': { id: '3', name: 'Charlie Brown', email: 'charlie@example.com' }
    };
    resolve(users[id]);
  }, 1500));
};

const fetchPostsByUserId = (userId) => {
  console.log(`Άντληση αναρτήσεων για τον χρήστη ${userId}...`);
  return new Promise(resolve => setTimeout(() => {
    const posts = {
      '1': [{ id: 'p1', title: 'Η Πρώτη μου Ανάρτηση' }, { id: 'p2', title: 'Ταξιδιωτικές Περιπέτειες' }],
      '2': [{ id: 'p3', title: 'Σκέψεις για τον Κώδικα' }],
      '3': [{ id: 'p4', title: 'Παγκόσμιες Τάσεις' }, { id: 'p5', title: 'Τοπική Κουζίνα' }]
    };
    resolve(posts[userId] || []);
  }, 2000));
};

// --- Components --- //
function UserProfile({ userId }) {
  const userResource = fetchData(`user-${userId}`, () => fetchUserById(userId));
  const user = userResource.read(); // Αυτό θα προκαλέσει αναστολή αν τα δεδομένα χρήστη δεν είναι έτοιμα

  return (
    <div>
      <h3>Χρήστης: {user.name}</h3>
      <p>Email: {user.email}</p>
    </div>
  );
}

function UserPosts({ userId }) {
  const postsResource = fetchData(`posts-${userId}`, () => fetchPostsByUserId(userId));
  const posts = postsResource.read(); // Αυτό θα προκαλέσει αναστολή αν τα δεδομένα των αναρτήσεων δεν είναι έτοιμα

  return (
    <div>
      <h4>Αναρτήσεις από {userId}:</h4>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
        {posts.length === 0 && <li>Δεν βρέθηκαν αναρτήσεις.</li>}
      </ul>
    </div>
  );
}

// --- Εφαρμογή --- //
let initialUserResource = null;
let initialPostsResource = null;

function prefetchDataForUser(userId) {
  initialUserResource = fetchData(`user-${userId}`, () => fetchUserById(userId));
  initialPostsResource = fetchData(`posts-${userId}`, () => fetchPostsByUserId(userId));
}

// Προ-φόρτωση κάποιων δεδομένων πριν καν αποδοθεί το component App
prefetchDataForUser('1');

function App() {
  return (
    <div>
      <h1>Fetch-As-You-Render με Suspense</h1>
      <p>Αυτό δείχνει πώς η άντληση δεδομένων μπορεί να συμβεί παράλληλα, συντονισμένη από το Suspense.</p>

      <Suspense fallback={<div>Φόρτωση προφίλ χρήστη και αναρτήσεων...</div>}>
        <UserProfile userId={"1"} />
        <UserPosts userId={"1"} />
      </Suspense>

      <h2>Μια Άλλη Ενότητα</h2>
      <Suspense fallback={<div>Φόρτωση διαφορετικού χρήστη...</div>}>
        <UserProfile userId={"2"} />
      </Suspense>
    </div>
  );
}

Σε αυτό το παράδειγμα:

Βιβλιοθήκες για Fetch-As-You-Render

Η δημιουργία και συντήρηση ενός στιβαρού διαχειριστή πόρων χειροκίνητα είναι περίπλοκη. Ευτυχώς, αρκετές ώριμες βιβλιοθήκες άντλησης δεδομένων έχουν υιοθετήσει ή υιοθετούν το Suspense, παρέχοντας δοκιμασμένες λύσεις:

Αυτές οι βιβλιοθήκες αφαιρούν τις πολυπλοκότητες της δημιουργίας και διαχείρισης πόρων, χειριζόμενες το caching, την επανεπικύρωση, τις αισιόδοξες ενημερώσεις (optimistic updates) και τη διαχείριση σφαλμάτων, καθιστώντας πολύ πιο εύκολη την υλοποίηση του Fetch-As-You-Render.

Πρότυπο 4: Prefetching με Βιβλιοθήκες που Γνωρίζουν το Suspense

Το Prefetching είναι μια ισχυρή βελτιστοποίηση όπου προληπτικά αντλείτε δεδομένα που ένας χρήστης είναι πιθανό να χρειαστεί στο άμεσο μέλλον, πριν καν τα ζητήσει ρητά. Αυτό μπορεί να βελτιώσει δραστικά την αντιληπτή απόδοση.

Με τις βιβλιοθήκες που γνωρίζουν το Suspense, το prefetching γίνεται απρόσκοπτο. Μπορείτε να ενεργοποιήσετε την άντληση δεδομένων σε αλληλεπιδράσεις του χρήστη που δεν αλλάζουν αμέσως το UI, όπως το πέρασμα του ποντικιού πάνω από έναν σύνδεσμο ή ένα κουμπί.

import React, { Suspense } from 'react';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

// Υποθέστε ότι αυτές είναι οι κλήσεις API σας
const fetchProductById = async (id) => {
  console.log(`Άντληση προϊόντος ${id}...`);
  return new Promise(resolve => setTimeout(() => {
    const products = {
      'A001': { id: 'A001', name: 'Global Widget X', price: 29.99, description: 'Ένα ευέλικτο widget για διεθνή χρήση.' },
      'B002': { id: 'B002', name: 'Universal Gadget Y', price: 149.99, description: 'Gadget τελευταίας τεχνολογίας, αγαπημένο παγκοσμίως.' },
    };
    resolve(products[id]);
  }, 1000));
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true, // Ενεργοποίηση του Suspense για όλα τα queries από προεπιλογή
    },
  },
});

function ProductDetails({ productId }) {
  const { data: product } = useQuery({
    queryKey: ['product', productId],
    queryFn: () => fetchProductById(productId),
  });

  return (
    <div style={{"border": "1px solid #ccc", "padding": "15px", "margin": "10px 0"}}>
      <h3>{product.name}</h3>
      <p>Τιμή: ${product.price.toFixed(2)}</p>
      <p>{product.description}</p>
    </div>
  );
}

function ProductList() {
  const handleProductHover = (productId) => {
    // Προ-φόρτωση δεδομένων όταν ο χρήστης περνά το ποντίκι πάνω από έναν σύνδεσμο προϊόντος
    queryClient.prefetchQuery({
      queryKey: ['product', productId],
      queryFn: () => fetchProductById(productId),
    });
    console.log(`Προ-φόρτωση προϊόντος ${productId}`);
  };

  return (
    <div>
      <h2>Διαθέσιμα Προϊόντα:</h2>
      <ul>
        <li>
          <a href="#" onMouseEnter={() => handleProductHover('A001')}
             onClick={(e) => { e.preventDefault(); /* Πλοήγηση ή εμφάνιση λεπτομερειών */ }}
          >Global Widget X (A001)</a>
        </li>
        <li>
          <a href="#" onMouseEnter={() => handleProductHover('B002')}
             onClick={(e) => { e.preventDefault(); /* Πλοήγηση ή εμφάνιση λεπτομερειών */ }}
          >Universal Gadget Y (B002)</a>
        </li>
      </ul>
      <p>Περάστε το ποντίκι πάνω από έναν σύνδεσμο προϊόντος για να δείτε το prefetching σε δράση. Ανοίξτε την καρτέλα δικτύου για να παρατηρήσετε.</p>
    </div>
  );
}

function App() {
  const [showProductA, setShowProductA] = React.useState(false);
  const [showProductB, setShowProductB] = React.useState(false);

  return (
    <QueryClientProvider client={queryClient}>
      <h1>Prefetching με React Suspense (React Query)</h1>
      <ProductList />

      <button onClick={() => setShowProductA(true)}>Εμφάνιση Global Widget X</button>
      <button onClick={() => setShowProductB(true)}>Εμφάνιση Universal Gadget Y</button>

      {showProductA && (
        <Suspense fallback={<p>Φόρτωση Global Widget X...</p>}>
          <ProductDetails productId="A001" />
        </Suspense>
      )}
      {showProductB && (
        <Suspense fallback={<p>Φόρτωση Universal Gadget Y...</p>}>
          <ProductDetails productId="B002" />
        </Suspense>
      )}
    </QueryClientProvider>
  );
}

Σε αυτό το παράδειγμα, το πέρασμα του ποντικιού πάνω από έναν σύνδεσμο προϊόντος ενεργοποιεί το `queryClient.prefetchQuery`, το οποίο ξεκινά την άντληση δεδομένων στο παρασκήνιο. Εάν ο χρήστης στη συνέχεια κάνει κλικ στο κουμπί για να εμφανίσει τις λεπτομέρειες του προϊόντος, και τα δεδομένα βρίσκονται ήδη στην cache από το prefetch, το component θα αποδοθεί αμέσως χωρίς να μπει σε αναστολή. Εάν το prefetch είναι ακόμα σε εξέλιξη ή δεν ξεκίνησε, το Suspense θα εμφανίσει το fallback μέχρι τα δεδομένα να είναι έτοιμα.

Διαχείριση Σφαλμάτων με Suspense και Error Boundaries

Ενώ το Suspense χειρίζεται την κατάσταση «φόρτωσης» εμφανίζοντας ένα fallback, δεν χειρίζεται απευθείας τις καταστάσεις «σφάλματος». Εάν ένα promise που «πετάχτηκε» από ένα component σε αναστολή απορριφθεί (δηλαδή, η άντληση δεδομένων αποτύχει), αυτό το σφάλμα θα διαδοθεί προς τα πάνω στο δέντρο των components. Για να χειριστείτε με χάρη αυτά τα σφάλματα και να εμφανίσετε ένα κατάλληλο UI, πρέπει να χρησιμοποιήσετε Error Boundaries.

Ένα Error Boundary είναι ένα React component που υλοποιεί είτε τις μεθόδους κύκλου ζωής componentDidCatch είτε static getDerivedStateFromError. «Πιάνει» σφάλματα JavaScript οπουδήποτε στο δέντρο των θυγατρικών του components, συμπεριλαμβανομένων των σφαλμάτων που «πετάγονται» από promises που το Suspense θα έπιανε κανονικά αν ήταν σε εκκρεμότητα.

import React, { Suspense, useState } from 'react';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

// --- Component Error Boundary --- //
class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    // Ενημέρωση της κατάστασης ώστε η επόμενη απόδοση να δείξει το fallback UI.
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // Μπορείτε επίσης να καταγράψετε το σφάλμα σε μια υπηρεσία αναφοράς σφαλμάτων
    console.error("Έπιασε ένα σφάλμα:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Μπορείτε να αποδώσετε οποιοδήποτε προσαρμοσμένο fallback UI
      return (
        <div style={{"border": "2px solid red", "padding": "20px", "margin": "20px 0", "background": "#ffe0e0"}}>
          <h2>Κάτι πήγε στραβά!</h2>
          <p>{this.state.error && this.state.error.message}</p>
          <p>Παρακαλώ δοκιμάστε να ανανεώσετε τη σελίδα ή επικοινωνήστε με την υποστήριξη.</p>
          <button onClick={() => this.setState({ hasError: false, error: null })}>Δοκιμάστε Ξανά</button>
        </div>
      );
    }
    return this.props.children;
  }
}

// --- Άντληση Δεδομένων (με πιθανότητα σφάλματος) --- //
const fetchItemById = async (id) => {
  console.log(`Προσπάθεια άντλησης αντικειμένου ${id}...`);
  return new Promise((resolve, reject) => setTimeout(() => {
    if (id === 'error-item') {
      reject(new Error('Αποτυχία φόρτωσης αντικειμένου: Το δίκτυο δεν είναι προσβάσιμο ή το αντικείμενο δεν βρέθηκε.'));
    } else if (id === 'slow-item') {
      resolve({ id: 'slow-item', name: 'Παραδόθηκε Αργά', data: 'Αυτό το αντικείμενο άργησε αλλά έφτασε!', status: 'success' });
    } else {
      resolve({ id, name: `Αντικείμενο ${id}`, data: `Δεδομένα για το αντικείμενο ${id}` });
    }
  }, id === 'slow-item' ? 3000 : 800));
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
      retry: false, // Για επίδειξη, απενεργοποίηση της επανάληψης ώστε το σφάλμα να είναι άμεσο
    },
  },
});

function DisplayItem({ itemId }) {
  const { data: item } = useQuery({
    queryKey: ['item', itemId],
    queryFn: () => fetchItemById(itemId),
  });

  return (
    <div>
      <h3>Λεπτομέρειες Αντικειμένου:</h3>
      <p>ID: {item.id}</p>
      <p>Όνομα: {item.name}</p>
      <p>Δεδομένα: {item.data}</p>
    </div>
  );
}

function App() {
  const [fetchType, setFetchType] = useState('normal-item');

  return (
    <QueryClientProvider client={queryClient}>
      <h1>Suspense και Error Boundaries</h1>

      <div>
        <button onClick={() => setFetchType('normal-item')}>Άντληση Κανονικού Αντικειμένου</button>
        <button onClick={() => setFetchType('slow-item')}>Άντληση Αργού Αντικειμένου</button>
        <button onClick={() => setFetchType('error-item')}>Άντληση Αντικειμένου με Σφάλμα</button>
      </div>

      <MyErrorBoundary>
        <Suspense fallback={<p>Φόρτωση αντικειμένου μέσω Suspense...</p>}>
          <DisplayItem itemId={fetchType} />
        </Suspense>
      </MyErrorBoundary>
    </QueryClientProvider>
  );
}

Περιτυλίγοντας το όριο Suspense (ή τα components που μπορεί να μπουν σε αναστολή) με ένα Error Boundary, διασφαλίζετε ότι οι αποτυχίες δικτύου ή τα σφάλματα του server κατά την άντληση δεδομένων «πιάνονται» και αντιμετωπίζονται με χάρη, αποτρέποντας την κατάρρευση ολόκληρης της εφαρμογής. Αυτό παρέχει μια στιβαρή και φιλική προς τον χρήστη εμπειρία, επιτρέποντας στους χρήστες να κατανοήσουν το πρόβλημα και ενδεχομένως να προσπαθήσουν ξανά.

Διαχείριση Κατάστασης και Ακύρωση Δεδομένων με το Suspense

Είναι σημαντικό να διευκρινιστεί ότι το React Suspense αντιμετωπίζει κυρίως την αρχική κατάσταση φόρτωσης των ασύγχρονων πόρων. Δεν διαχειρίζεται εγγενώς την client-side cache, δεν χειρίζεται την ακύρωση δεδομένων (data invalidation), ούτε ενορχηστρώνει τις μεταλλάξεις (mutations - δημιουργία, ενημέρωση, διαγραφή) και τις επακόλουθες ενημερώσεις του UI.

Εδώ είναι που οι βιβλιοθήκες άντλησης δεδομένων που γνωρίζουν το Suspense (React Query, SWR, Apollo Client, Relay) γίνονται απαραίτητες. Συμπληρώνουν το Suspense παρέχοντας:

Χωρίς μια στιβαρή βιβλιοθήκη άντλησης δεδομένων, η υλοποίηση αυτών των χαρακτηριστικών πάνω από έναν χειροκίνητο διαχειριστή πόρων Suspense θα ήταν ένα σημαντικό εγχείρημα, ουσιαστικά απαιτώντας να χτίσετε το δικό σας framework άντλησης δεδομένων.

Πρακτικές Σκέψεις και Βέλτιστες Πρακτικές

Η υιοθέτηση του Suspense για την άντληση δεδομένων είναι μια σημαντική αρχιτεκτονική απόφαση. Ακολουθούν ορισμένες πρακτικές σκέψεις για μια global εφαρμογή:

1. Δεν Χρειάζονται όλα τα Δεδομένα το Suspense

Το Suspense είναι ιδανικό για κρίσιμα δεδομένα που επηρεάζουν άμεσα την αρχική απόδοση ενός component. Για μη κρίσιμα δεδομένα, αντλήσεις στο παρασκήνιο, ή δεδομένα που μπορούν να φορτωθούν τεμπέλικα (lazily) χωρίς ισχυρό οπτικό αντίκτυπο, το παραδοσιακό useEffect ή το pre-rendering μπορεί να είναι ακόμα κατάλληλα. Η υπερβολική χρήση του Suspense μπορεί να οδηγήσει σε μια λιγότερο αναλυτική εμπειρία φόρτωσης, καθώς ένα μόνο όριο Suspense περιμένει *όλα* τα παιδιά του να επιλυθούν.

2. Κοκκοποίηση (Granularity) των Ορίων Suspense

Τοποθετήστε με σκέψη τα όριά σας <Suspense>. Ένα μόνο, μεγάλο όριο στην κορυφή της εφαρμογής σας μπορεί να κρύψει ολόκληρη τη σελίδα πίσω από ένα spinner, κάτι που μπορεί να είναι απογοητευτικό. Μικρότερα, πιο κοκκοποιημένα όρια επιτρέπουν σε διαφορετικά μέρη της σελίδας σας να φορτώνουν ανεξάρτητα, παρέχοντας μια πιο προοδευτική και αποκριτική εμπειρία. Για παράδειγμα, ένα όριο γύρω από ένα component προφίλ χρήστη, και ένα άλλο γύρω από μια λίστα προτεινόμενων προϊόντων.

<div>
  <h1>Σελίδα Προϊόντος</h1>
  <Suspense fallback={<p>Φόρτωση κύριων λεπτομερειών προϊόντος...</p>}>
    <ProductDetails id="prod123" />
  </Suspense>

  <hr />

  <h2>Σχετικά Προϊόντα</h2>
  <Suspense fallback={<p>Φόρτωση σχετικών προϊόντων...</p>}>
    <RelatedProducts category="electronics" />
  </Suspense>
</div>

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

3. Server-Side Rendering (SSR) και Streaming HTML

Τα νέα streaming SSR APIs του React 18 (renderToPipeableStream) ενσωματώνονται πλήρως με το Suspense. Αυτό επιτρέπει στον server σας να στέλνει HTML μόλις είναι έτοιμο, ακόμη και αν τμήματα της σελίδας (όπως components που εξαρτώνται από δεδομένα) εξακολουθούν να φορτώνουν. Ο server μπορεί να μεταδώσει (stream) ένα placeholder (από το fallback του Suspense) και στη συνέχεια να μεταδώσει το πραγματικό περιεχόμενο όταν τα δεδομένα επιλυθούν, χωρίς να απαιτείται πλήρης client-side re-render. Αυτό βελτιώνει σημαντικά την αντιληπτή απόδοση φόρτωσης για global χρήστες σε ποικίλες συνθήκες δικτύου.

4. Σταδιακή Υιοθέτηση

Δεν χρειάζεται να ξαναγράψετε ολόκληρη την εφαρμογή σας για να χρησιμοποιήσετε το Suspense. Μπορείτε να το εισαγάγετε σταδιακά, ξεκινώντας με νέα χαρακτηριστικά ή components που θα επωφελούνταν περισσότερο από τα δηλωτικά του πρότυπα φόρτωσης.

5. Εργαλεία και Debugging

Ενώ το Suspense απλοποιεί τη λογική των components, το debugging μπορεί να είναι διαφορετικό. Τα React DevTools παρέχουν πληροφορίες για τα όρια Suspense και τις καταστάσεις τους. Εξοικειωθείτε με τον τρόπο που η επιλεγμένη βιβλιοθήκη άντλησης δεδομένων εκθέτει την εσωτερική της κατάσταση (π.χ., React Query Devtools).

6. Χρονικά Όρια για τα Fallbacks του Suspense

Για πολύ μεγάλους χρόνους φόρτωσης, μπορεί να θέλετε να εισαγάγετε ένα χρονικό όριο στο fallback του Suspense, ή να αλλάξετε σε έναν πιο λεπτομερή δείκτη φόρτωσης μετά από μια ορισμένη καθυστέρηση. Τα hooks useDeferredValue και useTransition στο React 18 μπορούν να βοηθήσουν στη διαχείριση αυτών των πιο αποχρωματισμένων καταστάσεων φόρτωσης, επιτρέποντάς σας να δείχνετε μια «παλιά» έκδοση του UI ενώ νέα δεδομένα αντλούνται, ή να αναβάλλετε μη επείγουσες ενημερώσεις.

Το Μέλλον της Άντλησης Δεδομένων στο React: React Server Components και Πέρα

Το ταξίδι της άντλησης δεδομένων στο React δεν σταματά με το client-side Suspense. Τα React Server Components (RSC) αντιπροσωπεύουν μια σημαντική εξέλιξη, υποσχόμενα να θολώσουν τα όρια μεταξύ client και server, και να βελτιστοποιήσουν περαιτέρω την άντληση δεδομένων.

Καθώς το React συνεχίζει να ωριμάζει, το Suspense θα αποτελεί ένα όλο και πιο κεντρικό κομμάτι του παζλ για τη δημιουργία εξαιρετικά αποδοτικών, φιλικών προς τον χρήστη και συντηρήσιμων εφαρμογών. Ωθεί τους προγραμματιστές προς έναν πιο δηλωτικό και ανθεκτικό τρόπο χειρισμού των ασύγχρονων λειτουργιών, μεταφέροντας την πολυπλοκότητα από τα μεμονωμένα components σε ένα καλά διαχειριζόμενο επίπεδο δεδομένων.

Συμπέρασμα

Το React Suspense, αρχικά ένα χαρακτηριστικό για το code splitting, έχει εξελιχθεί σε ένα μετασχηματιστικό εργαλείο για την άντληση δεδομένων. Υιοθετώντας το πρότυπο Fetch-As-You-Render και αξιοποιώντας βιβλιοθήκες που γνωρίζουν το Suspense, οι προγραμματιστές μπορούν να βελτιώσουν σημαντικά την εμπειρία χρήστη των εφαρμογών τους, εξαλείφοντας τα loading waterfalls, απλοποιώντας τη λογική των components και παρέχοντας ομαλές, συντονισμένες καταστάσεις φόρτωσης. Σε συνδυασμό με τα Error Boundaries για στιβαρή διαχείριση σφαλμάτων και τη μελλοντική υπόσχεση των React Server Components, το Suspense μας δίνει τη δυνατότητα να χτίζουμε εφαρμογές που δεν είναι μόνο αποδοτικές και ανθεκτικές, αλλά και εγγενώς πιο ευχάριστες για τους χρήστες σε όλο τον κόσμο. Η μετάβαση σε ένα παράδειγμα άντλησης δεδομένων που καθοδηγείται από το Suspense απαιτεί μια εννοιολογική προσαρμογή, αλλά τα οφέλη όσον αφορά την καθαρότητα του κώδικα, την απόδοση και την ικανοποίηση του χρήστη είναι ουσιαστικά και αξίζουν την επένδυση.