ترکیب وضعیت بارگذاری React Suspense: مدیریت بارگذاری تو در تو

React Suspense که در React 16.6 معرفی شد، روشی اعلانی برای مدیریت وضعیت‌های بارگذاری در برنامه شما فراهم می‌کند. این ابزار به شما امکان می‌دهد رندر یک کامپوننت را تا زمانی که وابستگی‌های آن (مانند داده یا کد) آماده شوند، "معلق" کنید. در حالی که استفاده اولیه از آن نسبتاً ساده است، تسلط بر Suspense شامل درک نحوه ترکیب موثر وضعیت‌های بارگذاری، به ویژه هنگام برخورد با سناریوهای بارگذاری تو در تو می‌شود. این مقاله یک راهنمای جامع برای React Suspense و تکنیک‌های پیشرفته ترکیب آن برای یک تجربه کاربری روان و جذاب را ارائه می‌دهد.

درک اصول اولیه React Suspense

در هسته خود، Suspense یک کامپوننت React است که یک پراپ fallback را می‌پذیرد. این fallback در حالی رندر می‌شود که کامپوننت(ها)ی پیچیده شده توسط Suspense منتظر بارگذاری چیزی هستند. رایج‌ترین موارد استفاده شامل موارد زیر است:

• تقسیم کد با React.lazy: وارد کردن پویا کامپوننت‌ها برای کاهش اندازه اولیه بسته.
• واکشی داده: انتظار برای حل شدن داده‌ها از یک API قبل از رندر کامپوننت وابسته به آن.

تقسیم کد با React.lazy

React.lazy به شما امکان می‌دهد کامپوننت‌های React را بر اساس نیاز بارگذاری کنید. این می‌تواند زمان بارگذاری اولیه برنامه شما را به طور قابل توجهی بهبود بخشد، به خصوص برای برنامه‌های بزرگ با کامپوننت‌های زیاد. در اینجا یک مثال پایه آورده شده است:

            import React, { Suspense, lazy } from 'react';\n\nconst MyComponent = lazy(() => import('./MyComponent'));\n\nfunction App() {\n  return (\n    <Suspense fallback={<p>Loading...</p>}>\n      <MyComponent />\n    </Suspense>\n  );\n}\n\nexport default App;\n
            

              
                Copy
              
            
          

در این مثال، MyComponent تنها زمانی که به آن نیاز است بارگذاری می‌شود. در حالی که در حال بارگذاری است، fallback (در این مورد، یک پیام ساده "در حال بارگذاری...") نمایش داده می‌شود.

واکشی داده با Suspense

در حالی که React.lazy به طور مستقیم با Suspense کار می‌کند، واکشی داده رویکرد کمی متفاوتی را می‌طلبد. Suspense مستقیماً با کتابخانه‌های استاندارد واکشی داده مانند fetch یا axios یکپارچه نمی‌شود. در عوض، شما باید از یک کتابخانه یا الگو استفاده کنید که بتواند یک کامپوننت را در حین انتظار برای داده "معلق" کند. یک راه‌حل محبوب شامل استفاده از یک کتابخانه واکشی داده مانند swr یا react-query، یا پیاده‌سازی یک استراتژی مدیریت منبع سفارشی است.

در اینجا یک مثال مفهومی با استفاده از رویکرد مدیریت منبع سفارشی آورده شده است:

            // Resource.js\nconst createResource = (promise) => {\n  let status = 'pending';\n  let result;\n  let suspender = promise.then(\n    (r) => {\n      status = 'success';\n      result = r;\n    },\n    (e) => {\n      status = 'error';\n      result = e;\n    }\n  );\n\n  return {\n    read() {\n      if (status === 'pending') {\n        throw suspender;\n      } else if (status === 'error') {\n        throw result;\n      }\n      return result;\n    },\n  };\n};\n\nexport default createResource;\n\n// MyComponent.js\nimport React from 'react';\nimport createResource from './Resource';\n\nconst fetchData = () =>\n  new Promise((resolve) =>\n    setTimeout(() => resolve({ data: 'Fetched Data!' }), 2000)\n  );\n\nconst resource = createResource(fetchData());\n\nfunction MyComponent() {\n  const data = resource.read();\n  return <p>{data.data}</p>;\n}\n\nexport default MyComponent;\n\n// App.js\nimport React, { Suspense } from 'react';\nimport MyComponent from './MyComponent';\n\nfunction App() {\n  return (\n    <Suspense fallback={<p>Loading data...</p>}>\n      <MyComponent />\n    </Suspense>\n  );\n}\n\nexport default App;\n
            

              
                Copy
              
            
          

توضیح:

