Inertia.js — Build a Single Page Application without API
What is Inertia.js?
Basically, Inertia.js is a routing library written in javascript, which allows you to make page visits without forcing full page loads. Inertia.js works as a glue between frontend and backend, it’s not a framework but helps to connect frontend and backend frameworks, it does it with help of adapters. Officially supported, frontend adapters are React, Vue, and Svelte, and backend adapters are Laravel and Rails. There are many community-supported adapters available which support most modern languages and frameworks.
How does it work?
Intertia.js does smart work by providing a Link component that is wrapped around a normal HTML link. When a click happens, instead of doing page load it makes an AJAX request to get page contents. When Inertia makes that request, it’s recognized by the backend and instead of sending an HTML response, it sends back a JSON object with page component name and data, which replaces the old page component with a new one and the history of the page is updated. Finally, the user gets a rich experience of zero page refreshes and instant component loading.
Install Laravel with Inertia.js
# setup laravel project inside folder laravel-inertia-example
composer create-project laravel/laravel laravel-inertia-examplecd laravel-inertia-examplecomposer require inertiajs/inertia-laravel# Install laravel breeze package in composer,
# It provides a starting point for fresh applications.
# Breeze generates views for login, registration and forget password
composer require laravel/breeze — dev
# Install breeze with react, you can use vue if you want
php artisan breeze:install react
npm install && npm run dev
# Setup database configuration in .env file and then run
php artisan migrate
# You can run project using
php artisan serve
Code Structure
Under resources/js you will find all related React components. The structure will look as below:
All React components will be inside the Pages folder
Intertia.js routing to components
Instead of using HTML anchor tag, views will use the Link component which comes with Inertia.js as below:
import { Link } from ‘@inertiajs/inertia-react’;<Link href={route(‘login’)}>Log in</Link>
As inertia converts all links to XHR-based requests, all requests to Laravel routes responds with JSON objects.
This response is generated again Laravel code.
return Inertia::render(‘Auth/Login’, [‘canResetPassword’ => Route::has(‘password.request’),‘status’ => session(‘status’),]);
Laravel routes in Inertia.js
To use Laravel routes in Inertia.js, breeze pre-installs package tightenco/ziggy. To create a link for the registered route following code can be used
<Link href={route(‘register’)} >Register</Link>
Comparison with LiveWire
Inertia.js relies heavily on JavaScript, the developer stops writing blade components, and all code moves to JavaScript. Livewire allows you to write components without writing any javascript code. While working with LiveWire, developers deal with PHP code and blade syntax while Inertia.js gives you options to use Vue or React as a frontend framework.
From a performance perspective, LiveWire renders everything on the server, which improves first content paint time, also it’s a huge plus for SEO. Inertia.js uses javascript to load content, but its performance is far much better than other SPA frameworks as data is already embedded inside the response. Inertia.js also supports server-side rendering which allows doing SEO for the site.
An added benefit of Inertia.js is that it includes predefined components (Dialog and Confirmation Modal) and that it has its own validation package that can be installed via NPM.
Conclusion
Inertia.js gives a good starting point to build single page application without writing separate APIs, no Axios library to call APIs, no hassle of getting responses and parsing them. It’s very natural for developers to continue developing applications with minimal changes into applications. If you are looking to change your existing application to a modern look without doing a whole code rewrite, Inertia.js is the right tool for you.
More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.
