---
title: "WhenMounted і BigInt-пропси в Inertia.js v3.8"
url: https://laravelukraine.com/blog/whenmounted-i-bigint-propsi-v-inertiajs-v38
date: 2026-10-05
source: https://laravel-news.com/inertia-3-8-0
---

# WhenMounted і BigInt-пропси в Inertia.js v3.8

Команда Inertia.js випустила v3.8.0 з компонентом `WhenMounted` для рендерингу коду, що працює лише в браузері, під час серверного рендерингу, опційною підтримкою цілих чисел за межами безпечного діапазону JavaScript як нативних значень `BigInt` та іншими покращеннями:

### WhenMounted для компонентів, що працюють лише в браузері

[Evan Burrell](https://github.com/evan-burrell) додав компонент `WhenMounted` для адаптерів React, Vue і Svelte. Компонент, який під час рендерингу звертається до `window` або `document`, призводить до збою серверного рендерингу з помилкою "window is not defined".

Компонент `WhenMounted` рендерить свій `fallback` на сервері, а дочірні елементи - після того, як компонент змонтовано в браузері:

```
import { WhenMounted } from '@inertiajs/vue3'
```

```
<template>
  <WhenMounted>
    <SalesChart />
    <template #fallback>
      <p>Loading chart...</p>
    </template>
  </WhenMounted>
</template>
```

У React передавайте дочірні елементи як функцію, щоб код, який працює лише в браузері, не виконувався на сервері, адже JSX-діти обчислюються до рендерингу компонента:

```
import { WhenMounted } from '@inertiajs/react'

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

Фолбек показується лише під час SSR і першого гідратаційного рендерингу, тому перший рендер у браузері збігається з серверним HTML і розбіжностей гідратації немає. `WhenMounted`, який монтується пізніше, наприклад після клієнтського візиту, одразу рендерить свої дочірні елементи.

Докладніше дивіться в [\#3218](https://github.com/inertiajs/inertia/pull/3218).

### Великі цілі числа як нативні значення BigInt

[Pascal Baljet](https://github.com/pascalbaljet) додав підтримку цілих чисел поза безпечним діапазоном JavaScript. PHP надсилає 64-бітне ціле число, наприклад Snowflake ID, як JSON-число, а браузер округлює його під час розбору сторінки, тож `900719925474099988` перетворюється на `900719925474100000` без жодної помилки.

Функція вмикається на сервері опційно та потребує [inertia-laravel v3.5.0](https://github.com/inertiajs/inertia-laravel/releases/tag/v3.5.0). Увімкніть її для всіх відповідей через опцію `preserve_big_integers` у `config/inertia.php` (або змінну середовища `INERTIA_PRESERVE_BIG_INTEGERS`), або для окремої відповіді:

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

Адаптер кодує великі цілі числа як маркери `{ "$bigint": "..." }`, а клієнт перетворює їх назад на значення `BigInt`. Цілі числа в безпечному діапазоні залишаються звичайними числами:

```
defineProps({ id: BigInt })
```

```
<template>
  <p>Order {{ id }}</p>
  <!-- Order 900719925474099988 -->
</template>
```

Це працює для початкової сторінки, візитів, часткових перезавантажень, зашифрованої історії та SSR. `BigInt`, надісланий назад через роутер, форму або Precognition, передається як рядок цифр, який приймають правило валідації `integer` у Laravel та `$request->integer()`.

Докладніше дивіться в [\#3237](https://github.com/inertiajs/inertia/pull/3237).

### Form передає колбеки помилок і flash

[Dale Weaver](https://github.com/daleweaver777) виправив компонент `<Form>`, щоб він передавав у візит `onHttpException`, `onNetworkError`, `onBeforeUpdate` та `onFlash`. Ці колбеки вже були серед пропсів компонента, але адаптери їх не пересилали, тому HTTP 500 або мережевий збій під час відправлення `<Form>` ніколи їх не викликали. Тепер вони працюють так само, як і в `useForm`, а повернення `false` з будь-якого з колбеків помилок зупиняє глобальну подію та типову обробку:

```
<Form
  action="/orders"
  method="post"
  @http-exception="(response) => { toast.error('Something went wrong'); return false }"
>
  <!-- ... -->
</Form>
```

Докладніше дивіться в [\#3262](https://github.com/inertiajs/inertia/pull/3262).

### Оптимістичні відповіді не по черзі

Pascal Baljet виправив випадок, коли виконувалися два оптимістичні оновлення, а відповідь на перший запит надходила останньою. Її пропси зчитувалися до другого запису, тому їх застосування відкочувало друге оновлення на екрані. Після цього сторінка розходилася із сервером до наступного візиту.

Тепер оптимістичні запити мають ID, а відповідь ігнорується, якщо пізніший оптимістичний запит уже завершився успішно. Невдалий запит не враховується, тож старіша успішна відповідь усе одно оновлює сторінку після того, як новіший запит завершився помилкою та було виконано відкат.

Докладніше дивіться в [\#3245](https://github.com/inertiajs/inertia/pull/3245).

### Відновлення історії після деплою

[Lazizbek Ergashev](https://github.com/lazerg) виправив навігацію назад і вперед через деплой. Коли браузер перезавантажував документ під час переходу назад або вперед, Inertia відновлювала сторінку зі стану історії, не перевіряючи версію ресурсів. Новий JavaScript-бандл тоді рендерив пропси з попереднього деплою, а проп, доданий або перейменований відтоді, мав значення `undefined`. Тепер Inertia порівнює версії та рендерить свіжозавантажену сторінку, якщо вони відрізняються.

Докладніше дивіться в [\#3264](https://github.com/inertiajs/inertia/pull/3264).

### Примітки до релізу

Повний список змін наведено нижче, а різницю між [3.7.1 і 3.8.0](https://github.com/inertiajs/inertia/compare/v3.7.1...v3.8.0) можна переглянути на GitHub. Наведені нижче примітки взято безпосередньо з [релізу на GitHub](https://github.com/inertiajs/inertia/releases/tag/v3.8.0):

### v3.8.0

- \[3.x\] Fix multi-byte UTF-8 corruption in SSR request body parsing by [@onk](https://github.com/onk) in [\#3248](https://github.com/inertiajs/inertia/pull/3248)
- Bump pnpm/action-setup from 6.0.10 to 6.1.0 in the github-actions group by [@dependabot](https://github.com/apps/dependabot) in [\#3261](https://github.com/inertiajs/inertia/pull/3261)
- \[3.x\] Fix core types when Axios is not installed by [@fouteox](https://github.com/fouteox) in [\#3258](https://github.com/inertiajs/inertia/pull/3258)
- \[3.x\] Compare asset versions before restoring history on a back/forward reload by [@lazerg](https://github.com/lazerg) in [\#3264](https://github.com/inertiajs/inertia/pull/3264)
- \[3.x\] Prevent a stale optimistic response from reverting a newer optimistic update by [@pascalbaljet](https://github.com/pascalbaljet) in [\#3245](https://github.com/inertiajs/inertia/pull/3245)
- \[3.x\] Prefer server.origin when resolving SSR CSS link URLs by [@pascalbaljet](https://github.com/pascalbaljet) in [\#3268](https://github.com/inertiajs/inertia/pull/3268)
- \[3.x\] Avoid top-level await in the generated SSR bundle by [@ramonmalcolm10](https://github.com/ramonmalcolm10) in [\#3239](https://github.com/inertiajs/inertia/pull/3239)
- \[3.x\] Forward missing Form visit callbacks by [@daleweaver777](https://github.com/daleweaver777) in [\#3262](https://github.com/inertiajs/inertia/pull/3262)
- \[3.x\] Add WhenMounted component by [@evan-burrell](https://github.com/evan-burrell) in [\#3218](https://github.com/inertiajs/inertia/pull/3218)
- \[3.x\] Improve tests in CI by [@pascalbaljet](https://github.com/pascalbaljet) in [\#3277](https://github.com/inertiajs/inertia/pull/3277)
- \[3.x\] Bump dependencies by [@pascalbaljet](https://github.com/pascalbaljet) in [\#3278](https://github.com/inertiajs/inertia/pull/3278)
- \[3.x\] Clean up in-flight cancelled prefetches by [@gianpieropuleo](https://github.com/gianpieropuleo) in [\#3271](https://github.com/inertiajs/inertia/pull/3271)
- \[3.x\] Handle already-aborted signals in the XHR client by [@gianpieropuleo](https://github.com/gianpieropuleo) in [\#3273](https://github.com/inertiajs/inertia/pull/3273)
- \[3.x\] Fix React InfiniteScroll scroll jump on Safari and CI flakiness by [@pascalbaljet](https://github.com/pascalbaljet) in [\#3282](https://github.com/inertiajs/inertia/pull/3282)
- \[3.x\] Support big integers as native BigInt values by [@pascalbaljet](https://github.com/pascalbaljet) in [\#3237](https://github.com/inertiajs/inertia/pull/3237)
- \[3.x\] Bump dependencies by [@pascalbaljet](https://github.com/pascalbaljet) in [\#3286](https://github.com/inertiajs/inertia/pull/3286)
- \[3.x\] Silence `state_referenced_locally` warning in Svelte `App` component by [@pascalbaljet](https://github.com/pascalbaljet) in [\#3287](https://github.com/inertiajs/inertia/pull/3287)