M

MLOG

עברית

חקרו את React Suspense לשליפת נתונים מעבר לפיצול קוד. הבינו את Fetch-As-You-Render, טיפול בשגיאות, ודפוסים עמידים לעתיד עבור יישומים גלובליים.

טעינת משאבים עם React Suspense: שליטה בדפוסי שליפת נתונים מודרניים

בעולם הדינמי של פיתוח ווב, חווית המשתמש (UX) היא מעל הכל. יישומים צפויים להיות מהירים, רספונסיביים ומהנים, ללא קשר לתנאי הרשת או יכולות המכשיר. עבור מפתחי ריאקט, הדבר מתורגם לעיתים קרובות לניהול מצב מורכב, מחווני טעינה מסובכים ומאבק מתמיד נגד 'מפלי' שליפת נתונים (data fetching waterfalls). כאן נכנס לתמונה React Suspense, תכונה עוצמתית, אם כי לעיתים לא מובנת כהלכה, שנועדה לשנות מהיסוד את הדרך בה אנו מטפלים בפעולות אסינכרוניות, במיוחד שליפת נתונים.

בתחילה, Suspense הוצג עבור פיצול קוד עם React.lazy(), אך הפוטנציאל האמיתי שלו טמון ביכולתו לתזמר את טעינתו של *כל* משאב אסינכרוני, כולל נתונים מ-API. מדריך מקיף זה יעמיק בשימוש ב-React Suspense לטעינת משאבים, ויחקור את מושגי הליבה שלו, דפוסי שליפת הנתונים הבסיסיים, ושיקולים מעשיים לבניית יישומים גלובליים בעלי ביצועים גבוהים ועמידות.

האבולוציה של שליפת נתונים בריאקט: מאימפרטיבי לדקלרטיבי

במשך שנים רבות, שליפת נתונים ברכיבי ריאקט התבססה בעיקר על דפוס נפוץ: שימוש ב-hook `useEffect` כדי ליזום קריאת API, ניהול מצבי טעינה ושגיאה עם `useState`, ורינדור מותנה על בסיס מצבים אלה. למרות שזה עובד, גישה זו הובילה לעיתים קרובות למספר אתגרים:

שקלו תרחיש שליפת נתונים טיפוסי ללא 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! סטטוס: ${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>אימייל: {user.email}</p>
      <!-- פרטים נוספים על המשתמש -->
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>ברוכים הבאים ליישום</h1>
      <UserProfile userId={"123"} />
    </div>
  );
}

דפוס זה נפוץ מאוד, אך הוא מכריח את הרכיב לנהל את המצב האסינכרוני שלו בעצמו, מה שמוביל לעיתים קרובות לקשר הדוק מדי בין ה-UI ללוגיקת שליפת הנתונים. Suspense מציע חלופה דקלרטיבית ויעילה יותר.

הבנת React Suspense מעבר לפיצול קוד

רוב המפתחים נתקלים ב-Suspense לראשונה דרך React.lazy() לפיצול קוד, המאפשר לדחות את טעינת הקוד של רכיב עד שיהיה בו צורך. לדוגמה:

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

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