• createResource: این تابع یک پرامیس را می‌گیرد و یک شیء با متد read برمی‌گرداند.
• read: این متد وضعیت پرامیس را بررسی می‌کند. اگر در حالت pending باشد، پرامیس را throw می‌کند که کامپوننت را معلق می‌کند. اگر حل شده باشد، داده را برمی‌گرداند. اگر رد شده باشد، خطا را throw می‌کند.
• MyComponent: این کامپوننت از متد resource.read() برای دسترسی به داده استفاده می‌کند. اگر داده آماده نباشد، کامپوننت معلق می‌شود.
• App: کامپوننت MyComponent را در Suspense قرار می‌دهد و یک رابط کاربری fallback را در حین بارگذاری داده فراهم می‌کند.

ترکیب وضعیت‌های بارگذاری: قدرت Suspense تو در تو

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

Suspense تو در توی پایه

بیایید سناریویی را تصور کنیم که در آن شما یک صفحه با سربرگ، ناحیه محتوای اصلی و نوار کناری دارید. هر یک از این کامپوننت‌ها ممکن است وابستگی‌های ناهمگام خود را داشته باشند. شما می‌توانید از کامپوننت‌های Suspense تو در تو برای نمایش وضعیت‌های بارگذاری متفاوت برای هر بخش به طور مستقل استفاده کنید.

            import React, { Suspense, lazy } from 'react';\n\nconst Header = lazy(() => import('./Header'));\nconst MainContent = lazy(() => import('./MainContent'));\nconst Sidebar = lazy(() => import('./Sidebar'));\n\nfunction App() {\n  return (\n    <div>\n      <Suspense fallback={<p>Loading header...</p>}>\n        <Header />\n      </Suspense>\n      <div style={{ display: 'flex' }}>\n        <Suspense fallback={<p>Loading main content...</p>}>\n          <MainContent />\n        </Suspense>\n        <Suspense fallback={<p>Loading sidebar...</p>}>\n          <Sidebar />\n        </Suspense>\n      </div>\n    </div>\n  );\n}\n\nexport default App;\n
            

              
                Copy
              
            
          

در این مثال، هر کامپوننت (Header، MainContent و Sidebar) در مرز Suspense خود پیچیده شده است. این بدان معناست که اگر Header هنوز در حال بارگذاری باشد، پیام "در حال بارگذاری سربرگ..." نمایش داده می‌شود، در حالی که MainContent و Sidebar می‌توانند به طور مستقل بارگذاری شوند. این امکان یک تجربه کاربری پاسخگوتر و آموزنده‌تر را فراهم می‌کند.

اولویت‌بندی وضعیت‌های بارگذاری

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

            import React, { Suspense, lazy } from 'react';\n\nconst Header = lazy(() => import('./Header'));\nconst MainContent = lazy(() => import('./MainContent'));\n\nfunction App() {\n  return (\n    <Suspense fallback={<p>Loading header and content...</p>}>\n      <Header />\n      <Suspense fallback={<p>Loading main content...</p>}>\n        <MainContent />\n      </Suspense>\n    </Suspense>\n  );\n}\n\nexport default App;\n
            

              
                Copy
              
            
          

در این مثال، Header و MainContent هر دو در یک مرز Suspense بیرونی و واحد پیچیده شده‌اند. این بدان معناست که پیام "در حال بارگذاری سربرگ و محتوا..." تا زمانی که هر دو Header و MainContent بارگذاری شوند، نمایش داده می‌شود. Suspense داخلی برای MainContent تنها در صورتی فعال می‌شود که Header از قبل بارگذاری شده باشد، که تجربه بارگذاری دقیق‌تری را برای ناحیه محتوا فراهم می‌کند.

مدیریت بارگذاری تو در توی پیشرفته

فراتر از تو در توی پایه، می‌توانید از تکنیک‌های پیشرفته‌تری برای مدیریت وضعیت‌های بارگذاری در برنامه‌های پیچیده استفاده کنید. اینها شامل موارد زیر هستند:

• کامپوننت‌های Fallback سفارشی: استفاده از نشانگرهای بارگذاری جذاب‌تر و آموزنده‌تر بصری.
• مدیریت خطا با Error Boundaries: مدیریت gracefully خطاها که در طول بارگذاری رخ می‌دهند.
• Debouncing و Throttling: بهینه‌سازی تعداد دفعاتی که یک کامپوننت تلاش می‌کند داده بارگذاری کند.
• ترکیب Suspense با Transitions: ایجاد انتقال‌های روان بین وضعیت‌های بارگذاری و بارگذاری شده.

کامپوننت‌های Fallback سفارشی

به جای استفاده از پیام‌های متنی ساده به عنوان fallback، می‌توانید کامپوننت‌های fallback سفارشی ایجاد کنید که تجربه کاربری بهتری را ارائه می‌دهند. این کامپوننت‌ها می‌توانند شامل موارد زیر باشند:

