Axios یا Fetch در NextJs

Summarize this content to 400 words in Persian Lang
هنگام کار با Next.js، انتخاب بین Axios و API واکشی بومی به نیازهای پروژه، اولویت‌ها و ویژگی‌های خاصی که به دنبال آن هستید بستگی دارد. در اینجا یک تفکیک وجود دارد که به شما کمک می کند تصمیم بگیرید:

استفاده از واکشی (گزینه بومی)

مزایا:

داخلی:

fetch یک وب API داخلی است، بنابراین نیازی به وابستگی اضافی نیست.
اندازه بسته کوچکتر از آنجایی که هیچ کتابخانه خارجی اضافه نشده است.

در دسترس بودن جهانی:

در هر دو سمت کلاینت و سرور کار می کند (به عنوان مثال، توابع سمت سرور Next.js مانند getServerSideProps یا getStaticProps).

API مدرن:

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

کنترل ریز دانه:

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

معایب:

کد دیگ بخار:

رسیدگی به خطا و تجزیه پاسخ (مثلاً بررسی answer.ok و parsing answer.json) به کد اضافی نیاز دارد.

کمبود امکانات:

بدون پشتیبانی داخلی برای لغو درخواست، تلاش مجدد خودکار، یا رهگیر.

استفاده از axios (کتابخانه خارجی)

مزایا:

ویژگی های غنی:

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

نحو بصری بیشتر:

API تمیزتر و خواناتر برای درخواست.

axios.get(‘/api/data’).then(response => console.log(response.data));

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

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

مدیریت بهتر خطا:

Axios بین خطاهای HTTP و خطاهای شبکه تمایز قائل می شود که می تواند اشکال زدایی را ساده کند.

سازگاری بین مرورگرها:

در درخواست‌های HTTP که ممکن است در مرورگرهای قدیمی‌تر اتفاق بیفتد، به مشکلات عجیب و غریب رسیدگی می‌کند.

معایب:

وابستگی اضافی:

به پروژه شما وزن اضافه می کند (اگرچه باندلرهای مدرن مانند -Webpack/Turbopack تاثیر را به حداقل می رساند).

غیر بومی:

برخلاف fetch، بخشی از مرورگر یا Node.js نیست، بنابراین شما به تعمیر و نگهداری خارجی متکی هستید.

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

از واکشی استفاده کنید اگر:

شما یک راه حل سبک می خواهید و API های داخلی را ترجیح می دهید.
شما در حال ساخت یک برنامه ساده هستید یا به ویژگی های پیشرفته ای مانند رهگیرها نیاز ندارید.
شما می خواهید از افزودن وابستگی های اضافی به پروژه خود جلوگیری کنید.

از axios استفاده کنید اگر:

شما به ویژگی های پیشرفته ای مانند رهگیرها، تجزیه خودکار JSON یا لغو درخواست نیاز دارید.
شما یک API سازگارتر برای توسعه‌دهندگان با کد دیگ بخار کمتر می‌خواهید.
شما در حال ساختن یک برنامه پیچیده با تعاملات گسترده API هستید.

نتیجه گیری

برای اکثر پروژه های Next.js، واکشی کافی است و به خوبی با فلسفه حداقلی چارچوب همخوانی دارد. با این حال، اگر پروژه شما شامل فعل و انفعالات API پیچیده است یا می‌خواهید کد boilerplate را کاهش دهید، axios می‌تواند انتخاب بهتری باشد.

اگر هنوز تصمیم نگرفته‌اید، با fetch شروع کنید، زیرا اگر به ویژگی‌های اضافی آن نیاز پیدا کردید، همیشه می‌توانید به axios تغییر دهید.

axios.get('/api/data').then(response => console.log(response.data));