Sometimes it can be a very intimidating process when you’re building web applications. You have to think about if it will be a traditional server-side rendered app(SSR) or a single page application(SPA) before going to pick from the many frameworks and libraries. While both server-side rendering and client-side rendering have their pros and cons, Inertia integrates the best of both worlds.

Inertia is a new approach for constructing classic server-driven web applications. It’s a modern monolith. Inertia lets you create fully client-side rendered, single-page apps, without much of the complexity that comes with contemporary SPAs. It does this by leveraging existing server-side frameworks. Inertia has no client-side routing, nor does it need an API. You can easily create controllers and page views as you’ve always done!

What is Inertia?

Inertia isn’t a framework, nor is it a substitute for your existing server-side or client-side frameworks. Rather, it’s designed to work with them. You can think of Inertia as a glue that connects the two. Inertia accomplishes this via adapters. Inertia currently offers three official client-side adapters (React, Vue, and Svelte) and two server-side adapters (Laravel and Rails).

Inertia allows you to build a fully JavaScript-based single-page app without all this added complexity. Inertia works much more like a classic server-side rendered app. You create controllers, you get data from the database (via your ORM), and you render views. Except for the views here are JavaScript page components. Meaning you get all the power of a client-side app and the SPA experience, but you don’t need to build an API.

Inertia as a Problem Solver

Building APIs

With Inertia.js you don’t require to make a REST or GraphQL API, because Inertia was designed to work out of the box with your classic server-side frameworks such as Laravel, Ruby on Rails, or Django.

Resolve SPA Complexities

You’ve to face many hassles while building modern SPAs(Single Page Applications). Developers have always had problems with effectively managing the state of the application, figuring routing for the app, setting up navigation guards, and authentication.

Solve Browser issues

Inertia has built-in services that resolve browser problems faced when building SPAs, issues such as:

Browser history management and scroll position.

it provides remember , preserveState, and preserveScroll properties to cache local component states

Loading indication

Because Inertia requests are made via AJAX calls there’s no default browser loading indicator, so Inertia contains NProgress.js, a progress bar library. The loading indicator is only displayed if a request takes longer than 250m.

Assets reloading and versioning

Inertia offers an option to track and store the current version of assets on your website

Benefits of Using Inertia

• The application paths are all contained in a single file.
• Inertia completely eliminates the complexity of client-side routing.
• It is possible to configure it with React.

Now Server-side rendering is possible with Inertia

Recently, the Inertia team announced the release of Server-side rendering (SSR) for Inertia.js. Inertia.js applications written in Laravel or Rails now have the added benefit of pre-rendering the initial page load on the server and sending the HTML to the browser. SSR enables users to interact with the page faster and helps search engines crawl pages more quickly. The beauty of SSR in Inertia.js is that you can write the server-side application in Laravel or Rails. SSR is available for Vue, Vue 3, and React adapters.

Laravel Breeze also offers an Inertia.js frontend implementation powered by Vue or React. For more details regarding Laravel Breeze, you can visit our blog on this link