استفاده از SWR برای فچینگ داده‌ها در React

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

ابتدا بیایید نگاهی بیندازیم به این که چرا باید از SWR استفاده کنیم. SWR مخفف عبارت "stale-while-revalidate" است که به معنای "قدیمی تا بازنویسی شود" می‌باشد. این رویکرد به شما این امکان را می‌دهد که داده‌های خود را به صورت محلی ذخیره کنید و هر بار که نیاز به فچینگ جدید دارید، بدون از دست دادن زمان، داده‌های محلی را نمایش دهید و سپس داده‌های جدید را بارگذاری کنید. این کار باعث افزایش سرعت و بهبود تجربه کاربری می‌شود.

برای نصب SWR، تنها کافیست که از npm یا yarn استفاده کنید. به راحتی می‌توانید با دستور زیر SWR را به پروژه خود اضافه کنید:

npm install swr
 

یا اگر از yarn استفاده می‌کنید:

yarn add swr

بعد از نصب، حالا نوبت به استفاده از SWR در کدهای خود می‌رسد. یکی از ویژگی‌های جذاب SWR این است که استفاده از آن بسیار ساده است. برای فچینگ داده‌ها با استفاده از SWR، شما نیاز به یک تابع فچینگ و استفاده از هوک useSWR دارید. بیایید یک مثال ساده را بررسی کنیم:

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function App() {
  const { data, error } = useSWR('/api/data', fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return <div>{data.message}</div>;
}

در این مثال، ما از یک تابع fetcher برای فچ کردن داده‌ها از یک API استفاده می‌کنیم و سپس با استفاده از useSWR این داده‌ها را در کامپوننت React خود بارگذاری می‌کنیم. اگر داده‌ها هنوز در حال بارگذاری باشند، پیام "Loading..." نمایش داده می‌شود و در صورت بروز خطا، پیام "Failed to load" را مشاهده خواهیم کرد.

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

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

const { data, error } = useSWR('/api/data', fetcher, { shouldRetryOnError: true, errorRetryCount: 3 });
 

با این تنظیمات، در صورت بروز خطا، SWR سه بار دیگر تلاش خواهد کرد تا داده‌ها را فچ کند. این قابلیت به شما کمک می‌کند تا از پایداری برنامه‌های خود مطمئن شوید.

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

const { data, error, isValidating } = useSWR('/api/data', fetcher, { revalidateOnFocus: false });
 

در این حالت، SWR داده‌ها را تنها زمانی که کامپوننت برای اولین بار بارگذاری می‌شود فچ می‌کند و سپس تا زمانی که کاربر روی صفحه تمرکز نکند، داده‌ها را مجدداً بارگذاری نمی‌کند. این روش به بهینه‌سازی مصرف منابع کمک می‌کند.

در نهایت، یکی از قابلیت‌های کاربردی SWR استفاده از Middleware‌ها است. Middleware‌ها به شما اجازه می‌دهند که رفتار پیش‌فرض SWR را تغییر دهید یا به آن ویژگی‌های جدید اضافه کنید. به عنوان مثال، می‌توانید Middleware‌ای ایجاد کنید که زمان فچینگ داده‌ها را لاگ کند:

const logger = (useSWRNext) => (key, fetcher, config) => {
  const { data, error, isValidating } = useSWRNext(key, fetcher, config);
  console.log(`Fetching data for ${key}`);
  return { data, error, isValidating };
};

const { data, error } = useSWR('/api/data', fetcher, { use: [logger] });
 

این مثال نشان می‌دهد که چگونه می‌توانید با استفاده از Middleware‌ها، SWR را سفارشی کنید و از آن بهره بیشتری ببرید.

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