Inertia.JS Lets Developers Write API-Free Monolithic React/Vue/Svelte Applications in PHP or Ruby

Inertia.js allows developers to write single-page applications (SPAs) using classic server-side routing and controllers. Inertia tightly couples the backend to the frontend so that developers need not write APIs. Developers can use battle-tested server-side frameworks (e.g., Laravel, Ruby on Rails, Django, AspNetCore). On the client, developers can use React, Svelte, or Vue to implement the user interface.

Inertia.js takes a singular position in the SPA solution space between fully client-side SPAs and MPAs (multi-page application). Inertia refers to its approach in the following terms:

Inertia provides three official client-side adapters (React, Vue.js, and Svelte) and two server-side adapters (Laravel and Rails). Community adapters are however available for a range of server frameworks, including AspNetCore, CakePHP, ColdBox, Django, Go, Masonite, Mithril.js, Node.js, Phoenix, Symfony, and Yii2.

Inertia allows developers to build web applications as if following an MPA architecture. Developers leverage a server-side web framework for routing, authentication, authorization, data fetching, and more. The view is however the responsibility of the client, like in SPAs. The documentation explains:

The first time a client requests a page, Inertia returns a full HTML response. On subsequent requests, server-side Inertia returns a JSON response with the JavaScript component (represented with its name and props) that implements the view. Client-side Inertia then replaces the currently displayed page with the new page returned by the new component and updates the history state.

Inertia.JS Lets Developers Write API-Free Monolithic React/Vue/Svelte Applications in PHP or Ruby

Client-side, the request handling is implemented by using a custom

component that wraps around a normal anchor link. Links are thus intercepted so that the default behavior of the browser (full page refresh) is replaced by sending an XMLHttpRequest (XHR) request to the server.

Inertia requests use specific HTTP headers to discriminate between full page refresh and partial refresh. If the

X-Inertia

is unset or false, the header indicates that the request being made by an Inertia client is a standard full-page visit.

Server-side, a request with a

X-Inertia

request header set to

true

will trigger a JSON response that includes the name of the component that displays the requested page, the props for that component, the requested URL, and a version number.

The documentation provides the following example of a response object corresponding to a request:

REQUESTGET: http://example.com/events/80Accept: text/html, application/xhtml+xmlX-Requested-With: XMLHttpRequestX-Inertia: trueX-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5

RESPONSEHTTP

/

1.1

200

OKContent

Type

:

application

/

jsonVary

:

AcceptX

Inertia

:

true

{

“component”

:

“Event”

,

“props”

:

{

“event”

:

{

“id”

:

80

,

“title”

:

“Birthday party”

,

“start_date”

:

“2019-06-02”

,

“description”

:

“Come out and celebrate Jonathan’s 36th birthday party!”

}

}

,

“url”

:

“/events/80”

,

“version”

:

“c32b8e4965f418ad16eaebba1d4e960f”

}

The version parameter addresses asset versioning and helps ensure that the server returns a full HTML response when the requested asset has changed.

The documentation addresses commonly occurring cases (scroll management, forms, error handling, cross-site request forgery protection, progress indicators, local state caching, code splitting, and more). Authentication and authorization are handled server-side by the chosen server framework. A demo app (Laravel + Vue) is available online.

Inertia targets developers who want to reuse their skills or an existing codebase. The documentation mentions:

As part of an animated discussion on Hackernews of an article proposing alternatives to SPAs (titled If not SPAs, what?), one developer with extensive experience with Ruby on Rails shared a positive opinion of Inertia:

Another alerted however about the absence of support of server-side rendering:

Danny Moerkerke, in his article titled Your Single-Page App Is Now A Polyfill, proposed an alternative technique to write faster SPAs that uses HTML streaming and service workers to proxy and cache full page visits. Every new page is a full-page reload but only the content that changed from the server is fetched. As with Inertia, no client-side routing is necessary.

Inertia is open-source software distributed under the MIT license. Feedback and contributions are welcome and should follow Inertia’s contribution guidelines.

Leave a Reply

Your email address will not be published. Required fields are marked *