Skip to main content
Full Stack Radio

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

96 min episode · 2 min read
·

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.

Know someone who'd find this useful?

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.

Browse all Full Stack Radio transcripts →

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 — Free

Keep Reading

Books, tools, and gear mentioned in this episode

SignalCast may earn commission on purchases via these links.

Tools

  • Inertia.jsRecommendedBy guest
    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

More from Full Stack Radio

We summarize every new episode. Want them in your inbox?

Similar Episodes

Related episodes from other podcasts

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 Digest

No credit card · Unsubscribe anytime