Inertia JS is an amazing technology to create single-page applications for your project. As the official site claims “Inertia is a new approach to building classic server-driven web apps. We call it the modern monolith.” Many people confuse it with Inertia JS as being one of a framework of PHP. However, it’s not a framework but an efficient connection between the frontend and the backend. Inertia allows to create single-page apps(SPAs).
Table of Contents
Why use Inertia js ?
While working with Laravel, the frontend can easily render the data from the backend on the blade files by fetching the data from the controller. However, if you use Vue Js with Laravel, you would have to invoke an API to send the data from the frontend to the backend. You can get your data from the controller and models and send it to the views easily without any involvement of APIs.
You hit the AXIOS request to render your data but with Inertia JS you would no longer have to.
As a full-stack developer, you need to worry about the frontend as well as the backend and the data flow of the whole application. With Inertia Javascript you can have a transparency that would allow you to keep track of the back and front end.
Inertia is a library that supports both server-side and client-side frameworks. So basically, you can adjoin both sides to monitor the application easily. Inertia is still young after being released in August 2019, therefore the package support is limited to Laravel and Rails on the backend and React, Vue, and Svelte on the frontend.
Pros
• Simple SPAs
You can have simple SPAs through Inertia JS without having to worry about the routing, complex data flow, data fetching etc.
• REST and GRAPHQL APIs
You don’t have to worry about making APIs for your data rendering.
Cons
• Server-side rendering is not supported in Inertia JS.
• Inertia is not for multiple customer rendering.
There is no SEO support as it is a client-side technology, therefore prerendering services.
Let’s take a look at an example of Inertia JS on Laravel.
First, create a Laravel project.
composer create-project --prefer-dist laravel/laravel InertiaJS 
cd InertiaJS composer require Inertiajs/Inertia-laravel 
Choose the blade file you want to use, but you need to make sure it’s named as app.blade.php and @Inertia directive is added.
Or rename the welcome.blade.php file found in your resources/views folder to app.blade.php
<!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> 
You can send to the view from the controller by not returning it to the view() but using Inertia:: render()
use Illuminate\Http\Request;
use Inertia\Inertia;
class UserController extends Controller
{
public function user(Request $request)
{
$user = $request->user()->name->paginate(10);
return Inertia::render('User', [
'user' => $user,
]);
}} npm install @Inertiajs/Inertia @Inertiajs/Inertia-vue 
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); <template>
<div>
<h1>User</h1>
<ul>
<li v-for="user in users.data">
<Inertia-link :href="`/user/${user.id}`">
{{user.name }}
</Inertia-link>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
user: Object
}
}</script> 