کتابخانه SWR در ری اکت و Next.js + هوک useSWR !

کتابخانه SWR در ری اکت و هوک useSWR یکی از بهترین ابزار هایی هستن که به ما در مبحث Data Fetching ( دریافت اطلاعات از سرور ) کمک میکنن ..

بدون شک داده ها یکی از مهمترین اجزای تشکیل دهنده یک صفحه وبسایت هستن. این داده ها ( اطلاعات ) در سرور ذخیره میشن و ما باید این اطلاعات رو از سرور دریافت کنیم و اطلاعات دریافتی رو به کاربر نشون بدیم.

به این پروسه ی دریافت اطلاعات از سرور، Data Fetching میگیم.

روش های خیلی زیادی برای Data Fetching تو فِرانت اِند وجود داره که با استفاده از این تکنولوژی ها میتونیم داده های وبسایتمون رو از سرور خودمون دریافت کنیم.

کتابخانه SWR چیست ؟

SWR یکی از بهترین و قدرتمندترین کتابخونه های فِرانت اِند برای Data Fetching ( دریافت داده از سرور ) هست که روز به روز محبوبیتش داره بیشتر میشه.

عبارت SWR مخفف stale while revalidate هست.

در واقع یک کتابخونه سبک هست که به ما اجازه میده از سمت کلاینت عملیات Data Fetching رو انجام بدیم.

خود SWR یک هوک کاربردی به اسم useSWR در اختیارمون میزاره که کار کردن با SWR رو خیلی راحت تر و لذت بخش تر میکنه.

کتابخانه SWR در ری اکت امکانات و قابلیت های خیلی زیادی به ما میده مثل کش کردن داده ها ( Cashing ) ، اعتبار سنجی مجدد ( revalidation ) ، Pagination ، پیش بارگذاری ( Preloading ) ، DevTools برای تجربه کاربری بهتر و ..

استفاده از SWR در ری اکت

حقیقتا یکی از بزرگترین مزایای SWR در React ، ساده بودنشه ! استفاده از کتابخانه SWR خیلی سادس ..

شکل کلی استفاده از هوک useSWR در ری اکت بصورت زیر هست :

const { data, error } = useSWR(key, fetcher);

اگه به تیکه کد بالا دقت کنید، میبینید که هوک useSWR از ما 2 آرگومان میگیره :

• آرگومان اول key هست :
  

تو این بخش باید یک key به هوک useSWR در ری اکت بدیم. معمولا خود API Endpoint رو به عنوان key به هوک useSWR میدیم.

• آرگومان دوم fetcher هست :
  

در واقع fetcher یک Async Function هست که عملیات دریافت داده از back-end رو برای ما انجام میده.

اما اگه به تیکه کد بالا دقت کنید، میبینید که useSWR در React دو مقدار برای ما return کرده :

• اولین مقدار data هست :
  

مقدار data همون چیزی هست که از back-end توسط API دریافت میکنیم. ( مثلا لیست کاربران ، محصولات و .. )

• دومین مقدار error هست :
  

دومین مقدار یک error هست . این مقدار فقط درصورتی که دریافت داده از back-end با خطا مواجه بشه ، پر میشه. در غیراینصورت error خالی خواهد بود.

البته دو مقدار دیگه هم توسط هوک useSWR برای ما return میشه که در ادامه راجبشون صحبت میکنیم ( مقدار isLoading و isValidating )

جمع بندی

برای مطالعه نسخه کامل + انجام پروژه تمرینی با SWR در ری اکت و مثال های کامل لطفا روی لینک SWR در ری اکت کلیک کنید.