Inertia.js: When Does the Page or Form Reload?

A practical guide to how Inertia.js handles form submissions, page transitions, and local state — and why it behaves the way it does.

Inertia.js brings together the power of classic server-side applications and modern single-page apps — all without building a separate API. But when working with forms, especially in Laravel + Vue apps, behavior can sometimes feel unexpected.

This article explains what’s really going on when you submit a form using Inertia — and why that behavior makes sense once you understand the philosophy behind it.

Inertia is Meant to Feel Like a Classic App

In the words of Inertia creator Jonathan Reinink:

“Inertia.js was designed to work much like a classic server-side rendered application that does full page reloads. […] Of course, Inertia makes that whole process much nicer, but the concept is the same.”
— Reddit source

That’s the key idea: although we’re building a modern SPA, Inertia expects us to think in terms of page navigation and reloads — not AJAX-style “stay-on-the-same-page” updates.+

How Inertia Is Supposed to Work After a Form Submission

In a typical Laravel + Inertia app, the recommended pattern for handling form submissions looks like this:

public function update(Request $request, User $user)
{
    $user->update([...]);

    return redirect()->back();
}

This mirrors how classic server-side apps behave:
→ You submit a form
→ The server processes it
→ Then redirects back to the previous page (or a new one)

Inertia fully supports this model. When you redirect or return a new Inertia response, the component is reloaded, and fresh props are fetched from the server.

This is the default, expected behavior — and it applies even if your controller doesn’t explicitly return anything:

public function update(Request $request, User $user)
{
    $user->update([...]);
    // no return
}

Even without a return, Laravel still sends back a 200 OK response with HTML. Inertia treats this as a full-page response — just like return back() — and reloads the component accordingly.

👉 In short: you cannot avoid a page reload just by omitting a return.

Want to Avoid Reloads Entirely? Use Axios

If you want to completely bypass Inertia’s reload behavior and just update things manually — for example in a modal or inline form — you can use axios:

axios.post('/your-endpoint', {
  name: form.name
}).then(() => {
  console.log('Submitted!');
});

This gives you full control: no page reloads, no Inertia props, just a pure SPA-style update.

Partial Reloads Are Possible

If you want to avoid reloading the entire page, Inertia lets you define which props to reload after an action:

form.put('/user/123', {
  only: ['qualification']
});

This tells Inertia to preserve everything else and only fetch the updated qualification prop.
More details: inertiajs.com/partial-reloads

What About Forms?

Let’s say you have an Inertia.js form in Vue like this:

const form = useForm({
  name: props.user.name,
  email: props.user.email
});

When you submit it using:

form.put('/user/123');

and your controller returns a redirect or nothing at all, Inertia reloads the page — and updates the props.

However, your form values do not automatically reset or re-sync with those new props.

You’re taking a snapshot of the props. If props.user changes (e.g., after a reload), your form won’t automatically update. This is intentional, because:

• It allows users to preserve what they typed when the form fails validation.
• It avoids jarring resets of form state on every submit.

Manually Updating or Resetting the Form

If your submission changes something in the form that’s not visible to the user — like a hidden field, status flag, or token — you can update or reset the form after success:

Example: Updating a field after submission

form.put('/user/123', {
  onSuccess: () => {
    // Update a hidden form field (e.g. original_mode_id)
    form.original_mode_id = form.mode_id;
  }
});

Example: Resetting the form to new props

form.put('/user/123', {
  onSuccess: () => {
    form.reset({
      name: props.user.name,
      role: props.user.role
    });
  }
});

This is especially useful if you’re not relying on a full component reload, and want to keep things snappy.

Optional: preserveState: 'errors'

Sometimes you want the best of both worlds:

• Keep the form state if there’s a validation error
• But reset the form and reload the component if the submission was successful

That’s exactly what preserveState: 'errors' does:

form.post('/user', {
  preserveState: 'errors'
});

This keeps the component alive (no reload) if errors exist — and triggers a normal reload on success.
The preserveState functionality is not mentioned for the form explicitly in the docs, but its mentioned for page visits at https://inertiajs.com/manual-visits#state-preservation

✅ Summary

• Inertia is built on the philosophy of classic form submission: send → process → redirect → reload.
• Even if your Laravel controller doesn’t return anything, Inertia will still reload the page, just like return back().
• If you want to avoid a full reload, you can:
  - Use only: ['...'] for partial reloads of specific props.
  - Use preserveState: 'errors' to keep the form state on error, but reload on success.
  - Use axios for manual submissions when you need full control and no reload at all.
• useForm() is not reactive to updated props — by design. If needed, you can update or reset the form manually using onSuccess or by using preserveState.