Inertia.js v3 Beta: Reimagining the Modern Monolith with Built-in XHR and Optimistic UI

Introduction to Inertia.js v3 Beta

Inertia.js has long been the darling of the "Modern Monolith" movement, providing a bridge that allows developers to build single-page apps (SPAs) without the traditional complexity of client-side routing and state management. With the official launch of the Inertia v3 beta, the framework is moving into a more mature, self-reliant phase. This update is less about adding minor features and more about a fundamental architectural shift aimed at performance and developer ergonomics.

The primary mission of v3 is clear: optimization through independence. By reducing external dependencies and internalizing core logic, Inertia is doubling down on its promise to deliver a seamless developer experience. The headline features—dropping Axios in favor of a custom XHR engine and introducing native optimistic UI—suggest a framework that is no longer just a "glue" layer, but a comprehensive engine for modern web applications.

The Shift to a Built-in XHR Client

The most radical change in the v3 beta is the removal of Axios. Since its inception, Inertia has relied on Axios to handle its underlying HTTP requests. While Axios is a robust and industry-standard library, it was never built specifically for the unique needs of an Inertia-driven application.

Dropping Axios By moving to a custom internal engine, Inertia eliminates a significant third-party dependency. This isn't just about minimalism; it's about control. A custom client allows the Inertia team to fine-tune how requests are handled, how CSRF tokens are injected, and how headers are managed without the overhead of a generic library's middleware.

Bundle Size Reduction From a performance standpoint, removing Axios and its sub-dependencies streamlines the client-side footprint. In a world where every kilobyte counts toward Core Web Vitals, this reduction helps Inertia apps feel even snappier. As noted by early reports on Laravel News, this shift is a direct response to the community's desire for a leaner framework.

Deep Integration and Compatibility The benefit of a custom client is deep integration with the Inertia lifecycle. The framework can now handle events, progress tracking, and response parsing with surgical precision. However, this move does introduce a migration hurdle: developers who have heavily customized their Axios interceptors for logging or authorization will need to port that logic to Inertia’s new internal configuration hooks. While this is a breaking change, the long-term benefit of a purpose-built engine far outweighs the initial migration cost.

First-Class Optimistic UI and Instant Visits

One of the few remaining "tells" that an application is an Inertia app rather than a pure SPA has been the slight delay during server-side processing. v3 addresses this by introducing first-class Optimistic UI and Instant Visits.

Optimistic Updates Optimistic UI allows the interface to update before the server confirms the request. If a user "likes" a post, the heart icon fills instantly. In previous versions, developers had to manually manage local state and "roll back" that state if the server returned an error. In v3, Inertia provides native state management for these updates, making the "zero-latency" feel a built-in feature rather than a manual chore.

Instant Visits By utilizing pre-fetching and immediate transitions, v3 aims to eliminate the "loading gap" during navigation. When a user clicks a link, Inertia can now initiate the transition immediately, showing the new page structure while the data finishes loading in the background. This significantly enhances the "SPA-feel," making the transition between routes indistinguishable from a client-side router like Vue Router or React Router, all while maintaining the simplicity of a server-side controller.

Standalone Requests with the useHttp Hook

Perhaps the most practical addition for day-to-day development is the introduction of the useHttp hook. Historically, almost every request in Inertia was tied to a page visit. If you wanted to update a single piece of data without refreshing the entire page object, you often had to reach for router.post with a preserveState flag or bypass Inertia entirely using fetch.

Beyond Page Navigation The useHttp hook changes the game by allowing for standalone data fetching that doesn't trigger routing side effects. This is perfect for background processes like live form validation, auto-saving drafts, or fetching additional data for a modal.

Syntax and Usage The syntax is clean and aligns with modern hook-based patterns. Instead of relying on the global router, you can destructure methods directly:

const { post, processing, errors } = useHttp();

const saveDraft = () => {
    post('/posts/draft', { 
        data: form.data,
        onSuccess: () => { /* Handle local update */ }
    });
};

This approach simplifies the API by providing a localized way to handle requests that update component-level state rather than the global page.props object. It provides the power of a standalone HTTP client with the benefit of Inertia’s built-in handling of things like CSRF and session timeouts.

Transitioning to the v3 Beta

For those ready to dive in, the v3 beta is available now. The installation process generally involves updating your client-side packages to the beta version via npm or yarn.

npm install @inertiajs/vue3@beta
# or
npm install @inertiajs/react@beta

Migration Path The transition is relatively smooth, but the primary area of concern for intermediate to advanced developers will be the replacement of Axios. If your application relies on axios.defaults or complex interceptors, you must audit these and transition them to Inertia's new request configuration options.

Stability and Feedback As this is a beta release, it is best suited for development environments or non-critical projects. The Inertia team is actively looking for feedback on the new XHR client's performance across different browsers and network conditions. Testing this in the real world is essential to ensure that the "Modern Monolith" remains as stable as it is fast when the final release hits.

Conclusion

Inertia.js v3 Beta represents a significant leap forward in the framework's evolution. By internalizing the XHR layer and providing native tools for optimistic UI and standalone requests, the team has addressed the most common pain points of the "Modern Monolith" stack.

This update isn't just about new features; it's about refining the architecture to ensure Inertia remains a viable, high-performance alternative to complex SPA frameworks. For developers who value speed, simplicity, and a unified codebase, v3 is a definitive signal that the best is yet to come for Inertia.js.