‏React Server Components در TanStack Start

React Server Components (به اختصار RSC) کامپوننت‌های ریکتی هستن که فقط و فقط روی سرور رندر می‌شن. این یعنی می‌تونن مستقیم به دیتابیس وصل بشن، از await استفاده کنن، و اطلاعات حساس مثل connection string هرگز به مرورگر نمی‌رسه. مهم‌تر از همه، کد خود این کامپوننت‌ها به باندل کلاینت اضافه نمی‌شه.

RSC نه جایگزین data fetching معمولیه و نه جایگزین server-side rendering. TanStack Start از قبل هر دو رو داشت. RSC یه چیز خاص انجام می‌ده: کامپوننت‌هایی که وزن زیادی دارن ولی نیازی به تعامل کاربر ندارن رو از باندل کلاینت حذف می‌کنه. مثال خوب: کتابخونه‌هایی برای parse و رنگ‌آمیزی کد، یا یه layout بزرگ با import های شرطی.

در TanStack، رندر کردن یه RSC خیلی صریح و مشخصه. اول یه serverFn می‌سازی که کامپوننت رو به یه stream تبدیل می‌کنه، بعد نتیجه رو از loader می‌فرستی و در کامپوننت ریکت نمایش می‌دی:

const getAppShell = createServerFn({
  method: "GET",
}).handler(async () => {
  return renderServerComponent(<ApplicationShellEmptyRSC />);
});

یه نکته مهم که باید بدونی: وقتی renderServerComponent صدا زده می‌شه، کامپوننت قبلاً روی سرور رندر شده. پس هیچ‌وقت نمی‌تونی props کلاینت-ساید بعداً بهش پاس بدی تا خروجی رو عوض کنه. چیزی که می‌تونی پاس بدی، children یا کامپوننت‌های دیگه‌ست که RSC به‌عنوان «slot» ازشون استفاده می‌کنه.

برای این کار از createCompositeComponent استفاده می‌شه. این helper بهت اجازه می‌ده کامپوننت‌های کلاینت رو به‌عنوان prop به RSC بفرستی. جالبه که در TanStack، این کامپوننت‌های prop‌شده به‌صورت خودکار client component حساب می‌شن و نیازی به نوشتن "use client" نیست:

return createCompositeComponent(
  (props: PropsWithChildren<{ HeaderContent: FC<{ name: string; avatar: string }> }>) =>
    <ApplicationShell children={props.children} HeaderContent={props.HeaderContent} />,
);

یه مزیت بزرگ دیگه اینه که چون RSC یه تابع async معمولیه، می‌تونه مستقیم داده fetch کنه بدون نیاز به hook های خاص. Suspense هم درست مثل قبل کار می‌کنه و بقیه محتوا رو بلاک نمی‌کنه. در تست مقاله، حجم کلی JavaScript از ۳۰۸ کیلوبایت به ۲۰۳ کیلوبایت رسید.

نکات کلیدی:

• RSC فقط روی سرور رندر می‌شه؛ کدش به مرورگر نمی‌رسه و می‌تونه مستقیم داده fetch کنه
• در TanStack از renderServerComponent برای RSC ساده و از createCompositeComponent برای RSC با props استفاده می‌شه
• RSC نمی‌تونه state یا event handler داشته باشه، ولی می‌تونه کامپوننت‌های کلاینت رو به‌عنوان prop بگیره
• props از کلاینت به RSC برای تغییر خروجی کار نمی‌کنه چون RSC قبلاً رندر شده
• این ابزار برای کامپوننت‌های سنگین با وابستگی‌های زیاد و تعامل کم مناسبه، نه همه جا