هماهنگی تعلیق React: تسلط بر واکشی موازی داده

React Suspense نحوه برخورد ما با عملیات ناهمزمان، به ویژه واکشی داده‌ها را متحول کرده است. این به کامپوننت‌ها اجازه می‌دهد تا در حین انتظار برای بارگیری داده‌ها، رندرینگ را "به حالت تعلیق" درآورند و راهی اعلانی برای مدیریت حالت‌های بارگیری ارائه دهند. با این حال، پیچیدن ساده واکشی‌های داده‌های فردی با Suspense می‌تواند منجر به یک اثر آبشاری شود، جایی که یک واکشی قبل از شروع دیگری تکمیل می‌شود و بر عملکرد تأثیر منفی می‌گذارد. این پست وبلاگ به بررسی راهبردهای پیشرفته برای هماهنگ‌سازی چندین واکشی داده به صورت موازی با استفاده از Suspense، بهینه‌سازی پاسخگویی برنامه شما و بهبود تجربه کاربری برای مخاطبان جهانی می‌پردازد.

درک مشکل آبشار در واکشی داده

سناریویی را تصور کنید که در آن به نمایش یک پروفایل کاربری با نام، آواتار و فعالیت اخیر آنها نیاز دارید. اگر هر تکه از داده‌ها را به صورت متوالی واکشی کنید، کاربر یک چرخنده بارگیری را برای نام، سپس دیگری برای آواتار و در نهایت یکی برای فید فعالیت می‌بیند. این الگوی بارگیری متوالی یک اثر آبشاری ایجاد می‌کند و رندرینگ پروفایل کامل را به تأخیر می‌اندازد و کاربران را ناامید می‌کند. برای کاربران بین‌المللی با سرعت‌های مختلف شبکه، این تأخیر می‌تواند حتی بیشتر تلفظ شود.

به این قطعه کد ساده شده توجه کنید:

