نحوه مدیریت واکشی داده در Next.js با استفاده از SWR

مدیریت واکشی داده‌ها در Next.js می‌تواند مشکل باشد، اما استفاده از کتابخانه SWR با نام مستعار (کهنه-در حالی که تأیید مجدد می‌شود) آن را بسیار قابل مدیریت می‌کند. SWR یک کتابخانه سبک وزن است که به شما امکان می دهد واکشی و ذخیره سازی داده ها را در برنامه Next.js خود به طور موثر انجام دهید.

SWR بسیاری از ویژگی‌های حیاتی را ارائه می‌کند، مانند توانایی آن در تأیید مجدد داده‌ها به صورت خودکار، ذخیره‌سازی حافظه پنهان، و غیره. این مقاله اطلاعاتی در مورد نحوه راه‌اندازی و ادغام کتابخانه SWR در پروژه Next.js ارائه می‌دهد.

نصب SWR

برای استفاده از SWR کتابخانه در برنامه Next.js خود، ابتدا باید کتابخانه را با اجرای دستور زیر در ترمینال خود نصب کنید:

npm install swr

اگر از نخ استفاده می کنید، این دستور را اجرا کنید:

yarn add swr

بعد، شما وارد کنید useSWR قلاب کنید تا به راحتی داده ها را از API خود واکشی کنید. این useSWR هوک یک قلاب برای مدیریت واکشی و ذخیره داده ها است. این useSWR hook یک کلید (URL یا شناسه) را به عنوان ورودی می گیرد و یک شی را برمی گرداند که حاوی داده های واکشی شده، خطا و وضعیت بارگیری است.

برای استفاده از useSWR هوک، شما باید یک تابع واکشی حاوی درخواست واکشی ایجاد کنید.

مثلا:

const fetcher = async (url) => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

پس از ایجاد تابع fetcher، از آن در useSWR قلاب:

import useSWR from 'swr'

const fetcher = async (url) => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

export default function Home() {
  const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher)

  if (error) return <div>Failed to load</div>
    if (isLoading) return <div>Loading...</div>

    return (
        <div>{data.title}</div>
    )
}

در بلوک کد بالا، useSWR hook یک شی را با دو ویژگی برمی گرداند: data، error، و isLoading. اگر در واکشی داده ها خطایی رخ دهد، پیام «بارگیری نشد» را برمی گرداند. اگر داده ها هنوز بارگذاری نشده باشند، پیغام Loading… را برمی گرداند.

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

رسیدگی به اعتبار مجدد خودکار

یکی از ویژگی های اساسی کتابخانه SWR توانایی آن در اعتبارسنجی مجدد داده های قدیمی به طور خودکار است. این revalidateOnFocus، refreshInterval، و revalidatOnReconnect خواص مسئول این توانایی هستند. این revalidateOnFocus تضمین می کند که وقتی کاربر دوباره روی صفحه وب شما تمرکز می کند یا بین برگه ها جابجا می شود، کتابخانه SWR درخواست واکشی دیگری را به API ارائه می دهد.

به طور پیش فرض، revalidateOnFocus ویژگی فعال است برای خاموش کردن آن، تنظیم کنید revalidateOnFocus دارایی به نادرست.

اینطوری:

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

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

برای غیر فعال کردن آن، شما را تنظیم کنید revalidateOnReconnect دارایی به نادرست:

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

با استفاده از refreshInterval ویژگی. این refreshInterval ویژگی یک بازه زمانی بر حسب میلی ثانیه است که تعیین می کند داده های شما هر چند وقت یکبار از یک API واکشی می شود. مقدار پیش فرض 0 است.

تنظیم کردن refreshInterval به یک مقدار مثبت تضمین می کند که داده ها در بازه زمانی مشخص شده دوباره واکشی می شوند.

اینطوری:

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

در مواردی که داده‌هایی که از API واکشی می‌کنید ثابت می‌مانند، تأیید مجدد آن هیچ تغییری ایجاد نمی‌کند. در چنین مواردی، ویژگی اعتبار سنجی مجدد خودکار کتابخانه SWR غیر ضروری است. بهتر است آن را غیرفعال کنید. برای غیرفعال کردن ویژگی اعتبار سنجی مجدد خودکار، شما را تنظیم کنید revalidateOnFocus و revalidateOnReconnect خواص را نادرست و رها کنید refreshInterval در 0.

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

مثلا:

import useSWRImmutable from 'swr/immutable'

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

نتیجه

SWR یک کتابخانه عالی برای واکشی و ذخیره سازی داده ها در برنامه Next.js شما است. استفاده از آن آسان است، قابل تنظیم است و ویژگی هایی مانند اعتبار سنجی مجدد و خودکار را ارائه می دهد، که آن را به انتخابی عالی برای هر برنامه Next.js که نیاز به واکشی داده ها از یک API دارد، تبدیل می کند. این مقاله به شما کمک می کند SWR را در پروژه Next.js بعدی خود ادغام کنید.