You can use Inertia to build modern single page applications with Laravel. You can do this using a frontend framework like React, Vue, or Svelte. Inertia acts as a bridge between Laravel and the frontend framework. We use Laravel for server-side operations while using Inertia for client-side operations.

So why would we want to build a modern single page application? Because these applications offer a faster and better user experience. Users can navigate through the application and perform actions without page refreshes. This makes users like the application more. Additionally, modern single page applications are faster and use less data. This means users wait less and use less data.

Inertia Installation

There are three different installation methods you can choose from: Laravel Jetstream, Laravel Breeze, and manual installation. With Laravel Jetstream and Laravel Breeze, you install Inertia as a ready-made stack. In this example, we'll use Laravel Breeze.

First, install Laravel Breeze from composer:

composer require laravel/breeze --dev

Then install and set up Breeze:

php artisan breeze:install

php artisan migrate
npm install
npm run dev

When installing with Breeze, it will ask which stack you want to use. You can choose the one that suits you. Since we'll be using React, we select "React with Inertia".

Routes and Controller

An example routing and controller structure is as follows.

web.php

Route::get('/', [PageController::class, 'home'])->name('home');

PageController.php

<?php

namespace App\Http\Controllers;

use App\Models\Form;
use Illuminate\Http\Request;
use Inertia\Inertia;

class PageController extends Controller
{
    public function home(Request $request)
    {
        $data["form"] = Form::with('programs')->get();
        return Inertia::render('Home', $data);
    }
}

Home.js

import { Layout } from "@/Layouts";
import { usePage } from "@inertiajs/react";

export default function Home({ form }) {
  return (
    <Layout>
      <div className="flex flex-1 w-full max-w-screen-lg flex-wrap gap-8">
        {form?.map((form, index) => {
          return (
            <div
              key={index}
              className="flex flex-1 w-full max-w-screen-sm flex-col gap-8 p-12 rounded-md bg-white"
            >
              {form.name}
            </div>
          );
        })}
      </div>
    </Layout>
  );
}

The lifecycle in the example above is as follows:

Request -> Routing -> PageController -> Inertia::render -> Home.js -> Response

To explain, a request to the "/" address is first routed to the PageController's home method. In this method, the form variable is sent to the Home component and rendered with the Inertia::render method and returned.

Using the form variable, we display the form data on the screen. This way, you can develop modern single page applications in your Laravel applications with Inertia. This is a fairly simple example. You can develop more complex applications.

For example, instead of refreshing the page on each form submit, you can use Inertia Forms with the useForm hook to perform form submit operations. This way, you can perform form submissions without page refresh. You can powerfully develop the features you need using React and Inertia with Laravel behind it.

Conclusion

If you're developing a monolithic application and want to build a modern single page application, you can use Inertia. Inertia acts as a bridge between Laravel and the frontend framework. This way, you can develop a modern single-page application on the frontend while performing server-side operations with Laravel. This makes your application faster and provides a better user experience. Additionally, you can develop your Laravel applications in a more modular and easier way with Inertia. If you want more information, you can visit the Inertia website.

Happy coding.