function UserProfile() {
  const name = useName(); // Fetches user name
  const avatar = useAvatar(name); // Fetches avatar based on name
  const activity = useActivity(name); // Fetches activity based on name

  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 وابسته هستند. این یک آبشار واضح ایجاد می‌کند – useAvatar و useActivity نمی‌توانند واکشی داده‌ها را آغاز کنند تا زمانی که useName تکمیل شود. این ناکارآمدی است و یک گلوگاه عملکرد رایج است.

راهبردهایی برای واکشی موازی داده با Suspense

کلید بهینه‌سازی واکشی داده با Suspense این است که تمام درخواست‌های داده را همزمان آغاز کنید. در اینجا چندین استراتژی وجود دارد که می‌توانید به کار ببرید:

1. پیش بارگذاری داده با `React.preload` و منابع

یکی از قدرتمندترین تکنیک‌ها این است که داده‌ها را قبل از رندر شدن کامپوننت، از قبل بارگذاری کنید. این شامل ایجاد یک "منبع" (یک شی که وعده واکشی داده‌ها را کپسوله می‌کند) و پیش واکشی داده‌ها است. `React.preload` در این زمینه کمک می‌کند. هنگامی که کامپوننت به داده‌ها نیاز دارد، قبلاً در دسترس است و تقریباً به طور کامل حالت بارگیری را حذف می‌کند.

یک منبع را برای واکشی یک محصول در نظر بگیرید:

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

// Usage:
const productResource = createProductResource(123);

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

اکنون، می‌توانید این منبع را قبل از رندر شدن کامپوننت ProductDetails از قبل بارگذاری کنید. به عنوان مثال، در طول گذار مسیر یا روی hover.

React.preload(productResource);

این تضمین می‌کند که داده‌ها احتمالاً زمانی که کامپوننت ProductDetails به آن نیاز دارد، در دسترس است و حالت بارگیری را به حداقل می‌رساند یا از بین می‌برد.

2. استفاده از `Promise.all` برای واکشی همزمان داده‌ها

رویکرد ساده و مؤثر دیگر استفاده از Promise.all برای شروع تمام واکشی‌های داده به طور همزمان در یک مرز Suspense است. این زمانی خوب کار می‌کند که وابستگی‌های داده از قبل شناخته شده باشند.

بیایید به مثال پروفایل کاربری برگردیم. به جای واکشی متوالی داده‌ها، می‌توانیم نام، آواتار و فید فعالیت را همزمان واکشی کنیم:

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

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

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

async function fetchActivity(name) {
  // Simulate API call
  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` متکی باشند، اما در داخل مرزهای تعلیق جداگانه رندر شوند، می‌توانید قول `fetchName` را به والد منتقل کنید و آن را از طریق React Context ارائه دهید.

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

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

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

async function fetchActivity(name) {
  // Simulate API call
  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 سفارشی برای مدیریت واکشی‌های موازی

برای سناریوهای پیچیده‌تر با وابستگی‌های داده بالقوه مشروط، می‌توانید یک hook سفارشی ایجاد کنید تا واکشی موازی داده‌ها را مدیریت کند و یک منبع را برگرداند که 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 };
}

// Example usage:
async function fetchUserData(userId) {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'User ' + userId };
}

async function fetchUserPosts(userId) {
  // Simulate API call
  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;

این رویکرد پیچیدگی مدیریت وعده‌ها و حالت‌های بارگیری را در داخل hook کپسوله می‌کند و کد کامپوننت را پاک‌تر و متمرکزتر بر رندر کردن داده‌ها می‌کند.

4. آب‌رسانی انتخابی با رندرینگ سرور استریمینگ

برای برنامه‌های ارائه شده از سرور، React 18 آب‌رسانی انتخابی را با رندرینگ سرور استریمینگ معرفی می‌کند. این به شما امکان می‌دهد HTML را در قطعاتی که در سرور در دسترس قرار می‌گیرد، برای کلاینت ارسال کنید. می‌توانید کامپوننت‌های با بارگیری آهسته را با مرزهای <Suspense> بپیچید، و به بقیه صفحه اجازه دهید تا تعاملی شوند در حالی که اجزای آهسته هنوز در سرور در حال بارگیری هستند. این به طور چشمگیری عملکرد درک شده را بهبود می‌بخشد، به خصوص برای کاربرانی که اتصال شبکه یا دستگاه‌های کند دارند.

سناریویی را در نظر بگیرید که یک وب‌سایت خبری نیاز به نمایش مقالاتی از مناطق مختلف جهان (به عنوان مثال، آسیا، اروپا، آمریکا) دارد. برخی از منابع داده ممکن است کندتر از بقیه باشند. آب‌رسانی انتخابی اجازه می‌دهد مقالاتی از مناطق سریع‌تر ابتدا نمایش داده شوند، در حالی که مقالات مناطق کندتر هنوز در حال بارگیری هستند و از مسدود شدن کل صفحه جلوگیری می‌شود.

مدیریت خطاها و حالت‌های بارگیری

در حالی که Suspense مدیریت حالت بارگیری را ساده می‌کند، رسیدگی به خطا همچنان حیاتی است. مرزهای خطا (با استفاده از روش lifecycle componentDidCatch یا hook useErrorBoundary از کتابخانه‌هایی مانند `react-error-boundary`) به شما امکان می‌دهند خطاهایی را که در هنگام واکشی داده‌ها یا رندر رخ می‌دهند، به خوبی مدیریت کنید. این مرزهای خطا باید به صورت استراتژیک قرار داده شوند تا خطاها را در مرزهای Suspense خاص بگیرند و از خراب شدن کل برنامه جلوگیری شود.

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

function MyComponent() {
  // ... fetches data that might error
}

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

به یاد داشته باشید که UI بازگشتی اطلاعاتی و کاربرپسند را هم برای حالت‌های بارگیری و هم برای خطا ارائه دهید. این امر به ویژه برای کاربران بین‌المللی که ممکن است با سرعت‌های کندتر شبکه یا قطعی‌های خدمات منطقه‌ای مواجه شوند، مهم است.

بهترین شیوه‌ها برای بهینه‌سازی واکشی داده با Suspense

• شناسایی و اولویت‌بندی داده‌های حیاتی: تعیین کنید که کدام داده‌ها برای رندر اولیه برنامه شما ضروری هستند و اولویت واکشی آن داده‌ها را بدهید.
• در صورت امکان، داده‌ها را از قبل بارگذاری کنید: از `React.preload` و منابع برای پیش بارگذاری داده‌ها قبل از اینکه اجزا به آن نیاز داشته باشند استفاده کنید، و حالت‌های بارگیری را به حداقل برسانید.
• داده‌ها را همزمان واکشی کنید: از `Promise.all` یا hook های سفارشی برای شروع چندین واکشی داده به صورت موازی استفاده کنید.
• بهینه‌سازی نقاط پایانی API: اطمینان حاصل کنید که نقاط پایانی API شما برای عملکرد بهینه شده‌اند و تأخیر و اندازه payload را به حداقل می‌رسانند. استفاده از تکنیک‌هایی مانند GraphQL را برای واکشی فقط داده‌هایی که نیاز دارید، در نظر بگیرید.
• پیاده‌سازی کش کردن: داده‌های پرکاربرد را کش کنید تا تعداد درخواست‌های API را کاهش دهید. استفاده از کتابخانه‌هایی مانند `swr` یا `react-query` را برای قابلیت‌های کش کردن قوی در نظر بگیرید.
• استفاده از تقسیم کد: برنامه خود را به تکه‌های کوچکتر تقسیم کنید تا زمان بارگیری اولیه را کاهش دهید. تقسیم کد را با Suspense ترکیب کنید تا به تدریج بخش‌های مختلف برنامه خود را بارگیری و رندر کنید.
• نظارت بر عملکرد: به طور منظم عملکرد برنامه خود را با استفاده از ابزارهایی مانند Lighthouse یا WebPageTest نظارت کنید تا گلوگاه‌های عملکرد را شناسایی و برطرف کنید.
• مدیریت خطاها به طور موثر: مرزهای خطا را برای گرفتن خطاها در هنگام واکشی داده‌ها و رندر پیاده‌سازی کنید و پیام‌های خطا آموزنده‌ای را به کاربران ارائه دهید.
• رندرینگ سمت سرور (SSR) را در نظر بگیرید: به دلایل سئو و عملکرد، استفاده از SSR با استریمینگ و آب‌رسانی انتخابی را برای ارائه تجربه اولیه سریع‌تر در نظر بگیرید.

نتیجه

React Suspense، هنگامی که با استراتژی‌های واکشی موازی داده‌ها ترکیب می‌شود، یک جعبه ابزار قدرتمند برای ساخت برنامه‌های وب پاسخگو و با عملکرد بالا ارائه می‌دهد. با درک مشکل آبشار و پیاده‌سازی تکنیک‌هایی مانند پیش بارگذاری، واکشی همزمان با Promise.all و hook های سفارشی، می‌توانید تجربه کاربری را به طور قابل توجهی بهبود بخشید. به یاد داشته باشید که خطاها را به خوبی مدیریت کنید و عملکرد را نظارت کنید تا اطمینان حاصل شود که برنامه شما برای کاربران در سراسر جهان بهینه باقی می‌ماند. همانطور که React به تکامل خود ادامه می‌دهد، کاوش ویژگی‌های جدیدی مانند آب‌رسانی انتخابی با رندرینگ سرور استریمینگ، توانایی شما را برای ارائه تجربیات کاربری استثنایی، صرف نظر از مکان یا شرایط شبکه، بیشتر می‌کند. با پذیرش این تکنیک‌ها، می‌توانید برنامه‌هایی ایجاد کنید که نه تنها کاربردی هستند، بلکه برای مخاطبان جهانی شما نیز لذت‌بخش هستند.

این پست وبلاگ با هدف ارائه یک نمای کلی جامع از استراتژی‌های واکشی موازی داده با React Suspense بوده است. ما امیدواریم که آن را آموزنده و مفید یافته باشید. ما شما را تشویق می‌کنیم که این تکنیک‌ها را در پروژه‌های خود آزمایش کنید و یافته‌های خود را با جامعه به اشتراک بگذارید.