• اسپینرها (Spinners): نشانگرهای بارگذاری متحرک.
• اسکلتون‌ها (Skeletons): عناصر رابط کاربری نگهدارنده که ساختار محتوای واقعی را تقلید می‌کنند.
• نوارهای پیشرفت (Progress Bars): نشانگرهای بصری پیشرفت بارگذاری.

در اینجا یک مثال از استفاده از کامپوننت اسکلتون به عنوان fallback آورده شده است:

            import React from 'react';\nimport Skeleton from 'react-loading-skeleton'; // You'll need to install this library\n\nfunction LoadingSkeleton() {\n  return (\n    <div>\n      <Skeleton count={3} />\n    </div>\n  );\n}\n\nexport default LoadingSkeleton;\n\n// Usage in App.js\nimport React, { Suspense, lazy } from 'react';\nimport LoadingSkeleton from './LoadingSkeleton';\n\nconst MyComponent = lazy(() => import('./MyComponent'));\n\nfunction App() {\n  return (\n    <Suspense fallback={<LoadingSkeleton />}>\n      <MyComponent />\n    </Suspense>\n  );
}\n\nexport default App;\n
            

              
                Copy
              
            
          

این مثال از کتابخانه react-loading-skeleton برای نمایش مجموعه‌ای از نگهدارنده‌های اسکلتون در حین بارگذاری MyComponent استفاده می‌کند.

مدیریت خطا با Error Boundaries

