‏داده‌خوانی در ری‌اکت سرور کامپوننت‌ها

وقتی یه صفحه اجتماعی با sidebar، فید پست‌ها، پیشنهاد کاربران و تگ‌های ترند می‌سازیم، سوال اینه که داده از کجا باید بیاد و چه کسی مسئولشه. مقاله این سوال رو از سه زاویه بررسی می‌کنه: کامپوننت‌محور، loader محور، و RSC محور.

روش اول: useEffect و useState — هر کامپوننت داده خودش رو می‌خواد، isLoading خودش رو نگه می‌داره، و وقتی کامپوننت دیگه‌ای به همون داده نیاز داشت، باید state رو به بالا ببریم. نتیجه؟ handleLike توی HomePage زندگی می‌کنه چون باید posts رو آپدیت کنه، در حالی که LikeButton عمیق توی درخته و اصلاً نمی‌دونه handler از کجا میاد.

React Query این رو بهتر کرد — داده کش‌شده و keyed شده، هر کامپوننت می‌تونه مستقیم باهاش کار کنه، و mutation از هر جایی می‌تونه cache رو invalidate کنه. اما مشکل اصلی باقی موند: همه این fetching‌ها روی کلاینت اتفاق می‌افته، یعنی باید منتظر دانلود و اجرای JavaScript موند. نتیجه هم «popcorn UI» — هر بخش صفحه هر وقت داده‌اش رسید ظاهر می‌شه، بدون هیچ طراحی برای تجربه لودینگ.

روش دوم: Route-Level Loaders — مثل Remix یا Next.js Pages Router با getServerSideProps، یه تابع واحد همه داده‌های صفحه رو روی سرور می‌خونه و به پایین پاس می‌ده. این الگو توی App Router هم قابل اجراست — کافیه صفحه رو async کنیم و همه چیز رو بالا await کنیم. سرعت بهتره چون سرور کنار دیتابیسه، ولی همه چیز باید کامل لود بشه تا صفحه نمایش داده بشه. علاوه بر این، کامپوننت‌ها به آنچه صفحه برای‌شون fetch کرده وابسته می‌شن — coupling ناخواسته ایجاد می‌شه.

روش سوم: Async Server Components — RSCها اجازه می‌دن هر کامپوننت مستقیماً async باشه و داده خودش رو مستقیم از سرور بخونه، بدون نیاز به prop drilling و بدون اینکه صفحه والد مجبور باشه بدونه هر کامپوننت چه داده‌ای نیاز داره. با ترکیب این رویکرد با Suspense، می‌شه loading state هر بخش رو مستقل کنترل کرد و به جای مدیریت لودینگ، تجربه لودینگ رو طراحی کرد:

<Suspense fallback={<FeedSkeleton />}>
  <Feed />
</Suspense>

نکته مهم اینه که RSCها fetching رو به سرور می‌برن (مثل loaderها) ولی همزمان fetching رو نزدیک کامپوننت نگه می‌دارن (مثل React Query). بهترین ترکیب دو دنیاست — بدون waterfall کلاینت‌سایدی و بدون coupling اجباری به صفحه والد.

نکات کلیدی:

• useEffect و useState برای fetching منجر به prop drilling و popcorn UI می‌شن
• React Query coupling رو کم می‌کنه ولی fetching رو کلاینت‌سایدی نگه می‌داره
• Loaderها fetching رو به سرور می‌برن ولی همه داده باید قبل از رندر آماده باشه
• RSCها اجازه می‌دن هر کامپوننت async باشه و داده خودش رو مستقیم از سرور بخونه
• Suspense در کنار RSC امکان طراحی مستقل loading experience برای هر بخش صفحه رو می‌ده
• ترکیب RSC با Suspense، مشکل waterfall، prop drilling و popcorn UI رو با هم حل می‌کنه