درک SWR (Stale-While-Revalidate) در React برای واکشی بهینه داده

Summarize this content to 400 words in Persian Lang

SWR (Stale-While-Revalidate) در React

SWR یک کتابخانه قلاب React برای واکشی داده است که مخفف “Stale-While-Revalidate” است. این یک راه حل زیبا و بهینه برای مدیریت واکشی، ذخیره سازی و اعتبار سنجی مجدد داده ها از راه دور ارائه می دهد. این به شما امکان می‌دهد تا در حین نمایش داده‌های قدیمی (در حافظه پنهان) از یک درخواست قبلی، داده‌ها را واکشی کنید و سپس با واکشی آخرین داده‌ها در پس‌زمینه بدون مسدود کردن رابط کاربری، داده‌ها را مجدداً تأیید کنید. این تضمین می‌کند که کاربر بازخورد فوری را در حالی که هنوز داده‌های تازه دریافت می‌کند، ببیند.

SWR به طور گسترده در برنامه های React برای واکشی داده ها استفاده می شود زیرا راه حلی با کاربری آسان، بسیار کارآمد و انعطاف پذیر برای مدیریت داده های ناهمزمان ارائه می دهد.

1. ویژگی های کلیدی SWR:

Stale-While-Revalidate: SWR هنگام واکشی داده‌های به‌روزشده (تأیید شده) در پس‌زمینه، داده‌های کش (کهنه) را برمی‌گرداند.

واکشی مجدد خودکار: SWR به طور خودکار داده ها را در پس زمینه دوباره واکشی می کند تا داده ها را به روز نگه دارد.

ذخیره سازی داخلی: نتایج درخواست‌ها را در حافظه پنهان ذخیره می‌کند و از آن برای برگرداندن فوری داده‌های قدیمی استفاده می‌کند.

درخواست حذف مجدد: SWR به‌طور خودکار درخواست‌ها را حذف می‌کند و اطمینان می‌دهد که چندین درخواست یکسان به طور همزمان اجرا نمی‌شوند.

نظرسنجی مبتنی بر فاصله: می توانید فواصل زمانی را برای نظرسنجی داده ها تعیین کنید (بازیابی داده ها در فواصل زمانی منظم).

رسیدگی به خطا: مکانیزم‌های داخلی برای رسیدگی به خطاها و تلاش‌های مجدد فراهم می‌کند.

صفحه بندی و پشتیبانی مکان نما صفحه بندی: SWR همچنین برای مدیریت صفحه بندی داده ها مفید است.

2. راه اندازی اولیه SWR

برای شروع کار با SWR، ابتدا باید آن را در پروژه React خود نصب کنید:

npm install swr

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس از نصب SWR، می توانید از آن در اجزای خود استفاده کنید.

3. مثال: واکشی داده با استفاده از SWR

در اینجا یک مثال اساسی وجود دارد که نحوه استفاده از SWR برای واکشی داده ها در یک جزء React را نشان می دهد.

import React from ‘react’;
import useSWR from ‘swr’;

// Function to fetch data from the API
const fetcher = (url) => fetch(url).then((res) => res.json());

const DataFetchingComponent = () => {
// useSWR hook with the URL and fetcher function
const { data, error, isLoading } = useSWR(‘https://api.example.com/data’, fetcher);

if (isLoading) {
return <div>Loading…</div>;
}

if (error) {
return <div>Error: {error.message}</div>;
}

return (
<div>
<h1>Fetched Data</h1>
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
};

export default DataFetchingComponent;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. توضیح آیین نامه:

5. استفاده پیشرفته: مدیریت اعتبار مجدد و واکشی بازه زمانی

می توانید از ویژگی های داخلی SWR برای کنترل بهتر بر واکشی داده ها استفاده کنید.

اعتبار سنجی مجدد در تمرکز:

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

const { data, error } = useSWR(‘https://api.example.com/data’, fetcher, {
revalidateOnFocus: true,
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

فاصله نظرسنجی:

می‌توانید نظرسنجی را با فاصله واکشی مجدد تنظیم کنید تا داده‌ها در فواصل زمانی منظم تازه نگه داشته شوند.

const { data, error } = useSWR(‘https://api.example.com/data’, fetcher, {
refreshInterval: 5000, // Re-fetch every 5 seconds
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خطا سعی مجدد:

SWR همچنین به شما این امکان را می دهد که نحوه اجرای مجدد درخواست های ناموفق را پیکربندی کنید.

const { data, error } = useSWR(‘https://api.example.com/data’, fetcher, {
errorRetryCount: 3, // Retry the request 3 times if it fails
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

6. ذخیره با SWR

SWR داده ها را در حافظه پنهان ذخیره می کند و نسخه کش شده را تا زمانی که مجدداً آن را تأیید کند، برمی گرداند. این به این معنی است که اگر دوباره رندر کنید یا دوباره به کامپوننت بروید، داده‌های ذخیره‌شده را فوراً نشان می‌دهد و زمان پاسخگویی سریع‌تری به کاربر می‌دهد.

const { data, error } = useSWR(‘https://api.example.com/data’, fetcher);

// The next time this component is rendered, SWR will serve cached data until it is revalidated.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

7. SWR با سفارشی Fetcher:

اگر نیاز به سفارشی کردن منطق واکشی دارید (مثلاً اضافه کردن هدرهای احراز هویت)، می توانید یک تابع واکشی سفارشی ارائه دهید.

const customFetcher = (url) =>
fetch(url, {
headers: {
Authorization: `Bearer ${token}`,
},
}).then((res) => res.json());

const { data, error } = useSWR(‘https://api.example.com/data’, customFetcher);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

8. SWR در مقابل Axios & Fetch

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

Axios: برای انجام درخواست‌های ساده HTTP عالی است، اما ویژگی‌هایی مانند حافظه پنهان، واکشی مجدد پس‌زمینه، یا تأیید مجدد خودکار را ارائه نمی‌دهد.

SWR: تمرکز بر واکشی داده‌ها با حافظه پنهان، اعتبارسنجی مجدد و به‌روزرسانی‌های پس‌زمینه برای تازه و سریع نگه داشتن رابط کاربری.

9. نتیجه گیری

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

npm install swr

import React from 'react';
import useSWR from 'swr';

// Function to fetch data from the API
const fetcher = (url) => fetch(url).then((res) => res.json());

const DataFetchingComponent = () => {
  // useSWR hook with the URL and fetcher function
  const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>Fetched Data</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetchingComponent;

const { data, error } = useSWR('https://api.example.com/data', fetcher, {
  revalidateOnFocus: true,
});

const { data, error } = useSWR('https://api.example.com/data', fetcher, {
  refreshInterval: 5000,  // Re-fetch every 5 seconds
});

const { data, error } = useSWR('https://api.example.com/data', fetcher, {
  errorRetryCount: 3,  // Retry the request 3 times if it fails
});

const { data, error } = useSWR('https://api.example.com/data', fetcher);

// The next time this component is rendered, SWR will serve cached data until it is revalidated.

const customFetcher = (url) =>
  fetch(url, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  }).then((res) => res.json());

const { data, error } = useSWR('https://api.example.com/data', customFetcher);