Introduction to Inertia.js

In short Modern SPA (Single Page Application), frameworks can add drawbacks to a team’s workflows. You suddenly need to build an API, deal with API versioning, and handle CORS, and all that, while maintaining different applications at the same time. Inertia.js allows building modern SPAs without most of those drawbacks, easily integrating with our backend framework of choice (Laravel or Ruby on Rails).

So is Inertia linked to Laravel ?

And the answer is no. But it does offer an adapter for Laravel. But if you instead prefer something like React, Vue, or Svelte, that works as well. Inertia is not dependent on anyone’s technology, which here is Laravel and Ruby on Rails, but that being said, if you are a Laravel user, you’re going to feel right at home here.

Now you can think of Inertia, not as a replacement for React, or it’s not a big framework on top of Vue. It’s really in many ways, just a routing library that connects a server-side framework like Laravel to a client-side framework like React.

Inertia is the intermediate layer that connects your service-side framework to your client-side framework. Inertia does this via adapters. In the current scenario, there are three official client-side connectors (React, Vue, and Svelte) and two server-side connectors (Laravel and Rails).And the great thing is when you implement this, it allows you to continue using traditional controllers, routing, middleware, authentication, authorization, restrictions, and redirections.  Even if you’re building a single-page application, all of that stuff remains unchanged. Moreover, what this translates to is, if you use Inertia, then no, you don’t need to build an API, you don’t need to use OAuth. And also, you are not required to use multiple repositories for your API and your client-side application. Instead, you’re building a traditional, but a modern monolith. It’s all contained within a single application.

Inertia.js: The catalyst for MVC and its alliance With Laravel and React

The Laravel application structure is the design of folders, sub-folders, and documents accessible in the project.

In the app folder, we can locate controllers, model, middleware, exceptions, and providers. So notice if we click on a link, we make an AJAX request that directly hits on the Laravel controller. A middleware is liable for taking an Inertia response from the controller and serializing it in a manner so it tells the front which pages of the component ought to be rendered. Now, if we make a request it is sent to the controller which then calls the model to fetch data from the database. The process moves ahead after the model answers the request by sending the data back to the controller. Here onwards Inertia comes into play, A middleware is liable for taking an Inertia response from the controller and serializing it in a manner with the goal that it tells the frontend which pages component ought to be rendered. Inertia renders js files present in the resources folder of the Laravel application structure. Finally, the content present in the js file is accessible to the user.

The problem Inertia.js solves

• SPA complexities – building present-day SPAs accompanies a few problems. Developers have consistently disapproved of successfully dealing with the state of the application, figuring navigation for the application, setting up the route, and authentication.

• Building APIs – With Inertia.js you don’t have to fabricate a REST or GraphQL API, since Inertia was made to work out of the case with your exemplary server-side systems like Laravel or Ruby on Rails.

• Inertia provides Server-side Rendering (SSR) – With Inertia, SSR can be implemented easily. Like, modifications done by you on the website can be easily accessible on the client-side view but would be abstracted on the server-side view. This not only helps the page to crawl easily but also pays a lead for the SEO.

• No additional package installation in React for routing – React’s Single Page Application runs through React’s own routing. So in Inertia we do not need to install packages for the same.

Conclusion we can draw

We notice the advantage here is that you only have to load your basic assets once. You’re not refreshing the CSS, the scripts, and the footer for every single page request like you traditionally would with a standard service-side app. And that results in boosting your application performance.

The idea reflects that you don’t need to have separate teams communicating over APIs, one working entirely in the frontend while the other works entirely in the backend.  What if you in any case have your MVC applications and in lieu of HTML with Sprinkles of JavaScript, you replace your View layer completely with JavaScript. That is Inertia.