‏React Server Components چطور با باندلر کار می‌کنه

نویسنده می‌گه برای فهمیدن RSC یه نسخهٔ کوچیکِ خودش رو ساخته، و این مقاله رو نه دربارهٔ فایده‌های RSC بلکه دربارهٔ این نوشته که زیر کاپوت چطور کار می‌کنه، مخصوصاً این‌که قسمت سرور و کلاینتِ اپ موقع بیلد چطور از هم جدا می‌شن.

اولین تکهٔ جالب، پروتکلیه به اسم Flight که یه استریم تولید می‌کنه. این فرمت شبیه JSON به‌نظر می‌رسه ولی JSON واقعی نیست؛ یه فرمت سیمیِ ساختاریافته‌ست که React می‌تونه همین‌طور که استریم می‌شه به‌صورت تدریجی پارسش کنه. دلیلش اینه که JSON نمی‌تونه چیزهایی مثل مرزهای async و محاسبه‌های سمت سرور که به‌مرور حل می‌شن رو تمیز نمایش بده. برای یه کامپوننت سرور، استریم Flight چیزی شبیه این می‌شه:

نکتهٔ مهم اینه که سرور، کامپوننت‌های سرور رو به‌صورت المان‌های آمادهٔ رندرشده می‌فرسته، ولی کامپوننت‌های کلاینت رو به‌صورت یه ارجاع (مثل $L1) می‌فرسته که مرورگر بعداً با ماژول‌های واقعی پُرش می‌کنه.

نویسنده توضیح می‌ده که یه اپ RSC در واقع برای دو رانتایم مختلف بیلد می‌شه. برای کامپوننت‌های سرور، React پکیج‌ها رو زیر شرطِ اکسپورتِ react-server ریزالو می‌کنه؛ وقتی webpack این شرط رو می‌بینه یه entry point کاملاً متفاوت از داخل React برمی‌داره که برای رندر سمت سرور طراحی شده و قابلیت‌های فقط-کلاینتی مثل هوک‌ها رو پشتیبانی نمی‌کنه. اینجاست که پکیج react-server-dom-webpack میاد وسط و پروتکل Flight رو به webpack وصل می‌کنه.

حالا تو بیلد سرور وقتی به یه کامپوننت کلاینت مثل می‌رسیم چی می‌شه؟ چون بیلد سرور زیر شرط react-server اجرا می‌شه و useState و رویدادها رو پشتیبانی نمی‌کنه، باندلر نمی‌تونه کامپوننت کلاینت رو عادی باندل کنه. به‌جاش ماژولش رو با یه استاب جایگزین می‌کنه که با registerClientReference (از react-server-dom-webpack/server) ساخته شده. این تابع چیزی رندر نمی‌کنه؛ فقط هویتِ کامپوننت رو ثبت می‌کنه تا رندرر Flight بدونه چطور بهش ارجاع بده. سرور دیگه کدِ واقعیِ Counter رو نمی‌بینه و چیزی شبیه این می‌بینه:

تو بیلد کلاینت اما داستان برعکسه: این بار باندلر برای رانتایم مرورگر بیلد می‌کنه و پیاده‌سازیِ واقعیِ کامپوننت‌های کلاینت (با هوک‌ها و APIهای مرورگر) رو توی باندل می‌ذاره. هم‌زمان یه manifest هم تولید می‌شه که ارجاع‌های سرور رو به ماژول‌های واقعی کلاینت وصل می‌کنه؛ نویسنده می‌گه این manifest چسبِ داخلیه که اون ارجاع‌های $L1 تو استریم Flight رو به فایلِ واقعی‌ای که مرورگر باید لود کنه ترجمه می‌کنه.

نویسنده آخرش می‌گه این کل تصویرِ اتصال RSC به باندلر بود، ولی هنوز یه تکهٔ مهم یعنی SSR جا مونده که می‌ذارش برای یه پست دیگه. پس این مقاله فقط نشون می‌ده پیلودِ RSC چطور به UI تبدیل می‌شه، نه این‌که اون UI اولش چطور سمت سرور رندر می‌شه.

نکات کلیدی:

• RSC به‌جای JSON از فرمت سیمیِ Flight استفاده می‌کنه که قابل استریم تدریجیه
• همون کدبیس از دو دیدگاه سرور و کلاینت و برای دو رانتایم جدا بیلد می‌شه
• بیلد سرور زیر شرط react-server اجرا می‌شه و هوک‌ها رو نداره
• کامپوننت‌های کلاینت تو سرور با استابِ registerClientReference جایگزین می‌شن
• یه manifest ارجاع‌های Flight رو به ماژول واقعی کلاینت نگاشت می‌کنه