SWR چیست و چگونه از آن در Next.js استفاده می کنید؟

مشکلات عملکرد خود را با یک ابزار ذخیره سازی قوی برطرف کنید.

SWR (state-while-validate) یک روش واکشی داده است که توسط Vercel ساخته شده است. این کار بدین صورت است که ابتدا داده‌ها را واکشی می‌کند، یک درخواست واکشی برای تأیید مجدد آن ارسال می‌کند، سپس داده‌های به‌روز شده را برمی‌گرداند.

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

SWR چگونه کار می کند؟

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

1. داده های قدیمی را از حافظه پنهان برمی گرداند.
2. درخواست واکشی را برای تأیید مجدد داده ها ارسال می کند.
3. داده های به روز را برمی گرداند.

SWR جایگزینی برای fetch API نیست. در عوض، به شما این امکان را می دهد که به محض بازدید کاربر، محتوای کش شده را در سایت خود رندر کنید و در صورت کهنه شدن آن محتوا را به روز کنید.

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

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

چگونه داده ها را در Next.js با SWR واکشی کنیم

استفاده از SWR را در React با نصب آن ابتدا از طریق یک مدیریت بسته شروع کنید. این دستور از npm استفاده می کند.

npm install swr\n

در یک فایل کامپوننت، قلاب useSWR را از swr وارد کنید.

import useSWR from "swr"\n

قلاب useSWR دو آرگومان را می پذیرد:

1. یک شناسه منحصر به فرد برای داده ها. معمولا URL API.
2. یک تابع واکشی. این تابعی است که برای بازیابی داده ها استفاده می شود. می تواند از واکشی، Axios یا سایر ابزارهای واکشی داده استفاده کند.

هوک داده ها و یک شی خطا را برمی گرداند. اطمینان حاصل کنید که از این قلاب مطابق با بهترین روش ها استفاده می کنید.

در اینجا یک مثال نشان می دهد که چگونه از قلاب useSWR استفاده کنید.

const fetcher = (...args) => fetch(...args).then(res => res.json());\nconst {data, error} = useSWR("/api/data", fetcher);\n

می توانید داده ها را در کامپوننتی مانند این رندر کنید:

import useSWR from "swr"\nfunction Home () {\n const fetcher = (...args) => fetch(...args).then(res => res.json());\n const {data, error} = useSWR("/api/data", fetcher);\n if (error) return <div>failed to load</div>\n if (!data) return <div>loading...</div>\n return <div>{data}</div>\n}\n

این یک پیاده سازی ساده از SWR است. اسناد SWR عمیق تر می شوند، بنابراین برای کسب اطلاعات بیشتر آنها را بررسی کنید.

چرا از SWR استفاده کنیم؟

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

ذخیره سازی

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

SWR به شما امکان می دهد تا داده های قدیمی را به کاربر نمایش دهید، در حالی که آنها را مجدداً تأیید می کنید. این بدان معناست که کاربر مجبور نیست منتظر باشد تا واکشی اطلاعات را برگرداند.

اعتبار سنجی مجدد

از طریق اعتبارسنجی مجدد، SWR داده های ذخیره شده را دوباره تازه می کند و صفحه با داده های به روز دوباره ارائه می شود. اعتبار مجدد به ویژه برای سایت هایی که محتوای آنها مرتباً در حال تغییر است بسیار مهم است.

صفحه بندی

قلاب useSWRInfinite از SWR به شما امکان می دهد صفحه بندی را به راحتی پیاده سازی کنید یا حتی یک UI بارگذاری بی نهایت ایجاد کنید.

اسکرول بازیابی موقعیت

SWR به کاربر این امکان را می دهد که وقتی به صفحه برگشت به موقعیت اسکرول برگردد. این به تجربه کاربری بهتر کمک می کند.

واکشی داده وابسته

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

از SWR برای بهبود قابلیت استفاده استفاده کنید

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

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

منبع مقاله