Що таке Inertia.js і чим вона відрізняється від SPA з окремим API?

Inertia - «клей» між серверним фреймворком (Laravel) і фронтенд-фреймворком (Vue, React, Svelte). Вона дає досвід SPA, але без окремого API.

Класична SPA з API:

• Laravel - REST/JSON API, автентифікація токенами чи Sanctum;
• Vue - власний роутер, стор, запити до API, обробка помилок;
• дві кодові бази, дублювання валідації, контрактів, маршрутів.

Inertia:

• маршрути, контролери, middleware, авторизація, валідація - звичайні в Laravel;
• контролер замість Blade-шаблону повертає Vue-компонент сторінки з даними:

public function index()
{
    return Inertia::render('Users/Index', [
        'users' => User::query()->latest()->paginate(20),
    ]);
}

<!-- resources/js/pages/Users/Index.vue -->
<script setup>
defineProps({ users: Object });
</script>

Як це працює:

1. перше завантаження - звичайний HTML-відгук: кореневий шаблон з даними сторінки в JSON;
2. переходи через <Link> - запит XHR із заголовком X-Inertia. Сервер бачить його й повертає JSON - назву компонента й props;
3. Inertia підміняє компонент сторінки без перезавантаження.

Чого в Inertia немає й не треба: клієнтського роутера (Vue Router), API для сторінок, сторів для серверних даних (дані приходять props).

Коли Inertia добре підходить: застосунок і фронтенд роблять одна команда, все в одному репозиторії Laravel - адмінки, SaaS, кабінети.

Коли ні: API потрібен ще й для мобільного застосунку чи сторонніх клієнтів; фронтенд і бекенд розробляють і деплоять незалежно.

Inertia 3 (актуальна версія) прибрала залежність від Axios (власний HTTP-клієнт), спростила SSR у розробці й вимагає Laravel 11+ та PHP 8.2+. Стартові набори Laravel з Vue побудовані саме на Inertia.

Докладніше в документації: Inertia: як це працює