Inertia.js: the missing link between Laravel and React

When it comes to integrating React with a Laravel backend, the automatic answer is often: "you build a REST API". Inertia.js offers a third way — and it deserves a closer look.

The problem Inertia solves

Imagine a project creation form. In classic API mode, here is what happens:

1. The frontend submits the data in JSON format
2. The backend validates and returns either validation errors or the created object
3. The frontend intercepts the response, updates the state, manages validation errors field by field, and redirects on success

It works. But that's code you have to write, maintain, and test on both sides — often just to replicate what Laravel does out of the box.

Inertia solves this by keeping the backend as the single source of truth for data and navigation, while letting React handle rendering the user interface.

How it works in practice

Inertia intercepts link clicks and form submissions. Instead of reloading the page, it sends an XHR request with a special header. The server recognizes this header and returns only the component's data (props), not the full HTML.

The client receives this data and re-renders only the relevant component. Visually, it feels like an SPA. Under the hood, it's classic server-side routing without the trade-offs.

import { useForm } from '@inertiajs/react';

export default function CreateProject() {
  const { data, setData, post, processing, errors } = useForm({
    name: '',
    description: '',
  });

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    post('/projects'); // Inertia handles the request and errors
  };

  return (
    <form onSubmit={submit} className="space-y-4">
      <input
        value={data.name}
        onChange={e => setData('name', e.target.value)}
        className="w-full rounded border p-2"
      />
      {errors.name && <p className="text-red-500 text-sm">{errors.name}</p>}
      
      <button disabled={processing} className="bg-indigo-600 text-white px-4 py-2 rounded">
        Create
      </button>
    </form>
  );
}

Laravel validation errors are passed directly to errors without manual mapping. The server-side redirect (return Redirect::route('projects.index')) is respected on the client. Local state (scroll position, open modals) is preserved between page transitions.

What you actually gain

What you lose

We must be honest about the trade-offs.

My verdict

If you are building a SaaS, an internal tool, or a business application with Laravel and React, Inertia is seriously worth considering.