127: Jonathan Reinink - Building Modern Monoliths with Inertia.js
Episode
96 min
Read time
2 min
Topics
Productivity, Leadership, Software Development
AI-Generated Summary
Key Takeaways
- ✓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.
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.
Notable Moment
Reinink reveals that browser AJAX requests automatically follow server redirects, enabling Inertia's form submission pattern. When a create-user endpoint validates data and redirects to an index page, the client receives the index page response without knowing the intermediate redirect occurred, perfectly mimicking traditional server-side form behavior while maintaining SPA responsiveness.
Episode Transcript
In this episode of Full Stack Radio, I talked to Jonathan Renick about using inertia JS to create single page application experiences without abandoning tried and tested server side application development workflows. This is Full Stack Radio episode 127. Hey, everyone. Welcome to another episode of the Full Stack Radio podcast. I'm your host, Adam Wadden. And today, it is my pleasure to welcome back to the show, I think, the number one recurring guest of all time, Jonathan Reinink. How is it going, dude? It's going awesome, Adam. How are you? I am doing great. So, the reason I wanna have you on the show today is last time that we talked, we talked we did this episode. I think it was episode one zero eight, client side rendering server side routing, where we talked a bunch about this approach that you had been exploring for building, like, sort of traditional Laravels or Rails, whatever apps, you know, with, like, your controllers and doing your database queries and preparing all your data for your views and stuff, but instead of doing, what I think a lot of us have done in the past, which is use like a blade view in Laravel maybe with like some view components mixed in, just deciding to go all in on a library like Vue or React for the the front end. So literally no server generated markup, everything's kind of done on the client so that all the UI lives in sort of one, you know, approach, but not like throwing out the baby with the bathwater, you know, and, like, having to create an SPA and then create an API and worry about all that because really you're just trying to build a regular app, you just want the UI to feel responsive and interactive and kind of high fidelity. So that's kind of where we ended up last time, and this was kind of you were just kind of doing that with some DIY sort of stuff, you know, just you wrote a blog post about it that we linked in the episode that sort of explained the setup and how you kind of had things organized, but since then you've sort of taken things to the next level and looked for ways to sort of optimize this workflow and built like a whole library around it now called inertia JS, which is taking the world by storm. So I thought it'd be awesome to to sort of make this episode sort of like the canonical inertia JS, conversation and really, talk about what it is, what problems it tries to solve, where you're trying to go with it in the future, and what's there now, what people have been doing with it. So, I guess maybe the best place to start would be talking about, like, what inertia. Js actually is, what problems does it try to solve, especially with in comparison to the approach that we talked about …
Get the full transcript (17,755 words) + summary by email — free
One-time email with the complete transcript and AI summary of this episode. No account needed.
One email, no spam. We’ll also show you what SignalCast does.
You just read a 3-minute summary of a 93-minute episode.
Get Full Stack Radio summarized like this every Monday — plus up to 2 more podcasts, free.
Pick Your Podcasts — FreeKeep Reading
More from Full Stack Radio
153: DHH – Omarchy and Designing Your Own OS on Arch Linux
Aug 21 · 76 min
The TWIML AI Podcast
How Capital One Delivers Multi-Agent Systems with Rashmi Shetty - #765
Apr 16
More from Full Stack Radio
152: Ben Orenstein - How to Stand Out When Applying for a Job at a Small Company
Jan 28 · 47 min
Venture Stories
[Highlight] Grammarly's Evolution into an AI Agent Platform with Shishir Mehrotra
Jan 28
Books, tools, and gear mentioned in this episode
SignalCast may earn commission on purchases via these links.
Tools
“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.”
“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”
“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”
“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”
“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”
“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”
company
“SPONSORS: Cloudinary”
“SPONSORS: DigitalOcean”
More from Full Stack Radio
We summarize every new episode. Want them in your inbox?
153: DHH – Omarchy and Designing Your Own OS on Arch Linux
152: Ben Orenstein - How to Stand Out When Applying for a Job at a Small Company
151: DHH – Building HEY with Hotwire
150: Secret Screencasting Tips & Behind the Scenes of Tailwind CSS 2.0
149: Choosing a Payment Processor, Radical Icons & W3C Hype
Similar Episodes
Related episodes from other podcasts
The TWIML AI Podcast
Apr 16
How Capital One Delivers Multi-Agent Systems with Rashmi Shetty - #765
Venture Stories
Jan 28
[Highlight] Grammarly's Evolution into an AI Agent Platform with Shishir Mehrotra
a16z Podcast
Dec 16
Ryo Lu (Cursor): AI Turns Designers to Developers
All-In with Chamath, Jason, Sacks & Friedberg
Jul 15
Former Intel CEO on What Went Wrong, What's Next + Lovable CEO on the Real Promise of Vibe Coding
The Diary of a CEO
Jun 29
Women’s Fitness Expert: What You NEED To Know About Dieting & Exercise | Dr. Stephanie Estima
Explore Related Topics
This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.
Read this week's Software Engineering Podcast Insights — cross-podcast analysis updated weekly.
You're clearly into Full Stack Radio.
Every Monday, we deliver AI summaries of the latest episodes from Full Stack Radio and 192+ other podcasts. Free for one show.
Start My Monday DigestNo credit card · Unsubscribe anytime