function App() {
  return (
    <Suspense fallback={<div>טוען רכיב...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

בתרחיש זה, אם MyHeavyComponent עדיין לא נטען, גבול ה-<Suspense> יתפוס את ה-Promise שנזרק על ידי lazy() ויציג את ה-fallback עד שהקוד של הרכיב יהיה מוכן. התובנה המרכזית כאן היא ש-Suspense עובד על ידי תפיסת promises שנזרקים במהלך הרינדור.

מנגנון זה אינו בלעדי לטעינת קוד. כל פונקציה שנקראת במהלך הרינדור וזורקת promise (למשל, כי משאב עדיין לא זמין) יכולה להיתפס על ידי גבול Suspense גבוה יותר בעץ הרכיבים. כאשר ה-promise נפתר (resolves), ריאקט מנסה לרנדר מחדש את הרכיב, ואם המשאב זמין כעת, ה-fallback מוסתר, והתוכן האמיתי מוצג.

מושגי ליבה של Suspense לשליפת נתונים

כדי למנף את Suspense לשליפת נתונים, עלינו להבין כמה עקרונות ליבה:

1. זריקת Promise

בניגוד לקוד אסינכרוני מסורתי המשתמש ב-async/await כדי לפתור promises, Suspense מסתמך על פונקציה ש*זורקת* promise אם הנתונים אינם מוכנים. כאשר ריאקט מנסה לרנדר רכיב שקורא לפונקציה כזו, והנתונים עדיין ממתינים, ה-promise נזרק. ריאקט אז 'משהה' את רינדור הרכיב הזה וילדיו, ומחפש את גבול ה-<Suspense> הקרוב ביותר.

2. גבול ה-Suspense

רכיב ה-<Suspense> פועל כגבול שגיאה (error boundary) עבור promises. הוא מקבל prop בשם fallback, שהוא ה-UI שיוצג בזמן שאחד מילדיו (או צאצאיהם) נמצא במצב השהיה (כלומר, זורק promise). ברגע שכל ה-promises שנזרקו בתוך תת-העץ שלו נפתרים, ה-fallback מוחלף בתוכן האמיתי.

גבול Suspense יחיד יכול לנהל מספר פעולות אסינכרוניות. לדוגמה, אם יש לכם שני רכיבים בתוך אותו גבול <Suspense>, וכל אחד צריך לשלוף נתונים, ה-fallback יוצג עד ש*שתי* שליפות הנתונים יושלמו. זה מונע הצגת UI חלקי ומספק חווית טעינה מתואמת יותר.

3. מנהל המטמון/משאבים (אחריות המפתח)

חשוב לציין, Suspense עצמו אינו מטפל בשליפת נתונים או בניהול מטמון (caching). הוא רק מנגנון תיאום. כדי לגרום ל-Suspense לעבוד עבור שליפת נתונים, אתם צריכים שכבה ש:

'מנהל המשאבים' הזה מיושם בדרך כלל באמצעות מטמון פשוט (למשל, Map או אובייקט) כדי לאחסן את מצב כל משאב (ממתין, נפתר, או שגיאה). למרות שניתן לבנות זאת ידנית למטרות הדגמה, ביישום אמיתי, תשתמשו בספריית שליפת נתונים חזקה שמשתלבת עם Suspense.

4. Concurrent Mode (שיפורים של ריאקט 18)

אף על פי שניתן להשתמש ב-Suspense בגרסאות ישנות יותר של ריאקט, כוחו המלא משתחרר עם Concurrent React (מופעל כברירת מחדל בריאקט 18 עם createRoot). Concurrent Mode מאפשר לריאקט להפריע, להשהות ולחדש עבודת רינדור. זה אומר:

דפוסי שליפת נתונים עם Suspense

בואו נחקור את התפתחות דפוסי שליפת הנתונים עם הופעת Suspense.

דפוס 1: שלוף-ואז-רנדר (Fetch-Then-Render) (מסורתי עם עטיפת Suspense)

זוהי הגישה הקלאסית שבה נתונים נשלפים, ורק אז הרכיב מרונדר. למרות שאינה מנצלת את מנגנון 'זריקת ה-promise' ישירות עבור נתונים, ניתן לעטוף רכיב ש*בסופו של דבר* מרנדר נתונים בגבול Suspense כדי לספק fallback. זה יותר עניין של שימוש ב-Suspense כמתזמר UI טעינה גנרי עבור רכיבים שבסופו של דבר הופכים למוכנים, גם אם שליפת הנתונים הפנימית שלהם עדיין מבוססת `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>אימייל: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>דוגמת שלוף-ואז-רנדר</h1>
      <Suspense fallback={<div>טעינה כללית של הדף...</div>}>
        <UserDetails userId={"1"} />
      </Suspense>
    </div>
  );
}

יתרונות: פשוט להבנה, תואם לאחור. ניתן להשתמש בו כדרך מהירה להוסיף מצב טעינה גלובלי.

חסרונות: לא מבטל את הקוד החזרתי בתוך UserDetails. עדיין נוטה למפלי נתונים אם רכיבים שולפים נתונים באופן סדרתי. לא באמת מנצל את מנגנון 'זרוק-ותפוס' של Suspense עבור הנתונים עצמם.

דפוס 2: רנדר-ואז-שלוף (Render-Then-Fetch) (שליפה בתוך רינדור, לא לייצור)

דפוס זה נועד בעיקר להמחיש מה לא לעשות עם Suspense ישירות, מכיוון שהוא יכול להוביל ללולאות אינסופיות או לבעיות ביצועים אם לא מטופל בקפידה. הוא כולל ניסיון לשלוף נתונים או לקרוא לפונקציה משעה ישירות בשלב הרינדור של רכיב, *ללא* מנגנון מטמון תקין.

// אין להשתמש בקוד זה בייצור ללא שכבת מטמון מתאימה
// זהו אך ורק להמחשה של איך 'זריקה' ישירה עשויה לעבוד באופן רעיוני.

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>אימייל: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>רנדר-ואז-שלוף (להמחשה בלבד, לא מומלץ ישירות)</h1>
      <Suspense fallback={<div>טוען משתמש...</div>}>
        <UserDetailsBadExample userId={"2"} />
      </Suspense>
    </div>
  );
}

יתרונות: מראה כיצד רכיב יכול 'לבקש' ישירות נתונים ולהשהות אם הם לא מוכנים.

חסרונות: בעייתי מאוד לייצור. מערכת fetchedData ו-dataPromise ידנית וגלובלית זו היא פשטנית, אינה מטפלת בבקשות מרובות, פסילת נתונים (invalidation), או מצבי שגיאה באופן חזק. זוהי המחשה פרימיטיבית של רעיון 'זריקת-promise', לא דפוס לאימוץ.

דפוס 3: שלוף-בזמן-רינדור (Fetch-As-You-Render) (הדפוס האידיאלי ל-Suspense)

זוהי תפנית פרדיגמטית ש-Suspense מאפשר באמת עבור שליפת נתונים. במקום להמתין שרכיב ירונדר לפני שליפת הנתונים שלו, או לשלוף את כל הנתונים מראש, Fetch-As-You-Render אומר שאתם מתחילים לשלוף נתונים *בהקדם האפשרי*, לעיתים קרובות *לפני* או *במקביל* לתהליך הרינדור. הרכיבים אז 'קוראים' את הנתונים ממטמון, ואם הנתונים לא מוכנים, הם מושהים. הרעיון המרכזי הוא להפריד את לוגיקת שליפת הנתונים מלוגיקת הרינדור של הרכיב.

כדי ליישם Fetch-As-You-Render, אתם צריכים מנגנון ל:

  1. ליזום שליפת נתונים מחוץ לפונקציית הרינדור של הרכיב (למשל, כאשר נכנסים לנתיב, או שלוחצים על כפתור).
  2. לאחסן את ה-promise או את הנתונים שנפתרו במטמון.
  3. לספק דרך לרכיבים 'לקרוא' ממטמון זה. אם הנתונים עדיין לא זמינים, פונקציית הקריאה זורקת את ה-promise הממתין.

דפוס זה פותר את בעיית מפל הנתונים. אם שני רכיבים שונים צריכים נתונים, ניתן ליזום את הבקשות שלהם במקביל, וה-UI יופיע רק כאשר *שניהם* מוכנים, בתזמור של גבול Suspense יחיד.

יישום ידני (להבנה)

כדי לתפוס את המכניקה הבסיסית, בואו ניצור מנהל משאבים ידני ופשוט. ביישום אמיתי, הייתם משתמשים בספרייה ייעודית.

import React, { Suspense } from 'react';

// --- מנהל משאבים/מטמון פשוט --- //
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: 'אליס כהן', email: 'alice@example.com' },
      '2': { id: '2', name: 'בוב לוי', email: 'bob@example.com' },
      '3': { id: '3', name: 'צ\'רלי בראון', 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));
};

// --- רכיבים --- //
function UserProfile({ userId }) {
  const userResource = fetchData(`user-${userId}`, () => fetchUserById(userId));
  const user = userResource.read(); // זה ישהה אם נתוני המשתמש לא מוכנים

  return (
    <div>
      <h3>משתמש: {user.name}</h3>
      <p>אימייל: {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));
}

// אחזור מראש של נתונים מסוימים עוד לפני שהרכיב App מרונדר
prefetchDataForUser('1');

function App() {
  return (
    <div>
      <h1>שלוף-בזמן-רינדור עם 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, ומספקות פתרונות שנבדקו בקרב:

ספריות אלו מפשטות את המורכבות של יצירה וניהול משאבים, טיפול במטמון, אימות מחדש, עדכונים אופטימיסטיים וטיפול בשגיאות, מה שהופך את היישום של Fetch-As-You-Render להרבה יותר קל.

דפוס 4: אחזור מראש (Prefetching) עם ספריות התומכות ב-Suspense

אחזור מראש (Prefetching) הוא אופטימיזציה עוצמתית שבה אתם שולפים באופן יזום נתונים שסביר שמשתמש יצטרך בעתיד הקרוב, עוד לפני שהוא מבקש אותם במפורש. זה יכול לשפר באופן דרסטי את הביצועים הנתפסים.

עם ספריות התומכות ב-Suspense, אחזור מראש הופך לחלק. ניתן להפעיל שליפות נתונים על בסיס אינטראקציות משתמש שאינן משנות מיד את ה-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: 'ווידג\'ט רב-תכליתי לשימוש בינלאומי.' },
      'B002': { id: 'B002', name: 'Universal Gadget Y', price: 149.99, description: 'גאדג\'ט חדשני, אהוב ברחבי העולם.' },
    };
    resolve(products[id]);
  }, 1000));
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true, // הפעלת Suspense לכל השאילתות כברירת מחדל
    },
  },
});

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>עברו עם העכבר מעל קישור למוצר כדי לראות אחזור מראש בפעולה. פתחו את לשונית הרשת כדי לצפות.</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`, אשר יוזם את שליפת הנתונים ברקע. אם המשתמש לוחץ אז על הכפתור כדי להציג את פרטי המוצר, והנתונים כבר נמצאים במטמון מהאחזור המוקדם, הרכיב ירונדר באופן מיידי מבלי להשהות. אם האחזור המוקדם עדיין בתהליך או שלא הופעל, Suspense יציג את ה-fallback עד שהנתונים יהיו מוכנים.

טיפול בשגיאות עם Suspense וגבולות שגיאה (Error Boundaries)

בעוד ש-Suspense מטפל במצב 'טעינה' על ידי הצגת fallback, הוא אינו מטפל ישירות במצבי 'שגיאה'. אם promise שנזרק על ידי רכיב מושהה נדחה (כלומר, שליפת הנתונים נכשלת), שגיאה זו תתפשט במעלה עץ הרכיבים. כדי לטפל בשגיאות אלה בחן ולהציג UI מתאים, עליכם להשתמש ב-Error Boundaries (גבולות שגיאה).

גבול שגיאה הוא רכיב ריאקט המיישם את אחת ממתודות מחזור החיים componentDidCatch או static getDerivedStateFromError. הוא תופס שגיאות JavaScript בכל מקום בעץ הרכיבים הצאצאים שלו, כולל שגיאות שנזרקות על ידי promises ש-Suspense היה תופס בדרך כלל אם היו במצב ממתין.

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

// --- רכיב גבול שגיאה --- //
class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    // עדכון מצב כך שהרינדור הבא יציג את ה-UI החלופי.
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // ניתן גם לשלוח את השגיאה לשירות דיווח שגיאות
    console.error("נתפסה שגיאה:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // ניתן לרנדר כל 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>מזהה: {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 וגבולות שגיאה</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 שלכם (או הרכיבים שעשויים להשהות) בגבול שגיאה, אתם מבטיחים שכשלים ברשת או שגיאות שרת במהלך שליפת נתונים ייתפסו ויטופלו בחן, וימנעו קריסה של כל היישום. זה מספק חוויה חזקה וידידותית למשתמש, המאפשרת למשתמשים להבין את הבעיה ואולי לנסות שוב.

ניהול מצב ופסילת נתונים עם Suspense

חשוב להבהיר ש-React Suspense מטפל בעיקר במצב הטעינה הראשוני של משאבים אסינכרוניים. הוא אינו מנהל מטבעו את המטמון בצד הלקוח, אינו מטפל בפסילת נתונים (data invalidation), או מתזמר מוטציות (פעולות יצירה, עדכון, מחיקה) ועדכוני ה-UI הבאים שלהן.

כאן ספריות שליפת הנתונים התומכות ב-Suspense (React Query, SWR, Apollo Client, Relay) הופכות לחיוניות. הן משלימות את Suspense על ידי מתן:

ללא ספריית שליפת נתונים חזקה, יישום תכונות אלה על גבי מנהל משאבים ידני של Suspense יהיה משימה משמעותית, ולמעשה ידרוש מכם לבנות מסגרת שליפת נתונים משלכם.

שיקולים מעשיים ושיטות עבודה מומלצות

אימוץ Suspense לשליפת נתונים הוא החלטה אדריכלית משמעותית. הנה כמה שיקולים מעשיים ליישום גלובלי:

1. לא כל הנתונים צריכים Suspense

Suspense אידיאלי עבור נתונים קריטיים המשפיעים ישירות על הרינדור הראשוני של רכיב. עבור נתונים לא קריטיים, שליפות ברקע, או נתונים שניתן לטעון בעצלתיים (lazily) ללא השפעה חזותית חזקה, `useEffect` מסורתי או רינדור מראש עשויים עדיין להיות מתאימים. שימוש יתר ב-Suspense יכול להוביל לחווית טעינה פחות גרעינית, שכן גבול Suspense יחיד ממתין ל*כל* ילדיו להיפתר.

2. גרעיניות של גבולות Suspense

מקמו את גבולות ה-<Suspense> שלכם במחשבה תחילה. גבול יחיד וגדול בראש היישום שלכם עשוי להסתיר את כל הדף מאחורי ספינר, מה שיכול להיות מתסכל. גבולות קטנים וגרעיניים יותר מאפשרים לחלקים שונים של הדף שלכם להיטען באופן עצמאי, ומספקים חוויה מתקדמת ורספונסיבית יותר. לדוגמה, גבול סביב רכיב פרופיל משתמש, ואחר סביב רשימת מוצרים מומלצים.

<div>
  <h1>דף מוצר</h1>
  <Suspense fallback={<p>טוען פרטי מוצר ראשיים...</p>}>
    <ProductDetails id="prod123" />
  </Suspense>

  <hr />

  <h2>מוצרים קשורים</h2>
  <Suspense fallback={<p>טוען מוצרים קשורים...</p>}>
    <RelatedProducts category="electronics" />
  </Suspense>
</div>

גישה זו פירושה שמשתמשים יכולים לראות את פרטי המוצר הראשיים גם אם המוצרים הקשורים עדיין בטעינה.

3. רינדור בצד השרת (SSR) והזרמת HTML

ממשקי ה-API החדשים של ריאקט 18 להזרמת SSR (`renderToPipeableStream`) משתלבים באופן מלא עם Suspense. זה מאפשר לשרת שלכם לשלוח HTML ברגע שהוא מוכן, גם אם חלקים מהדף (כמו רכיבים תלויי-נתונים) עדיין בטעינה. השרת יכול להזרים מציין מקום (מה-fallback של Suspense) ואז להזרים את התוכן האמיתי כאשר הנתונים נפתרים, מבלי לדרוש רינדור מחדש מלא בצד הלקוח. זה משפר באופן משמעותי את ביצועי הטעינה הנתפסים עבור משתמשים גלובליים בתנאי רשת מגוונים.

4. אימוץ הדרגתי

אינכם צריכים לשכתב את כל היישום שלכם כדי להשתמש ב-Suspense. ניתן להכניס אותו באופן הדרגתי, החל מתכונות חדשות או רכיבים שירוויחו הכי הרבה מדפוסי הטעינה הדקלרטיביים שלו.

5. כלים וניפוי באגים

בעוד ש-Suspense מפשט את לוגיקת הרכיב, ניפוי באגים יכול להיות שונה. React DevTools מספקים תובנות לגבי גבולות Suspense ומצביהם. הכירו כיצד ספריית שליפת הנתונים שבחרתם חושפת את המצב הפנימי שלה (למשל, React Query Devtools).

6. פסק זמן (Timeouts) עבור fallbacks של Suspense

עבור זמני טעינה ארוכים מאוד, ייתכן שתרצו להכניס פסק זמן ל-fallback של Suspense, או לעבור למחוון טעינה מפורט יותר לאחר עיכוב מסוים. ה-hooks `useDeferredValue` ו-`useTransition` בריאקט 18 יכולים לעזור לנהל מצבי טעינה ניואנסיים יותר אלה, ולאפשר לכם להציג גרסה 'ישנה' של ה-UI בזמן שנתונים חדשים נשלפים, או לדחות עדכונים לא דחופים.

העתיד של שליפת נתונים בריאקט: רכיבי שרת של ריאקט (React Server Components) ומעבר

המסע של שליפת נתונים בריאקט אינו נעצר עם Suspense בצד הלקוח. רכיבי שרת של ריאקט (RSC) מייצגים אבולוציה משמעותית, ומבטיחים לטשטש את הגבולות בין לקוח לשרת, ולבצע אופטימיזציה נוספת של שליפת נתונים.

ככל שריאקט ממשיך להתבגר, Suspense יהיה חלק מרכזי יותר ויותר בפאזל לבניית יישומים בעלי ביצועים גבוהים, ידידותיים למשתמש וקלים לתחזוקה. הוא דוחף מפתחים לעבר דרך דקלרטיבית ועמידה יותר לטיפול בפעולות אסינכרוניות, ומעביר את המורכבות מרכיבים בודדים לשכבת נתונים מנוהלת היטב.

סיכום

React Suspense, שהיה בתחילה תכונה לפיצול קוד, פרח והפך לכלי טרנספורמטיבי לשליפת נתונים. על ידי אימוץ דפוס ה-Fetch-As-You-Render ומינוף ספריות התומכות ב-Suspense, מפתחים יכולים לשפר באופן משמעותי את חווית המשתמש של היישומים שלהם, לחסל מפלי טעינה, לפשט את לוגיקת הרכיבים, ולספק מצבי טעינה חלקים ומתואמים. בשילוב עם גבולות שגיאה (Error Boundaries) לטיפול חזק בשגיאות וההבטחה העתידית של רכיבי שרת של ריאקט, Suspense מעצים אותנו לבנות יישומים שהם לא רק בעלי ביצועים ועמידות, אלא גם מהנים יותר מטבעם עבור משתמשים ברחבי העולם. המעבר לפרדיגמת שליפת נתונים מונחית-Suspense דורש התאמה רעיונית, אך היתרונות במונחים של בהירות קוד, ביצועים ושביעות רצון משתמשים הם משמעותיים ושווים את ההשקעה.