Inertia.js v3.0.0 вже тут — підтримка optimistic updates, новий хук useHttp та інші поліпшення

Випущено Inertia.js v3.0.0. Ми покривали бета‑версію раніше цього року, а фінальний реліз поєднує ті функції з низкою виправлень і доопрацювань, накопичених під час бети. Оновлення стосується ядра та всіх трьох адаптерів (React, Vue і Svelte).

Ключові новинки:

• Вбудований XHR HTTP‑клієнт замість Axios як обов'язкової залежності
• Новий хук useHttp для HTTP‑запитів, що не викликають навігацію
• Підтримка оптимістичних оновлень у router, useForm та useHttp
• API layout props замінює event bus та обхідні рішення через provide/inject
• SSR тепер працює у Vite dev‑режимі без окремого серверного процесу

# Що нового

# Вбудований XHR‑клієнт — Axios більше не обов'язковий

Axios більше не є обов'язковою залежністю. Inertia тепер постачається зі своїм XHR‑клієнтом, що за замовчуванням прибирає Axios (~15KB gzipped) з вашого bundle. Якщо ви використовуєте Axios‑interceptors або хочете зберегти попередню поведінку, Axios усе ще доступний як опціональна peer dependency.

Пакет qs також видалено. Встановіть його вручну, якщо ваш застосунок від нього залежить.

PR: #2833

# Хук useHttp

Новий хук useHttp закриває давню потребу в запитах, які не викликають навігацію. Він повертає реактивний стан — processing, errors, progress та isDirty — з тим самим зручним DX, що й useForm. Також є інтеграція з Precognition 2.x для валідації в реальному часі.

const http = useHttp({
    query: '',
})
 
const search = () => {
    http.get('/api/search').then((results) => {
        console.log('Found:', results.length)
    })
}

Хук призначений для маршрутів, які повертають response()->json(), а не Inertia::render(). Підтримується опція withAllErrors для повернення всіх помилок валідації одразу, а не лише першої для кожного поля.

PR: #2840, #2880

# Оптимістичні оновлення

Inertia v3 додає повноцінний API для оптимістичних оновлень у router, useForm та useHttp. Зміни застосовуються миттєво до стану сторінки й автоматично відкатуються при відповідях поза діапазоном 2xx. Снапшотуються лише ключі, явно визначені в колбеку. Також коректно обробляються паралельні оптимістичні оновлення — кожен одночасний запит має власний снімок для відкату.

// Fluent
router
    .optimistic((props) => ({
        todos: [...props.todos, { id: Date.now(), name, done: false }],
    }))
    .post('/todos', { name })
 
// Inline option
router.post('/todos', { name }, {
    optimistic: (props) => ({
        todos: [...props.todos, { id: Date.now(), name, done: false }],
    }),
})

Компонент <Form> також отримав проп optimistic, а колбеки optimistic і transform тепер підтримують виведення generic‑типів.

const form = useForm({ name: '' })
 
const addTodo = () => {
    form
        .optimistic((props) => ({
            todos: [...props.todos, { id: Date.now(), name: form.name, done: false }],
        }))
        .post('/todos')
}

PR: #2866, #2898, #2881

# Layout Props

useLayoutProps і setLayoutProps дають сторінкам акуратний спосіб передати дані в layout без використання event bus або provide/inject. Макети оголошують значення за замовчуванням; сторінки викликають setLayoutProps(), щоб їх перевизначити. У фінальній реалізації layout props передаються напряму як props компоненту.

PR: #2859, #3005

# SSR у Vite dev‑режимі

SSR тепер працює під час npm run dev без запуску окремого Node.js‑серверного процесу. Плагін Vite обробляє це автоматично; також додано фікс для flash-of-unstyled-content. Для продакшен‑збірки робочий процес не змінився: vite build && vite build --ssr, потім php artisan inertia:start-ssr.

PR: #2864, #2911

# Ще в v3

У v3.0.0 також з'явилися такі можливості. Деталі — в офіційній документації та в інструкції з оновлення:

• Instant Visits (#2907) — миттєво переключається на цільовий компонент сторінки, використовуючи shared props до відповіді сервера; специфічні для сторінки props підвантажуються при їхньому надходженні
• createInertiaApp() без аргументів (#2883) — тепер можна викликати без конфігу при використанні плагіна Vite; також додано опцію layout та колбек withApp (#2884, #2949)
• Опція preserveFragment (#2897, #2899) — зберігати фрагменти URL під час редиректів, зі серверною підтримкою в Laravel adapter
• Опція preserveErrors (#2819) — зберігати помилки валідації під час часткових перезавантажень
• <Deferred> проп слоту reloading (#2860) — компонент більше не скидається при часткових перезавантаженнях; використовуйте новий slot prop для обробки цього стану
• Базовий клас HttpError (#2999) — типізований базовий клас для HTTP‑винятків у системі подій
• Прогрес‑бар через Popover API (#2917) — прогрес‑бар переписано з використанням нативного Popover API браузера
• React Strict Mode (#2909) — передайте strictMode: true у createInertiaApp(), щоб увімкнути React.StrictMode
• Svelte 5 adapter (#2677) — переписаний з rune syntax; підтримка Svelte 4 припинена
• SharedPageProps у типах для подій і createInertiaApp (#2956) — shared props тепер включені в TypeScript‑типи для подій і налаштування додатку

# Примітки щодо оновлення

Це великий реліз зі зворотно‑несумісними змінами, зокрема оновлені вимоги до версій фреймворків, видалення Axios, ESM‑only вивід та низка перейменованих API. Перед оновленням уважно ознайомтеся з офіційною інструкцією з оновлення.

Щоб оновити:

npm install @inertiajs/vue3@^3.0   # or @inertiajs/react / @inertiajs/svelte
npm install @inertiajs/vite@^3.0
composer require inertiajs/inertia-laravel:^3.0

Джерела

• Inertia.js v3 Upgrade Guide
• Повний changelog
• Релізи JavaScript‑пакетів
• Релізи адаптера для Laravel