‏Inertia.js 3.8 با کامپوننت WhenMounted و پشتیبانی از BigInt

تیم Inertia.js نسخهٔ 3.8.0 رو منتشر کرده. مهم‌ترین تغییر، کامپوننت WhenMounted برای React، Vue و Svelte هست. مشکل اینجاست که اگه یه کامپوننت موقع رندر سراغ window یا document بره، SSR (یعنی رندر صفحه روی سرور قبل از رسیدن به مرورگر) با خطای window is not defined می‌خوابه. WhenMounted روی سرور فقط fallback رو نشون می‌ده و بچه‌هاش رو وقتی کامپوننت توی مرورگر mount شد رندر می‌کنه.

توی React باید children رو به‌شکل تابع بدی، چون JSX قبل از رندر کامپوننت ارزیابی می‌شه و در غیر این صورت کد مرورگری روی سرور اجرا می‌شه:

import { WhenMounted } from '@inertiajs/react'

<WhenMounted fallback={<p>Loading chart...</p>}>
  {() => <SalesChart width={window.innerWidth} />}
</WhenMounted>

fallback فقط موقع SSR و اولین رندر hydration نشون داده می‌شه، پس اولین رندر مرورگر با HTML سرور یکیه و hydration mismatch پیش نمیاد. اگه WhenMounted بعداً mount بشه، مثلاً بعد از یه visit سمت کلاینت، بچه‌هاش رو همون لحظه رندر می‌کنه.

تغییر مهم دوم پشتیبانی از عددهای بیرون از محدودهٔ امن جاوااسکریپته. PHP یه عدد ۶۴ بیتی مثل آیدی Snowflake رو به‌صورت عدد JSON می‌فرسته و مرورگر موقع parse بی‌سروصدا گردش می‌کنه، مثلاً 900719925474099988 می‌شه 900719925474100000 و هیچ خطایی هم نمی‌ده.

این قابلیت اختیاریه، به inertia-laravel نسخهٔ 3.5.0 نیاز داره و با گزینهٔ preserve_big_integers توی config/inertia.php یا متغیر INERTIA_PRESERVE_BIG_INTEGERS برای همه روشن می‌شه. برای یه response تکی هم این‌جوریه:

return Inertia::render('Orders/Show', [
    'id' => $order->id,
])->preserveBigIntegers();

adapter عددهای بزرگ رو با یه نشونهٔ $bigint کدگذاری می‌کنه و کلاینت دوباره به BigInt تبدیلشون می‌کنه؛ عددهای داخل محدودهٔ امن همون number معمولی می‌مونن. این برای صفحهٔ اول، visitها، partial reload، history رمزشده و SSR کار می‌کنه. اگه یه BigInt از طریق router یا فرم یا Precognition برگرده، به‌صورت رشتهٔ عددی ارسال می‌شه که قانون integer لاراول و $request->integer() قبولش می‌کنن.

چند باگ هم درست شده. کامپوننت حالا callbackهای onHttpException، onNetworkError، onBeforeUpdate و onFlash رو واقعاً به visit پاس می‌ده؛ قبلاً یه خطای 500 یا قطعی شبکه اصلاً صداشون نمی‌کرد. برای آپدیت‌های optimistic (یعنی وقتی UI قبل از جواب سرور عوض می‌شه)، اگه جواب درخواست اول دیرتر می‌رسید، آپدیت دوم رو روی صفحه برمی‌گردوند. حالا هر درخواست یه ID داره و جواب قدیمی‌تر نادیده گرفته می‌شه.

آخرین مورد مربوط به back و forward بعد از دیپلویه. وقتی مرورگر صفحه رو از history برمی‌گردوند، Inertia نسخهٔ asset رو چک نمی‌کرد و باندل جدید JS با propsهای دیپلوی قبلی رندر می‌شد، پس propهای جدید یا تغییرنام‌داده undefined بودن. حالا نسخه‌ها مقایسه می‌شن و اگه فرق داشته باشن، صفحهٔ تازه رندر می‌شه. مشکل خراب شدن کاراکترهای چندبایتی UTF-8 توی SSR هم برطرف شده.

نکات کلیدی:

• Inertia.js 3.8.0 کامپوننت WhenMounted رو برای React، Vue و Svelte اضافه کرده.
• توی React، children داخل WhenMounted باید تابع باشن تا کد مرورگری روی سرور اجرا نشه.
• پشتیبانی از BigInt اختیاریه و به inertia-laravel نسخهٔ 3.5.0 نیاز داره.
• callbackهای خطا و flash توی کامپوننت حالا درست صدا زده می‌شن.
• جواب‌های دیررس optimistic دیگه آپدیت جدیدتر رو خراب نمی‌کنن.
• برگشت توی history بعد از دیپلوی، نسخهٔ asset رو چک می‌کنه.