‏لاوبل به TanStack Start کوچ کرد

تو این پست لاوبل توضیح می‌ده که چرا و چه‌جوری استک پایه‌ش رو عوض کرده. قبلاً پروژه‌ها اپ تک‌صفحه‌ای (SPA) با React + Vite بودن و کاملاً کلاینت‌ساید رندر می‌شدن؛ یعنی هر منطقی شبیه بک‌اند، مثل فرستادن ایمیل یا زدن به دیتابیس، باید تو یه Edge Function جدا با URL مستقل زندگی می‌کرد. حالا پایهٔ استک جدید TanStack Start هست؛ یه فریم‌ورک فول‌استک React که رندر سمت سرور (SSR)، تولید سایت استاتیک (SSG) و رندر کلاینت‌ساید (CSR) رو به‌صورت per-route پشتیبانی می‌کنه.

به گفتهٔ تیم لاوبل، مهم‌ترین تغییر اینه که صفحه‌ها دیگه با محتوای آماده به مرورگر می‌رسن. تو حالت کلاینت‌ساید قدیمی، اولین درخواست فقط یه قالب HTML تقریباً خالی برمی‌گردوند و مرورگر باید اول جاوااسکریپت رو دانلود و اجرا می‌کرد و بعد دیتا رو می‌گرفت؛ دو رفت‌وبرگشت قبل از این‌که چیزی روی صفحه بیاد. این برای کراولرها بد بود: گوگل با تأخیر میانه حدود ۱۰ ثانیه رندرش می‌کنه و بعضی کراولرها اصلاً جاوااسکریپت اجرا نمی‌کنن. با SSR، سرور درخت React رو اجرا می‌کنه و HTML کامل رو همون درخواست اول استریم می‌کنه.

یه اصل اصلی TanStack Start اینه که کد به‌صورت پیش‌فرض ایزومورفیکه؛ یعنی هم تو باندل سرور هست هم کلاینت. اگه چیزی باید فقط سمت سرور اجرا شه، با یه مرز مشخص علامتش می‌زنی. یکی از این مرزها createServerFn هست که موقع بیلد توسط یه پلاگین Vite ترنسفورم می‌شه: تو باندل سرور بدنهٔ هندلر همون‌جوری می‌مونه ولی تو باندل کلاینت با یه fetch() تایپ‌دار که به اندپوینت سرور POST می‌کنه جایگزین می‌شه. نتیجه اینه که یه فانکشن عادی می‌نویسی و بیلد خودش جداسازی سرور و کلاینت رو مدیریت می‌کنه.

به گفتهٔ لاوبل، این مدل دقیقاً با شیوهٔ تولید کد توسط هوش مصنوعی‌شون جور درمیاد: فیچری که قبلاً به یه فانکشن بک‌اند جدا و دیپلوی مستقل نیاز داشت، حالا می‌تونه کنار همون کامپوننت بشینه؛ یه فایل، یه مدل ذهنی و یه دیپلوی. سکرت‌ها هم دیگه بخشی از باندل دیپلوی‌شده نیستن و جدا و ایزوله per-project نگه‌داری می‌شن و موقع درخواست به‌صورت binding به Worker تزریق می‌شن، پس می‌تونی یه سکرت رو روتیت کنی و از درخواست بعدی بدون بیلد مجدد اعمال شه.

نویسنده یه نکتهٔ جالب هم می‌گه: چون TanStack Start بعد از تاریخ cutoff آموزش بیشتر LLMها منتشر شده، مدل بدون راهنمایی به الگوهای فریم‌ورک‌هایی که بهتر می‌شناسه (مثل getServerSideProps نکست یا دایرکتیو "use server") برمی‌گرده. برای همین لاوبل یه مجموعه قانون اختصاصی TanStack رو به کانتکست هر درخواست جدید تزریق می‌کنه و این قوانین رو با همکاری خود تیم TanStack می‌سازه و مدام بهترش می‌کنه.

به گفتهٔ لاوبل، اپ‌های قدیمی هم بدون هیچ مهاجرتی یه فایده می‌گیرن: وقتی یه کراولر تأییدشده اپ رو می‌بینه، صفحه سمت سرور تو یه مرورگر headless رندر و HTML آماده بهش سرو می‌شه، ولی برای کاربر انسانی هیچی عوض نمی‌شه و اپ همون SPA معمولیه. نتایج اولیه رو هم مثبت گزارش می‌کنن: حدود ۲.۹٪ افزایش ترافیک ارگانیک سرچ و ۹۸.۵٪ افزایش ترافیک از ابزارهای هوش مصنوعی مثل ChatGPT و Perplexity.

نکات کلیدی:

• پروژه‌های جدید لاوبل به‌جای SPA کلاینت‌ساید، روی TanStack Start با SSR ساخته می‌شن
• صفحه‌ها با محتوای آمادهٔ HTML به مرورگر و کراولرها می‌رسن، نه یه قالب خالی
• با createServerFn منطق سمت سرور کنار خود کامپوننت می‌شینه و بیلد جداسازی رو انجام می‌ده
• سکرت‌ها جدا از باندل نگه‌داری و موقع درخواست به Worker تزریق می‌شن، پس روتیت بدون دیپلوی مجدد ممکنه
• چون TanStack بعد از cutoff مدل‌ها اومده، لاوبل قوانین اختصاصی رو به کانتکست هر درخواست تزریق می‌کنه