Modern Monoliths: Building SPAs with Inertia.js and Laravel

Overview of the Inertia Approach

Building single-page applications (SPAs) often feels like managing two separate worlds: a complex

frontend and a robust

PHP

backend. Usually, this requires building a messy

REST API

and managing client-side routing, which adds significant overhead.

Inertia.js

solves this by acting as an adapter rather than a framework. It allows you to build fully client-side rendered SPAs using classic server-side routing and controllers. You get the snappy feel of a modern web app without the pain of manual state synchronization or token-based authentication.

Prerequisites

Before diving into the code, ensure you have a firm grasp of

fundamentals, particularly routing and controllers. Since

Inertia.js

lets you use your favorite frontend tools, you should be comfortable with either

Vue.js

or

React

. You will also need

Node.js

and

Composer

installed on your local machine to manage dependencies.

Key Libraries & Tools

• Laravel Installer: The command-line utility for bootstrapping new projects.
• Laravel Breeze: A minimal starter kit that provides a perfect starting point for
  Inertia.js
  projects.
• Inertia Adapters: Specialized packages for
  Vue.js
  or
  React
  that bridge the gap between the backend and the frontend.

Code Walkthrough: Data Exchange

In a standard app, a link click reloads the whole page.

intercepts these clicks and performs an

AJAX

request instead.

On the backend, your controller looks surprisingly familiar:

use Inertia\Inertia;

public function index()
{
    return Inertia::render('Dashboard', [
        'users' => User::all(),
    ]);
}

Instead of returning a Blade view, we use Inertia::render. This sends a

response containing the component name ('Dashboard') and the data (props). On the frontend,

Inertia.js

receives this data and swaps the current page component with the new one dynamically.

Syntax Notes & Best Practices

Always use the <Link> component provided by the

library rather than standard <a> tags. Standard tags trigger a full browser refresh, defeating the purpose of the SPA.

import { Link } from '@inertiajs/vue3'

<Link href="/users">View Users</Link>

Tips & Gotchas

Don't try to use

for public-facing websites where SEO is the top priority unless you implement Server Side Rendering (SSR). For internal dashboards and complex SaaS products, however, it shines. Remember that because

Inertia.js

shares the same session as your

Laravel

backend, you don't need to worry about

OAuth

or

JWT

for internal navigation. Use the standard

Laravel

auth guards you already know.