InertiaJS + React: The Best of Both Worlds ⚡
Okay so here's the deal — InertiaJS and React are two heavy hitters in modern web dev. And when you combine them? Absolutely chef's kiss.
Let me break it down for you.
So What Even Is InertiaJS?
Inertia is an open-source library that lets you build modern web apps using Vue.js, React, or Svelte — without going full SPA or full traditional page reload.
The magic? It updates your UI dynamically without full page refreshes, giving you that snappy SPA feel while keeping things simple.
Wait, Only for Laravel?
Initially built for Laravel (and they pair so well together), but now it works with Rails, Django, ASP.NET Core, Node.js, Go, and AdonisJS too.
How Does It Actually Work?
Traditional MPA:
Browser → Server (full reload) → Browser 💤
SPA (React/Vue standalone):
Browser → API → Server (JSON) → Browser 🤔
InertiaJS:
Initial Load: Server renders page ⚡
Updates: Client-side, server returns HTML snippets 💯
Inertia is like the middle ground — initial load comes from the server (SEO friendly, fast first paint), then subsequent navigation happens on the client side without page reloads.
Getting Started: InertiaJS + React + Laravel
1. Install Dependencies
npm init
npm install @inertiajs/inertia @inertiajs/inertia-react react react-dom
2. app.js Setup
import { InertiaApp } from '@inertiajs/inertia-react'
import React from 'react'
import { render } from 'react-dom'
const app = document.getElementById('app')
render(
<InertiaApp
initialPage={JSON.parse(app.dataset.page)}
resolveComponent={name =>
import(`./Pages/${name}`).then(module => module.default)
}
/>,
app
)
3. welcome.blade.php
<!doctype html>
<html>
<head>
<!-- your head stuff -->
</head>
<body>
<div id="app" data-page="{{ json_encode($page) }}"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
Setting Up Routes (The Easy Way)
Laravel Routes (web.php)
Route::get('/', function () {
return inertia('Home');
});
Route::get('/about', function () {
return inertia('About');
});
React Component
import React from 'react'
import { InertiaLink } from '@inertiajs/inertia-react'
const Home = () => {
return (
<div>
<h1>Welcome Home</h1>
<p>Check out the about page</p>
<InertiaLink href="/about">About</InertiaLink>
</div>
)
}
export default Home
Performance Wins with InertiaJS + React
1. Actual SPA Behavior
No full page reloads = faster navigation = users happy.
2. Reusable Components
Build once, use everywhere. Your dev velocity just increased 📈
3. Lazy Load Data
import React, { useState, useEffect } from 'react'
import { usePage } from '@inertiajs/inertia-react'
const Posts = () => {
const [posts, setPosts] = useState([])
const { props } = usePage()
useEffect(() => {
setPosts(props.posts)
}, [props])
return (
<div>
<h1>All Posts</h1>
{posts.map(post => (
<div key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
))}
</div>
)
}
export default Posts
4. Server-Side Rendering (SSR)
Initial paint comes from server, then client takes over. Best of both worlds.
Debugging Tips
React Developer Tools
Browser extension that lets you inspect component hierarchy, props, state — essential tbh.
InertiaJS Debug Mode
import { InertiaApp } from '@inertiajs/inertia-react'
Inertia.init({
debug: true, // turns on request/response logging
})
ReactDOM.render(
<InertiaApp
initialPage={JSON.parse(app.dataset.page)}
resolveComponent={name =>
import(`./pages/${name}`).then(module => module.default)
}
/>,
app
)
Wrapping Up
From my internship experience, here's the truth:
- InertiaJS is underrated — gives you SPA powers without the complexity
- Integrates with React seamlessly
- Routing is so much easier compared to setting up full React Router
- Debugging is straightforward with the right tools
But real talk — you gotta understand both InertiaJS and React well to get the most out of them. The learning curve is worth it tho.
Master these tools and you'll be building web apps faster and better than most. 🚀