Inertia is also called a modern monolith as it is a new approach towards creating server-based web applications. It allows developers to build completely client-side rendered, single page applications along with eliminating the complexities that come in modern SPAs (Single Page Applications). This is possibly due to the advantages of existing server-side frameworks. Also, it doesn’t have client-side routing nor does it need an API. All the developers have to do is develop controllers and page views like they always did.
Keep in mind that Inertia is not a separate framework and is not here to replace the existing server-side or client-side ones. In fact, Inertia is created to work with them. You can call it a glue that connects these two types of frameworks using adapters. Right now, officially there are three client side adapters i.e React, Vue.js, Svelte, and two server-side adapters – Laravel and Rails.
It is for the developers’ team who usually work with server-side applications and that too using Laravel, Ruby on Rails, or Django frameworks. Now, if the developers want to replace the server-side rendered views with a JavaScript based single-page app on the front end, then the process gets a little complicated.
This is where Inertia.js comes into the picture. It enables development teams to build an entirely JavaScript-based single page app without any of the additional complexities.
Inertia.js works a lot like the classic server-side rendered app. The developers need to create controllers, gather data from the database, and render views. The exception here is that the views are JavaScript page components. It means that the developers get all the benefits of client-side apps and the SPA experience without having to build an API.
Such a simplicity in the process will lead to a tight coupling between the back-end and front-end but that is how it’s done usually while developing a classic server-side rendered app.
With Inertia.js developers can build the apps just like they have always done with their server-side framework of choice. They can use their choice of framework’s functionality for things like authentication, authorization, routing, controllers, middleware, data fetching, and much more. The only difference here is of the view layer.
The views will be JavaScript components instead of the usual server-side rendering. This difference enables the developers to create the complete front-end using Svelte, Vue, and React.
Just by creating the front-end in JavaScript will not give a single-page app experience. If a developer clicks on a link, the browser will make a full page visit. It will ultimately result in a client-side framework to reboot on the next page load. Here, Inertia comes into the picture.
Inertia, at the core, is a client-side routing library. The developers can make page visits without having to force a complete page reload. It is possible using the
The server will detect when Inertia makes an XHR visit. Then instead of presenting a full HTML response, it will show a JSON response with the JavaScript page component name and data. Then Inertia will dynamically exchange the previous page component with the new page component and will update the history state too.
The end result of using Inertia.js is a seamless single-page experience.
This installation process makes use of Laravel for the server-side and Vue.js for the client-side, the following is required to follow along with this section:
Create a new Laravel project:
laravel new inertia-example
Or create with composer:
composer create-project --prefer-dist laravel/laravel inertia-example
into the project:
$ cd inertia-example
Install Inertia’s server-side adapter using composer:
composer require inertiajs/inertia-laravel
Rename the welcome.blade.php file found in your resources/views folder to app.blade.php.
Replace the content of your app.blade.php with this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
<script src="{{ mix('/js/app.js') }}" defer></script>
</head>
<body>
@inertia
</body>
</html>
The @inertia directive is a helper that creates a base div with an id of app that contains the page information, it tells Laravel that the views are generated using Inertia.
Next, set up the client-side adapter by running this command in your terminal:
npm install @inertiajs/inertia @inertiajs/inertia-vue
#or, Using Yarn
yarn add @inertiajs/inertia @inertiajs/inertia-vue
Open your app.js file found in resources/js and replace the content of your app.js file with the following:
import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'
Vue.use(InertiaApp)
const app = document.getElementById('app')
new Vue({
render: h => h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name => require(`./Pages/${name}`).default,
},
}),
}).$mount(app)
The resolveComponent callback tells Inertia how to load a page component. It receives a string as a page name and returns a page instance.
To enable code-splitting we use a babel plugin for dynamic imports.
First, install it by running this command:
npm install @babel/plugin-syntax-dynamic-import
#or, Using Yarn
yarn add install @babel/plugin-syntax-dynamic-import
Next, create a .babelrc file in your projects root directory with the following:
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
Finally, update the resolveComponent callback in your app initialization to use import instead of require. The callback returns a promise that includes a component instance, like this:
......
new Vue({
render: h => h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name => import(`./Pages/${name}`).then(module => module.default),
},
}),
}).$mount(app)
The world of web apps is constantly evolving. So, what does the future hold for Inertia.js? Inertia is for the developers who want to build huge applications and will want a tight coupling between their controllers and views. Additionally, along with this they also want to create apps using modern client-side frameworks. While the majority of the developers have this preference, there are also many cases where Inertia may not be the best choice.
The situations where Inertia will not be the right fit is when developers need SEO-oriented websites, multiple client support, and customer-facing or marketing pages. Using Inertia.js for such types of websites is not a good choice. Having said that, Inertia.js is a perfect choice for building web apps with powerful dashboards.
Right now, it does not support server-side rendering but there are tools available to pre-render Inertia websites. The tools will generate and cache the static HTML versions of specific routes of a website and then show that content.