The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Inertia.js v3.8.0 adds WhenMounted for browser-dependent UI in server-rendered pages and opt-in transport that preserves large integers as native JavaScript BigInt values. The BigInt feature requires inertia-laravel v3.5.0; the release also includes fixes for form callbacks, optimistic updates, and browser-history restoration.
These changes are listed in the Inertia.js v3.8.0 release notes and described with implementation examples by Laravel News.
What does WhenMounted solve?
During server-side rendering, browser globals such as window and document do not exist. A component that reads one of them while rendering on the server can therefore fail before it reaches the browser.
WhenMounted renders a fallback during server rendering and the browser’s first hydration render. Once mounted in the browser, it renders its children. That makes it useful for content that genuinely needs browser APIs, such as a chart whose width depends on the viewport.
#1 Best Overall
React: defer the browser-dependent expression
In React, pass a function as the child so the browser-only expression is not evaluated while JSX is being prepared for server rendering:
<WhenMounted fallback={<p>Loading chart…</p>}>
{() => <SalesChart width={window.innerWidth} />}
</WhenMounted>The function delays creating the chart until WhenMounted renders its children after mounting. Writing the browser-dependent expression directly as JSX can evaluate it too early.
Vue and Svelte
The documented adapters are React, Vue, and Svelte. The Laravel News example for Vue uses a fallback slot; consult the syntax for the adapter used by your application rather than assuming the React function-child form applies to every adapter.
Initial render versus later client-side visits
On the initial SSR load, the fallback covers both server rendering and the first hydration render, avoiding a server/browser mismatch while browser globals are unavailable. If a WhenMounted instance is introduced later during a client-side visit, its children render immediately, according to the Laravel News explanation.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteRank #3
- Used Book in Good Condition
How BigInt props preserve large integer values
JavaScript’s ordinary Number type cannot represent every integer exactly beyond its safe integer range. A large identifier sent from PHP as a JSON number may consequently be rounded during parsing without raising an error. Inertia v3.8 can preserve such values as native JavaScript BigInt values instead.
This behavior is opt-in and requires inertia-laravel v3.5.0. Enable it globally for consistent serialization, or on a single response for a limited rollout:
| Enablement | Where to configure it | When it fits |
|---|---|---|
| Global configuration | preserve_big_integers in config/inertia.php |
Use when the application should preserve large integers consistently. |
| Environment variable | INERTIA_PRESERVE_BIG_INTEGERS |
Use when you want to control the global setting through the deployment environment. |
| Single response | Call preserveBigIntegers() on that response. |
Use when enabling the behavior only for selected responses. |
During transport, a large integer uses a marker shaped like {"$bigint":"12345678901234567890"}; the client converts it to BigInt. Integers within JavaScript’s safe range remain ordinary numbers. The Laravel News article says the feature covers initial page data, visits, partial reloads, encrypted history, and SSR.
Submitting a BigInt back to Laravel
When a BigInt is sent back through a form, router, or Precognition request, it is serialized as a digit string. The article reports that Laravel’s integer validation rule and $request->integer() accept that value. This is the behavior described by Laravel News; it is not an independently tested compatibility guarantee.
Quick Recap
Other fixes included in Inertia.js v3.8.0
- Form callbacks: The release notes say missing
<Form>visit callbacks are now forwarded. Laravel News identifiesonHttpException,onNetworkError,onBeforeUpdate, andonFlash; it also says returningfalsefrom an error callback stops default handling. - Optimistic updates: A stale response no longer reverts a newer optimistic update. As described by Laravel News, an older request arriving after a newer successful request will not roll the page back; if the newer request fails, an older successful response may still apply.
- History restoration after deployment: On back/forward reloads, Inertia checks asset versions before restoring history. This addresses the case where a deployment changes the JavaScript bundle while browser history still contains older page props.
- SSR fixes: The release notes also list a UTF-8 parsing fix and avoiding top-level await in the generated SSR bundle.
What to check before adopting the changes
- For browser-dependent UI, choose a fallback that makes sense while the initial page is rendered and hydrated.
- In React, make browser-only work a function child; otherwise the expression may run before the mounted guard can defer it.
- For BigInt props, confirm that the application uses
inertia-laravelv3.5.0 or later, then choose global or per-response enablement deliberately. - Where application code expects a JavaScript
Number, account for the fact that preserved large values arrive asBigInt; safe-range integers remain numbers.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
