‏TanStack Redact: جایگزین سبک‌تر React تو مرورگر

Tanner Linsley از تیم TanStack نسخهٔ 0.2.0 کتابخونهٔ Redact رو معرفی کرده. Redact یه جایگزین کوچیک‌تر برای React و React DOM تو مرورگره که همون APIهایی از React رو پیاده می‌کنه که اپ برای رندر و آپدیت UI لازم داره. فقط به تنظیمات build اضافه می‌شه و importها و کامپوننت‌ها و هوک‌های اپ بدون تغییر از Redact استفاده می‌کنن. نویسنده می‌گه این اول یه آزمایش برای سایت شخصیش و tanstack.com بود، ولی اون‌قدر خوب جواب داد و بقیه هم تو production ازش استفاده کردن که حالا جدی نگهداریش می‌کنن.

این نسخه integration پایدار برای TanStack Start، Vite، Vinext و Next.js داره و تو Next.js هم App Router و هم Pages Router پشتیبانی می‌شه. تو Next.js و Vinext، خود React همچنان روی سرور رندر و Server Components رو انجام می‌ده و فریم‌ورک هم routing و caching و Server Actionها رو. Redact فقط hydration (یعنی سوار کردن رویدادها روی HTMLی که سرور فرستاده) و رندر سمت کاربر رو به عهده می‌گیره.

تیم یه اپ کوچیک یکسان رو با React و Redact تو هر فریم‌ورک ساخته و حجم gzip کل JS و CSS سمت کاربر رو مقایسه کرده. نتیجه: TanStack Start از 109.3 به 62.3 کیلوبایت (۴۳ درصد کمتر)، Vite از 68.3 به 20.1 کیلوبایت (۷۰.۵ درصد)، Vinext از 138.1 به 98.8 کیلوبایت (۲۸.۵ درصد) و Next.js از 175.6 به 139.9 کیلوبایت (۲۰.۴ درصد). با خاموش کردن قابلیت‌های اختیاری، Start تا 59.8 و Vite تا 12.6 کیلوبایت هم پایین میاد.

نویسنده خودش تأکید می‌کنه این‌ها جمع کل build هستن و قولی دربارهٔ حجم یه صفحهٔ خاص نیستن. تو بنچمارک Vinext هم اپ از 154.9 به 115.5 کیلوبایت رسید و زمان build تقریباً همون موند. ولی این بنچمارک سرعت رندر یا hydration رو اندازه نمی‌گیره، پس نمی‌شه گفت همه‌چی سریع‌تر می‌شه.

بده‌بستان اصلی سر زمان‌بندی رندره. Redact رندر رو synchronous انجام می‌ده و time slicing یا رندر قابل‌قطع React رو نداره، یعنی React نمی‌تونه وسط یه رندر سنگین کار رو نگه داره تا به ورودی کاربر جواب بده. transitionها، فرم‌های pending و optimistic state پشتیبانی می‌شن، ولی یه رندر سنگین هنوز می‌تونه ورودی رو عقب بندازه. برای همین نویسنده پیشنهاد می‌کنه روی شلوغ‌ترین صفحه‌های اپ خودتون امتحانش کنین. در آخر هم می‌گه هنوز به آیندهٔ React باور داره و Redact رو راهی می‌دونه برای کسایی که می‌خوان همون کد React رو با حجم کمتر اجرا کنن.

نکات کلیدی:

• Redact 0.2.0 با TanStack Start، Vite، Vinext و Next.js (App و Pages Router) سازگاره.
• بدون تغییر کد اپ، فقط با اضافه کردن به تنظیمات build کار می‌کنه.
• کاهش حجم JS سمت کاربر از ۲۰.۴ درصد تا ۷۰.۵ درصد (Vite) اندازه‌گیری شده.
• تو Next.js و Vinext رندر سرور و Server Components هنوز دست React هست.
• رندر synchronous هست و time slicing نداره، پس رندرهای سنگین ممکنه ورودی کاربر رو کند کنن.