JavaScript & Laravel video tutorial: Discovery of interjS

In this tutorial I suggest you discover https://inertiajs.com/, a tool that allows you to create single-page React, Vue or Svelte sites controlled by the server.

Operation

In the context of a classic single-app application, the client will control all of the user navigation and the server will only be contacted through an API.
InertiaJS offers a different single-app approach where decisions are made by the server (the back-end will choose the component to display and the props to pass).

How does it work?

When loading for the first time:

• The back-end will define the component to display and the associated properties then will send this information to the front through an HTML element.
• The client side code will analyze this element and load the requested component then mount it with the associated properties.

When clicking on an element:

• An ajax request will be sent to the server.
• The server retrieves the data and returns a JSON containing the component to load and the associated props.
• The client will load the component (if it has not already done so) then inject it into the structure.

Inertia allows the use of front-end frameworks (which makes it possible to easily create interactive elements) while eliminating part of the associated complexity (router and management of an API).

Disadvantage

However, this approach also has several drawbacks:

• There is currently no possibility of rendering on the server side (problematic for SEO).
• The transition between the pages can be slower than for a classic front-end application because you have to wait for the server's response to determine the component to display (no ghosting possible).

Partial use

Inertia is not an "all or nothing" choice and it can be used selectively and "classic" pages can coexist with inertia pages.