How to Use InertiaJS to Build a Single Page Application Without an API

October 15th 2021 new story

3

What is InertiaJS?

Basically, InertiaJS is a routing library written in javascript, which allows you to make page visits without forcing full page loads. InertiaJS 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.

0 reactions

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.

0 reactions

How does it work?

IntertiaJS does smart work by providing a Link component that is wrapped around a normal HTML link. When a click happens, instead of doing a 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.

0 reactions

Install Laravel with InertiaJS

composer 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:

0 reactions

All React components will be inside the Pages folder

0 reactions

IntertiaJS routing to components

Instead of using HTML anchor tag, views will use the Link component which comes with InertiaJS as below:

0 reactions

import { Link } from ‘@inertiajs/inertia-react’;
<Link href={route(‘login’)}>
Log in
</Link>

As inertia converts all links to XHR-based requests. All request to Laravel routes responds with JSON objects.

0 reactions

This response is generated again Laravel code.

0 reactions

return Inertia::render(‘Auth/Login’, [
‘canResetPassword’ => Route::has(‘password.request’),
‘status’ => session(‘status’),
]);

All elements passed into the array will be given to a React component as props.

0 reactions

Laravel routes in InertiaJS

To use Laravel routes in InertiaJS, breeze pre-installs package tightenco/ziggy. To create a Link for the register route following code can be used

0 reactions

<Link href={route(‘register’)} >
Register
</Link>

Comparison with LiveWire

InertiaJS heavily relies 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 deals with PHP code and blade syntax whileInertiaJS gives you options to use Vue or React as a frontend framework.

0 reactions

From a performance perspective, LiveWire renders everything on the server, which improves first content paint time, also it's a huge plus for SEO. InertiaJS uses javascript to load content, but its performance is far much better than other SPA frameworks as data is already embedded inside the response. InertiaJS also supports server-side rendering which allows doing SEO for the site.

0 reactions

An added benefit of InertiaJS is that it includes predefined components (Dialog and Confirmation Modal) and that it has its own validation package that can be installed via NPM.

0 reactions

Conclusion

InertiaJS 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 changing your existing application to a modern look without doing a whole code rewrite, InertiaJS is the right tool for you.

0 reactions

Also published here: https://medium.com/@marslan.ali/inertiajs-build-single-page-application-without-api-56cf5085829e

0 reactions

3