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

این دوره به شما یاد خواهد داد که چگونه به صورت بهینه داده‌ها را برای ری‌اکت دریافت کنید، بدون اینکه به یک کتابخانه شخص ثالث یا هوک useEffect وابسته باشید. ما یک کتابخانه واکشی داده سفارشی از ابتدا خواهیم ساخت که داده‌ها را prefetch، کش و تمام مسائل متداول در واکشی داده را حل خواهد کرد.

آنچه یاد خواهید گرفت

• چگونه ری‌اکت وقتی داده‌ها واکشی می‌شوند دوباره رندر می‌شود
• مشکلات استفاده از useEffect برای واکشی داده
• مزایا و معایب استفاده از کتابخانه‌ها و فریم‌ورک‌ها برای واکشی داده
• چگونگی شروع به واکشی داده قبل از بارگذاری کامپوننت ری‌اکت
• چگونه یک کش داده ایجاد کنیم تا از واکشی دوباره داده‌ها جلوگیری کنیم؟
• چگونگی مشکلات Network Waterfalls و Race Conditions را شناسایی و رفع کنیم؟
• چه زمانی و چرا باید از هوک useSyncExternalStore استفاده کنیم؟
• چگونه متد کش stale-while-revalidate را پیاده‌سازی کنیم؟
• چگونه می‌توان واکشی داده برای ری‌اکت سرور کامپوننت‌ها را به دست آورد؟

مشکل واکشی داده در ری‌اکت

واکشی داده بخشی حیاتی از ساخت اپلیکیشن‌های ری‌اکت است و بیشتر توسعه‌دهندگان آن را به درستی انجام نمی‌دهند.

این به طور عمده به دلیل وجود ویدیوها و آموزش‌هایی است که نشان می‌دهند چگونه داده‌ها را با استفاده از هوک useEffect واکشی کنیم، ولی همچنین به این دلیل است که مستندات ری‌اکت اینطور پیشنهاد می‌شود.

اما سپس به ذکر تمام مشکلات استفاده از آن می‌پردازد، مانند:

افکت ها در سمت سرور اجرا نمی‌شوند.

افکت ها باعث ایجاد “Network Waterfalls” می‌شوند.

افکت ها معمولاً به این معنی است که شما داده‌ها را پیش‌بارگذاری یا کش نمی‌کنید.

این روش خیلی ارگونومیک نیست.

بنابراین برای پروژه‌های کوچک، شاید هوک useEffect قابل قبول باشد، اما برای پروژه‌های متوسط تا بزرگ، قطعاً نباید گزینه‌ای برای واکشی داده باشد.

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

همچنین، به دلیل اینکه آن‌ها کتابخانه هستند، ممکن است نتوانید آن‌ها را مطابق با نیازهای خاص خود سفارشی‌سازی کنید.

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

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

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

داده‌های شما را به صورت بهینه prefetch و کش کند، وضعیت‌های بارگذاری و خطا را مدیریت کند و همچنین یک تکنیک کش به نام stale-while-revalidate را پیاده‌سازی کند که در پس‌زمینه داده جدید را واکشی می‌کند در حالی که هنوز داده‌های قدیمی را نشان می‌دهد.

اما این تمامش نیست...

این کتابخانه همچنین دو مشکل بزرگ با واکشی داده در ری‌اکت را حل خواهد کرد، یعنی Race Conditions و Network Waterfalls.

اگر شما این مشکلات را قبلاً نشنیده‌اید یا با آن‌ها برخورد نکرده‌اید، خوش‌شانس هستید. اما در صورتی که با این مشکلات مواجه شدید، این کتابخانه شما را پوشش خواهد داد.

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