W hat 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. 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? 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. 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: All React components will be inside the Pages folder IntertiaJS routing to components Instead of using HTML anchor tag, views will use the Link component which comes with InertiaJS as below: import { Link } from ‘@inertiajs/inertia-react’; Log in < = > Link href {route(‘login’)} </ > Link As inertia converts all links to XHR-based requests. All request 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’),
]); All elements passed into the array will be given to a React component as props. 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 Register < = > Link href {route(‘register’)} </ > Link Comparison with LiveWire InertiaJS heavily relies on javascript, the developer stops writing blade components, and all code moves to javascript. 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. Livewire 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. 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. 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. Also published here: https://medium.com/@marslan.ali/inertiajs-build-single-page-application-without-api-56cf5085829e

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Ways To Make Your Innovative, Game-Changing, Synergistic Website Stand Out In 2018

10 Use Cases for Using Laravel to Build Web App Development Projects

10 Things You Can Do Better While Working With Programmers

10 Prioritization Techniques for Agile Product Development

10 Popular Websites Built With Django

10 Ways To Make Your Innovative, Game-Changing, Synergistic Website Stand Out In 2018

10 Use Cases for Using Laravel to Build Web App Development Projects

10 Things You Can Do Better While Working With Programmers

10 Prioritization Techniques for Agile Product Development

10 Popular Websites Built With Django

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps