127: Jonathan Reinink - Building Modern Monoliths with Inertia.js

What It Covers

Jonathan Reinink explains Inertia.js, a protocol enabling developers to build single-page applications using Vue, React, or Svelte with traditional server-side frameworks like Laravel or Rails, eliminating the need for separate APIs while maintaining modern interactive experiences.

Key Questions Answered

• •Server-side routing with client-side rendering: Inertia maintains traditional controller-based architecture where developers return component names and props instead of blade templates. Initial requests return HTML, but subsequent navigation sends JSON responses containing only the component name and data needed, keeping the Vue or React instance alive throughout.
• •Automatic asset versioning: Inertia solves stale asset problems by passing an MD5 hash of the asset manifest with each request. When the server detects mismatched versions between client and server, it automatically triggers a full page reload to fetch updated JavaScript and CSS, while preserving flash messages and form data through intelligent reflashing.
• •Form handling without APIs: Developers submit forms using inertia.post() methods that follow server-side redirects automatically. Validation errors flash to session and return as props to the same page component, displaying reactively without manual state management. Successful submissions redirect to new pages, maintaining the traditional server-side workflow without custom AJAX handlers.
• •Preserve state for interactive elements: Adding a preserve-state attribute to links prevents Vue or React from destroying the component during navigation. This maintains scroll positions, form input values, and focus states when filtering or searching on the same page, as only props update while local component state persists throughout the interaction.
• •Persistent layouts for media players: Inertia renders layout components independently from page components rather than as children, preventing audio players or scrollable sidebars from resetting during navigation. This architecture enables Spotify-like experiences where media continues playing while users browse different pages, matching traditional SPA capabilities without API complexity.