‏TSRX در TanStack Start: تجربهٔ یک تیم

نویسنده می‌گه TanStack Start انتخاب پیش‌فرض تیمشون برای پروژه‌های تازهٔ TypeScript هست، برای همین وقتی به TSRX برخوردن — یه جانشین معنوی برای JSX که به React کامپایل می‌شه — خواستن ببینن داخل همین استک چطور از آب درمیاد. یه اپ تست فشار ساختن که هر قابلیت زبان رو تو یه روت جدا، مقابل پایپ‌لاین واقعی SSR می‌ذاره.

حرف اصلی TSRX اینه که JSX یه محدودیت قدیمی داره: هر چی داخل return کامپوننت می‌آد باید عبارت باشه، برای همین شرط‌ها به ternary و لیست‌ها به .map() ختم می‌شن. تو TSRX عناصر دستورن نه عبارت، پس if و for و switch و try کنترل جریان واقعی می‌شن، بلاک هم اسکوپ‌شده کنار مارک‌آپ خودش می‌شینه. سمنتیک رانتایم React هیچ فرقی نمی‌کنه و آخرش به همون درخت کامپوننت کامپایل می‌شه.

نمونه‌ای که مقاله می‌آره یه لیست کاربر با بج وضعیت و حالت خالیه. نسخهٔ JSX سه تا فایل لازم داره — کامپوننت، جدول‌های lookup و ماژول CSS — ولی نسخهٔ TSRX همه‌شو تو یه تابع جا می‌ده:

@for (const user of users; key user.id) {
  <li className="row">
    <span>{user.name}</span>
  </li>
} @empty {
  <li className="empty">No users yet.</li>
}

به گفتهٔ نویسنده این هم‌جواری فقط برای خوانایی آدم‌ها نیست. TSRX خودشو برای «عصر ایجنتی» معرفی می‌کنه و استدلالش با نحوهٔ کار مدل‌ها جور درمی‌آد: مدل وقتی بهتر کار می‌کنه که ساختار و استایل و کنترل جریان مربوط به یه تغییر، کنار هم تو کانتکست باشن نه پخش تو سه فایل. تیم موقع تولید کامپوننت TSRX با Claude Code همین رو دیده: پراپ‌دریلینگ توهمی کمتر و کمتر سراغ جدول lookup رفتن. راه‌اندازی‌اش هم سنگین نیست: یه پلاگین Vite، یه پلاگین TypeScript و یه افزونهٔ ادیتور.

ولی سه تا درز پیدا شده که همه‌شون سر هندشیک با SSR هستن نه ایراد خود زبان. اول، بلاک‌های تو vite dev داخل HTML اولیهٔ SSR نمی‌آن و باعث پرش استایل می‌شن؛ راه‌حل موقت اینه که با vite build و vite preview تست کنی. دوم، فایل‌های .tsrx نمی‌تونن فایل روت باشن، چون فایل‌واکر TanStack Router فقط پسوندهای مشخصی رو می‌شناسه؛ روت‌ها رو .tsx نگه دار و کامپوننت‌ها رو import کن.

سومی ظریف‌تره: @try/@catch به ارور باندری React کامپایل می‌شه و ارور باندری هم مکانیزمیه که فقط سمت کلاینت اجرا می‌شه. یعنی اگه کامپوننتی موقع رندر سمت سرور خطا بده، کل داکیومنت می‌خوابه نه فقط همون باندری. نویسنده می‌گه این رفتار استاندارد React هست نه نقص TSRX، ولی بهتره قبل از اینکه @try رو تور نجات SSR حساب کنی بدونیش.

نکات کلیدی:

• TSRX عناصر رو دستور می‌دونه نه عبارت، پس if/for/switch/try داخل بدنهٔ کامپوننت کنترل جریان واقعی‌ان
• استایل اسکوپ‌شده تو بلاک کنار مارک‌آپ می‌شینه و ماژول CSS جداگانه لازم نیست
• خروجی به همون درخت کامپوننت React کامپایل می‌شه؛ سمنتیک رانتایم دست‌نخورده می‌مونه
• ادغام با TanStack Start فقط یه پلاگین Vite، یه پلاگین TypeScript و یه افزونهٔ ادیتور می‌خواد
• سه باگ SSR: نیومدن استایل اسکوپ‌دار تو vite dev، پشتیبانی‌نشدن .tsrx به‌عنوان فایل روت، و بی‌اثر بودن @try/@catch موقع رندر سمت سرور
• هر سه به‌صورت یه ایشو روی TanStack Router آپ‌استریم گزارش شدن و راه دور زدنشون ساده‌ست