مهم است که خطاهایی که ممکن است در طول فرآیند بارگذاری رخ دهند را مدیریت کنید. React Error Boundaries را فراهم می‌کند، که کامپوننت‌هایی هستند که خطاهای جاوااسکریپت را در هر جای درخت کامپوننت فرزند خود می‌گیرند، آن خطاها را ثبت می‌کنند و یک رابط کاربری fallback نمایش می‌دهند. Error Boundaries با Suspense به خوبی کار می‌کنند تا یک مکانیزم قوی برای مدیریت خطا فراهم کنند.

            import React, { Component } from 'react';\n\nclass ErrorBoundary extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(error) {\n    // Update state so the next render will show the fallback UI.\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    // You can also log the error to an error reporting service\n    console.error(error, errorInfo);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      // You can render any custom fallback UI\n      return <h1>Something went wrong.</h1>;\n    }\n\n    return this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n\n// Usage in App.js\nimport React, { Suspense, lazy } from 'react';\nimport ErrorBoundary from './ErrorBoundary';\n\nconst MyComponent = lazy(() => import('./MyComponent'));\n\nfunction App() {\n  return (\n    <ErrorBoundary>\n      <Suspense fallback={<p>Loading...</p>}>\n        <MyComponent />\n      </Suspense>\n    </ErrorBoundary>\n  );\n}\n\nexport default App;\n
            

              
                Copy
              
            
          

در این مثال، کامپوننت ErrorBoundary، کامپوننت Suspense را دربرمی‌گیرد. اگر خطایی در حین بارگذاری MyComponent رخ دهد، ErrorBoundary خطا را گرفته و پیام "Something went wrong." را نمایش می‌دهد.

Debouncing و Throttling

در برخی موارد، ممکن است بخواهید تعداد دفعاتی که یک کامپوننت تلاش می‌کند داده بارگذاری کند را محدود کنید. این می‌تواند مفید باشد اگر فرآیند واکشی داده پرهزینه است یا اگر می‌خواهید از فراخوانی‌های بیش از حد API جلوگیری کنید. Debouncing و throttling دو تکنیک هستند که می‌توانند به شما در دستیابی به این هدف کمک کنند.

Debouncing: اجرای یک تابع را تا پس از گذشت مدت زمان مشخصی از آخرین فراخوانی آن به تأخیر می‌اندازد.

Throttling: نرخ اجرای یک تابع را محدود می‌کند.

در حالی که این تکنیک‌ها اغلب برای رویدادهای ورودی کاربر اعمال می‌شوند، می‌توانند برای کنترل واکشی داده در مرزهای Suspense نیز استفاده شوند. پیاده‌سازی به کتابخانه خاص واکشی داده یا استراتژی مدیریت منبعی که استفاده می‌کنید بستگی دارد.

ترکیب Suspense با Transitions

API Transitions در React (معرفی شده در React 18) به شما امکان می‌دهد انتقال‌های روان‌تری بین وضعیت‌های مختلف در برنامه خود، از جمله وضعیت‌های بارگذاری و بارگذاری شده، ایجاد کنید. می‌توانید از useTransition استفاده کنید تا به React سیگنال دهید که یک به‌روزرسانی وضعیت یک انتقال است، که می‌تواند به جلوگیری از به‌روزرسانی‌های ناگهانی رابط کاربری کمک کند.

            import React, { Suspense, lazy, useState, useTransition } from 'react';\n\nconst MyComponent = lazy(() => import('./MyComponent'));\n\nfunction App() {\n  const [isPending, startTransition] = useTransition();\n  const [showComponent, setShowComponent] = useState(false);\n\n  const handleClick = () => {\n    startTransition(() => {\n      setShowComponent(true);\n    });\n  };\n\n  return (\n    <div>\n      <button onClick={handleClick} disabled={isPending}>\n        {isPending ? 'Loading...' : 'Load Component'}\n      </button>\n      {showComponent && (\n        <Suspense fallback={<p>Loading component...</p>}>\n          <MyComponent />\n        </Suspense>\n      )}\n    </div>\n  );
}\n\nexport default App;\n
            

              
                Copy
              
            
          

در این مثال، کلیک بر روی دکمه "Load Component" یک انتقال را آغاز می‌کند. React بارگذاری MyComponent را اولویت‌بندی می‌کند در حالی که رابط کاربری را پاسخگو نگه می‌دارد. وضعیت isPending نشان می‌دهد که آیا یک انتقال در حال انجام است یا خیر، که به شما امکان می‌دهد دکمه را غیرفعال کرده و بازخورد بصری به کاربر ارائه دهید.

مثال‌ها و سناریوهای واقعی

برای توضیح بیشتر کاربردهای عملی Suspense تو در تو، بیایید چند سناریوی واقعی را در نظر بگیریم:

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

مثال: صفحه محصول فروشگاه الکترونیکی

بیایید نحوه پیاده‌سازی Suspense تو در تو را در یک صفحه محصول فروشگاه الکترونیکی بررسی کنیم:

            import React, { Suspense, lazy } from 'react';\n\nconst ProductDetails = lazy(() => import('./ProductDetails'));\nconst ProductReviews = lazy(() => import('./ProductReviews'));\nconst RelatedProducts = lazy(() => import('./RelatedProducts'));\n\nfunction ProductPage() {\n  return (\n    <div>\n      <Suspense fallback={<p>Loading product details...</p>}>\n        <ProductDetails />\n      </Suspense>\n\n      <div style={{ marginTop: '20px' }}>\n        <Suspense fallback={<p>Loading product reviews...</p>}>\n          <ProductReviews />\n        </Suspense>\n      </div>\n\n      <div style={{ marginTop: '20px' }}>\n        <Suspense fallback={<p>Loading related products...</p>}>\n          <RelatedProducts />\n        </Suspense>\n      </div>\n    </div>\n  );
}\n\nexport default ProductPage;\n
            

              
                Copy
              
            
          

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

بهترین شیوه‌ها و ملاحظات

هنگام کار با React Suspense و مدیریت بارگذاری تو در تو، مهم است که بهترین شیوه‌های زیر را در نظر داشته باشید:

• مرزهای Suspense را کوچک نگه دارید: مرزهای Suspense کوچک‌تر کنترل دقیق‌تری بر بارگذاری و تجربه کاربری بهتر را فراهم می‌کنند. از پیچیدن بخش‌های بزرگ برنامه خود در یک مرز Suspense واحد خودداری کنید.
• از کامپوننت‌های Fallback سفارشی استفاده کنید: پیام‌های متنی ساده را با نشانگرهای بارگذاری جذاب و آموزنده بصری، مانند اسکلتون‌ها، اسپینرها یا نوارهای پیشرفت جایگزین کنید.
• خطاها را با ظرافت مدیریت کنید: از Error Boundaries برای گرفتن خطاهایی که در طول فرآیند بارگذاری رخ می‌دهند و نمایش یک پیام خطای کاربرپسند استفاده کنید.
• واکشی داده را بهینه کنید: از کتابخانه‌های واکشی داده مانند swr یا react-query برای ساده‌سازی واکشی و کش کردن داده استفاده کنید.
• عملکرد را در نظر بگیرید: از تو در تو کردن بیش از حد کامپوننت‌های Suspense خودداری کنید، زیرا این امر می‌تواند بر عملکرد تأثیر بگذارد. از debouncing و throttling برای محدود کردن تعداد دفعاتی که یک کامپوننت تلاش می‌کند داده بارگذاری کند، استفاده کنید.
• وضعیت‌های بارگذاری خود را آزمایش کنید: وضعیت‌های بارگذاری خود را به طور کامل آزمایش کنید تا اطمینان حاصل کنید که تجربه کاربری خوبی را در شرایط مختلف شبکه ارائه می‌دهند.

نتیجه‌گیری

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

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

با پذیرش این تکنیک‌ها، می‌توانید اطمینان حاصل کنید که برنامه‌های شما تجربه‌ای روان و لذت‌بخش را برای کاربران در سراسر جهان، بدون توجه به موقعیت مکانی یا شرایط شبکه آنها، فراهم می‌کنند.