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

اما راه حل چیه؟ تو این مقاله یاد میگیریم چطور با ترکیب سه تا قابلیت عالی تو Next.js، یعنی React Suspense و Promise.all و Promise.allSettled، دیتاها رو به صورت موازی دریافت کنیم تا سرعت برنامه چند برابر بشه.

به طور خلاصه:

از Suspense استفاده میکنیم تا وقتی دیتا داره لود میشه، یه رابط کاربری موقت (مثل اسکلتون) نشون بدیم و صفحه سفید نمونه.

از Promise.all برای وقتایی استفاده میکنیم که همه دیتاها ضروری هستن و باید با هم لود بشن.

و از Promise.allSettled برای زمانی که میخوایم برنامه مقاوم باشه. یعنی حتی اگه یکی از API ها هم قطع بشه، کل برنامه از کار نمیفته و بقیه دیتاها به کاربر نشون داده میشن.

یه تیکه کد از این روش موازی رو اینجا ببینید:

const getSpellsPromise = fetch('https://api.example.com/spells').then(res => res.json());
const getBooksPromise = fetch('https://api.example.com/books').then(res => res.json());

// دریافت موازی اطلاعات بدون معطلی برای همدیگه
const [spellsResult, booksResult] = await Promise.allSettled([
  getSpellsPromise,
  getBooksPromise,
]);

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

اگه میخواید با جزئیات دقیق تر این روش ها آشنا بشید و کدهای کاملش رو ببینید، پیشنهاد میکنم حتما ادامه این آموزش جذاب رو تو مدیوم بخونید:

https://medium.com/@fufudsby/mastering-parallel-data-fetching-in-next-js-5d5c30be26b3

@codehalics | کدهالیک