How to use InertiaJS to build a single page app without an API

Profile picture of Shayan Solutions Hacker Noon

Shayan Solutions

Development agency which aims to convert companies into robust digital solutions.

WWhat 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 like a glue between the frontend and the backend, it is not a framework but helps to connect the frontend and backend frameworks, it does it using adapters.

The officially supported front adapters are React, Vue, and Svelte, and the primary adapters are Laravel and Rails. There are many community supported adapters that support most modern languages ​​and frameworks.

How it works?

IntertiaJS does a smart job of providing a Link component that is wrapped around a normal HTML link. When a click occurs, instead of loading the page, it performs an Ajax request to get the content of the page. When Inertia makes this request, it is recognized by the backend and instead of sending an HTML response, it returns a JSON object with the name and data of the page component, which replaces the old page component with a new one and the page history is updated. Finally, the user gets a rich experience of zero page refreshes and instant component loading.

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’ll find all of the related React components. The structure will look like below:

picture
All React components will be inside the Pages folder

IntertiaJS routing to components

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

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

As inertia converts all links into XHR based queries. All requests to Laravel routes respond with JSON objects.

picture

This response is generated again in Laravel code.

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

Anything passed in the array will be given to a React component as props.

Laravel routes in InertiaJS

To use Laravel routes in InertiaJS, Breeze pre-installs the tightco / ziggy package. To create a link for the recording route, the following code can be used

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

Comparison with LiveWire

InertiaJS relies heavily on javascript, the developer stops writing blade components and all code switches to javascript. Livewire allows you to write components without writing javascript code. While working with LiveWire developers, it deals with PHP code and blade syntax, while InertiaJS gives you the option of using Vue or React as a front-end framework.

From a performance standpoint, LiveWire renders everything on the server which improves the first time the content is painted, this is also a huge benefit for SEO. InertiaJS uses javascript to load the content, but its performance is much better than other SPA frameworks because the data is already embedded in the response. InertiaJS also supports server-side rendering which allows SEO for the site.

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

Conclusion

InertiaJS gives a good starting point for building a single page application without writing separate APIs, no Axios library to call APIs, no hassle getting answers and parsing them. It is very natural for developers to continue developing applications with minimal changes in the applications. If you are looking to change your existing application to a modern look without having to completely rewrite the code, InertiaJS is the tool for you.

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

Key words


Source link

Comments are closed.