Inertia as the glue

Summary

Inertia is the key component that makes The Boring JavaScript Stack possible. It acts as the "glue" that bridges the gap between modern UI frameworks (like React, Vue, or Svelte) and traditional server-side MVC frameworks like Sails. Unlike traditional SPAs that rely on a separate API, Inertia allows you to build modern single-page applications (SPAs) without the complexity of managing a full-blown API.

By replacing the usual frontend routing system with Inertia, you get the best of both worlds: a mature backend framework that handles authentication, ORM, caching, and job queues, while using a UI framework purely for rendering and reactivity. This approach simplifies development, reduces complexity, and enables hybrid applications where some pages can be rendered server-side using EJS, while others function as interactive SPAs.

Inertia provides helper components like Link and utilities for handling form submissions, making it easy to build full-stack applications without unnecessary complexity. This combination ensures stability, flexibility, and rapid development while avoiding the common pitfalls of frontend-heavy architectures.

Transcript

What is Inertia?

You've heard me say Inertia is the glue—it's what makes The Boring Stack possible. But what exactly is Inertia, and how does it function as a glue?

Inertia is both a library and an architectural concept. It allows you to replace your frontend routing system—whether it's React Router, Vue Router, or another routing tech—with Inertia itself. This means you can build modern SPAs without needing a full-blown API.

Inertia calls itself "the modern monolith" because monolithic architectures are often the best way to build applications. Instead of splitting your frontend and backend into separate applications, Inertia keeps things simple and maintains stability in your UI.

Why Use Inertia?

Most modern UI frameworks like React and Vue do two things really well:

1. Rendering – Displaying components efficiently

2. Reactivity – Updating the UI based on state changes

However, when you add complexities like state management, client-side routing, SSR (server-side rendering), and data fetching, things become much more complicated.

With Inertia, you can use your UI framework in its purest form—just for rendering and reactivity—while leveraging a mature backend framework like Sails for everything else. You don’t need to reinvent the wheel. Instead, you get:

• Built-in authentication

• ORM for database interactions

• Caching, jobs, and queues

This lets you focus on your core business logic instead of dealing with unnecessary frontend complexity.

How Inertia Works

Inertia acts as a replacement for React Router (or Vue Router, etc.) in a server-centric approach to SPAs. Instead of handling frontend routes separately, Inertia makes server-side frameworks like Sails the source of truth.

With Inertia:

• Your frontend makes a request

• The server responds with a page component and its required data

• Inertia handles rendering the component and swapping pages without a full refresh

• It provides built-in helpers for things like form submissions and navigation

The Flexibility of The Boring Stack

Unlike traditional SPAs that force every page to be part of the single-page app, The Boring Stack allows for hybrid applications:

• Some parts of your app can be server-rendered with EJS (for SEO-heavy pages)

• Other parts can be interactive Inertia-powered pages with Vue, React, or Svelte

This flexibility ensures that your app isn't constrained to a single architecture. Instead, you can mix and match technologies where they make the most sense.

Why Inertia is Essential

Inertia is just a layer—it doesn’t introduce unnecessary complexity. Instead, it provides:

• A Link component for navigation

• Utilities for form submissions (since most web dev involves forms)

• A simple, stable, and powerful way to build full-stack JavaScript applications

Because of its simplicity and stability, Inertia is the key to making The Boring Stack such an effective way to build web applications.