Inertia 3.x bridges the gap between server-side logic and client-side interactivity. It eliminates the need for complex state management libraries like Vuex or Pinia for most applications. By treating your server as the single source of truth, you can ship features faster.
State management in a php web framework used to mean full page reloads. Or it meant writing thousands of lines of boilerplate for a rest api with php. Inertia changed that. With the latest updates, managing transient UI state and large data streams is simpler than ever.
Transient State: The remember Hook
Users expect their work to stay put. If they fill out half a form and navigate away, they want that data there when they return. This is transient state. It doesn't belong in your database yet. It only exists in the user's browser.
Inertia 3.x provides the remember hook for this exact purpose. It persists local component state to the browser history. When the user clicks "back," the state is restored instantly.
Implementing remember in Vue
The useRemember hook is a php developer tool favorite for building modern frontends. It works just like ref, but with persistence.
<script setup>
import { useRemember } from '@inertiajs/vue3'
const form = useRemember({
title: '',
content: '',
category: 'general'
}, 'post-editor-state')
const submit = () => {
form.post('/posts')
}
</script>
<template>
<form @submit.prevent="submit">
<input v-model="form.title" placeholder="Post Title" />
<textarea v-model="form.content" placeholder="Write something..."></textarea>
<button type="submit">Publish</button>
</form>
</template>
The second argument, post-editor-state, is a unique key. This ensures the data is only restored for this specific component. It prevents state collisions across your application.
Data Streams: The Power of merge
Handling long lists or infinite scrolls used to be difficult. Usually, it required manual array manipulation in Vue. Inertia 3.x introduces the merge prop. This allows you to append or prepend data to an existing prop during partial reloads.
This is perfect for feeds, search results, and notifications. Instead of replacing the entire list, the server tells the client to just add the new items.
Merging in a Laravel Controller
On the server side, you simply wrap your response in the merge method. This tells Inertia to treat this specific prop as an additive collection.
use Inertia\Inertia;
public function index(Request $request)
{
$activities = Activity::latest()
->paginate(15);
return Inertia::render('Dashboard', [
'activities' => Inertia::merge($activities->items()),
'filters' => $request->only(['search', 'type']),
]);
}
When you call router.reload({ only: ['activities'] }), the client receives the new items. Inertia automatically appends them to the existing activities array in your Vue component. You don't have to write a single line of concat() or push() logic.
Performance: Caching with once
Sometimes you have data that never changes. Think of category lists, user roles, or country codes. Loading these on every request is wasteful. Inertia 3.x solves this with once props.
A once prop is sent to the client exactly once. After the initial load, Inertia caches it client-side. The server will skip the data fetching for that prop on all subsequent navigations.
This significantly reduces database load and network payload. It makes your php framework application feel lightning-fast. For even more speed, consider pairing this with Laravel Octane.
Case Study: The Dynamic Activity Feed
Let's look at how these features work together in a real-world scenario. Imagine an activity feed for a social dashboard.
Users need to scroll through hundreds of updates. They might click an update to see details, then hit the back button. They expect to be exactly where they left off.
Step 1: The Infinite Scroll
You use Inertia::merge in your controller. On the frontend, you use an intersection observer. When the user hits the bottom, you trigger a partial reload.
router.get('/dashboard', { page: nextPage }, {
preserveState: true,
preserveScroll: true,
only: ['activities'],
})
The list grows seamlessly. There is no flicker. There is no "loading" state that wipes the existing items.
Step 2: Preserving the View
Inside each activity item, the user might toggle a "comments" section. If they navigate away and come back, that toggle should be preserved. By using useRemember for the open state of comments, you ensure a smooth user experience.
Step 3: Global Configs
The feed might have different "types" of activities (e.g., Post, Like, Share). These types and their associated icons are static. You pass these as a once prop. They load when the user first lands on the dashboard. They stay in memory as the user navigates through the rest of the app.
Strategies for Synchronization
Inertia excels at keeping the client and server in sync. But occasionally, you need to force an update.
Background Polling
For an activity feed, you might want to check for new items every 60 seconds. You can use a simple setInterval with router.reload. If you use merge, new items will simply appear at the top or bottom of the list without moving the user's scroll position.
Deferred Props
Inertia 3.x also supports deferred props. You can return the main page content immediately. Then, you can stream the heavy data (like the feed) in the background. This improves the "Time to First Byte" and makes the app feel more responsive.
Security and Authentication
State management isn't just about UI. It's about security. When building with Laravel, php authentication is built-in.
Inertia handles CSRF protection automatically. Every request includes the necessary tokens. When you manage state via Inertia props, you are working within a secure, authenticated environment by default.
The Future of Modern PHP
Inertia 3.x is more than a library. It is a philosophy of simplicity. It removes the friction between the frontend and backend.
By mastering remember, merge, and once, you can build complex applications that feel like SPAs but remain as simple as traditional monoliths. This is the best-in-class developer experience we strive for.
We'd love to hear how you are using these new state management features. Are you building an infinite scroll or a complex dashboard? Every corner of the community is finding new ways to ship fast.
Your story belongs here. Start building your next idea with the Laravel starter kits today.