تابع ()useSWR توسط تیم توسعه دهنده Nextjs برای مدیریت بهتر حالت های مختلف واکشی داده ایجاد شده و به شدت توصیه می کنن (روی این قسمتش خیلی تاکید دارن) که برای واکشی داده ازش استفاده کنید.
این تابع به صورت پیش فرض درون پکیج Nextjs وجود نداره و برای استفاده ازش، باید پکیج مورد نظرش رو نصب کنیم:
npm
npm i swr
yarn
yarn add swr
در این جا تابع ()useSWR رو فراخوانی کردیم و خصوصیت های data و error رو با استفاده از object destructuring از این تابع بیرون کشیدیم.
اگر با خطا مواجه بشیم، خصوصیت error مقداردهی و درون صفحه نمایش داده میشه:
تا زمانی که اطلاعات دریافت نشده، متن Loading به نمایش درمیاد. زمانی هم که اطلاعات دریافت بشه، خصوصیت data مقدار دهی میشه و اطلاعات درون صفحه به نمایش در میاد:
اینم تصویر دیتای مورد نظرمون:
از اونجایی که این تابع دارای قابلیت های زیاد دیگه ای مثل caching، اعتبار سنجی و... هم هست، براش پکیج و داکیومنت جداگانه در نظر گرفتن.