Inertia.js solves one of the most common Laravel architecture questions: “Should I build a REST API and a separate React\/Vue frontend, or use Blade?”<\/p>\n
The answer in 2026 is neither. Inertia.js gives you a single Laravel application that renders React or Vue components server-driven \u2014 without building an API, without duplicating authentication, without CORS configuration.<\/p>\n
Inertia.js is a protocol and library that connects your Laravel backend directly to your React or Vue frontend. When a user navigates in the browser, Inertia intercepts the request, makes an XHR call to Laravel, receives the new page component and its data as JSON, and renders it client-side \u2014 without a full page reload.<\/p>\n
From the developer’s perspective:<\/p>\n
composer require inertiajs\/inertia-laravel\r\nnpm install @inertiajs\/react react react-dom\r\nnpm install --save-dev @vitejs\/plugin-react<\/code><\/pre>\n\/\/ vite.config.js\r\nimport { defineConfig } from 'vite';\r\nimport laravel from 'laravel-vite-plugin';\r\nimport react from '@vitejs\/plugin-react';\r\n\r\nexport default defineConfig({\r\n plugins: [\r\n laravel({ input: ['resources\/js\/app.jsx'] }),\r\n react(),\r\n ],\r\n});<\/code><\/pre>\n\/\/ resources\/views\/app.blade.php\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"utf-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n @viteReactRefresh\r\n @vite('resources\/js\/app.jsx')\r\n @inertiaHead\r\n<\/head>\r\n<body>\r\n @inertia\r\n<\/body>\r\n<\/html><\/code><\/pre>\n\/\/ resources\/js\/app.jsx\r\nimport { createInertiaApp } from '@inertiajs\/react';\r\nimport { createRoot } from 'react-dom\/client';\r\n\r\ncreateInertiaApp({\r\n \/\/ Async components \u2014 new in Inertia v2\r\n resolve: name => {\r\n const pages = import.meta.glob('.\/Pages\/**\/*.jsx');\r\n return pages[`.\/Pages\/${name}.jsx`]();\r\n },\r\n setup({ el, App, props }) {\r\n createRoot(el).render(<App {...props} \/>);\r\n },\r\n});<\/code><\/pre>\nStep 2 \u2014 Basic Controller and Page<\/h2>\n<?php\r\n\r\n\/\/ app\/Http\/Controllers\/DashboardController.php\r\nuse Inertia\\Inertia;\r\nuse Inertia\\Response;\r\n\r\nclass DashboardController extends Controller\r\n{\r\n public function index(): Response\r\n {\r\n return Inertia::render('Dashboard', [\r\n 'stats' => [\r\n 'projects' => Project::count(),\r\n 'tasks' => Task::where('status', 'pending')->count(),\r\n 'users' => User::count(),\r\n ],\r\n 'recentProjects' => Project::latest()->take(5)->get(),\r\n ]);\r\n }\r\n}<\/code><\/pre>\n\/\/ resources\/js\/Pages\/Dashboard.jsx\r\nimport { Head, Link } from '@inertiajs\/react';\r\nimport AppLayout from '@\/Layouts\/AppLayout';\r\n\r\nexport default function Dashboard({ stats, recentProjects }) {\r\n return (\r\n <AppLayout>\r\n <Head title=\"Dashboard\" \/>\r\n\r\n <div className=\"grid grid-cols-3 gap-6\">\r\n <div className=\"bg-white p-6 rounded-xl shadow\">\r\n <p className=\"text-3xl font-bold\">{stats.projects}<\/p>\r\n <p className=\"text-gray-500\">Projects<\/p>\r\n <\/div>\r\n <div className=\"bg-white p-6 rounded-xl shadow\">\r\n <p className=\"text-3xl font-bold\">{stats.tasks}<\/p>\r\n <p className=\"text-gray-500\">Pending Tasks<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div className=\"mt-8\">\r\n <h2 className=\"text-xl font-bold mb-4\">Recent Projects<\/h2>\r\n {recentProjects.map(project => (\r\n <Link key={project.id} href={`\/projects\/${project.id}`}>\r\n <div className=\"p-4 border rounded-lg mb-2\">\r\n {project.name}\r\n <\/div>\r\n <\/Link>\r\n ))}\r\n <\/div>\r\n <\/AppLayout>\r\n );\r\n}<\/code><\/pre>\nStep 3 \u2014 Deferred Props (New in v2)<\/h2>\n
Load expensive data after the page renders \u2014 users see the page immediately while heavy data loads in the background:<\/p>\n
<?php\r\n\r\n\/\/ Controller \u2014 defer expensive queries\r\nclass ProjectController extends Controller\r\n{\r\n public function show(Project $project): Response\r\n {\r\n return Inertia::render('Projects\/Show', [\r\n \/\/ Loads immediately\r\n 'project' => $project,\r\n\r\n \/\/ Loads after page renders (deferred)\r\n 'analytics' => Inertia::defer(fn() => [\r\n 'views' => $project->analytics()->count(),\r\n 'completions' => $project->tasks()->where('status', 'completed')->count(),\r\n 'timeline' => $project->activityLog()->take(30)->get(),\r\n ]),\r\n ]);\r\n }\r\n}<\/code><\/pre>\n\/\/ React component \u2014 handle deferred prop\r\nimport { Deferred } from '@inertiajs\/react';\r\n\r\nexport default function ProjectShow({ project, analytics }) {\r\n return (\r\n <div>\r\n <h1>{project.name}<\/h1>\r\n\r\n <Deferred data=\"analytics\" fallback={<div>Loading analytics...<\/div>}>\r\n <div className=\"grid grid-cols-3 gap-4\">\r\n <div>Views: {analytics?.views}<\/div>\r\n <div>Completed: {analytics?.completions}<\/div>\r\n <\/div>\r\n <\/Deferred>\r\n <\/div>\r\n );\r\n}<\/code><\/pre>\nStep 4 \u2014 Polling (New in v2)<\/h2>\n
Keep data fresh with automatic polling \u2014 no useEffect or setInterval needed:<\/p>\n
import { usePoll } from '@inertiajs\/react';\r\n\r\nexport default function TaskQueue({ pendingTasks }) {\r\n \/\/ Automatically refetch this page every 5 seconds\r\n usePoll(5000);\r\n\r\n return (\r\n <div>\r\n <h2>Pending Tasks ({pendingTasks.length})<\/h2>\r\n {pendingTasks.map(task => (\r\n <div key={task.id}>{task.title}<\/div>\r\n ))}\r\n <\/div>\r\n );\r\n}<\/code><\/pre>\nStep 5 \u2014 Infinite Scrolling (New in v2)<\/h2>\n<?php\r\n\r\n\/\/ Controller \u2014 return paginated data\r\nclass PostController extends Controller\r\n{\r\n public function index(): Response\r\n {\r\n return Inertia::render('Posts\/Index', [\r\n 'posts' => Post::latest()->paginate(20),\r\n ]);\r\n }\r\n}<\/code><\/pre>\n\/\/ React component \u2014 infinite scroll\r\nimport { useInfiniteScroll } from '@inertiajs\/react';\r\n\r\nexport default function PostsIndex({ posts }) {\r\n const { data, loadMore, hasMore, loading } = useInfiniteScroll(posts);\r\n\r\n return (\r\n <div>\r\n {data.map(post => (\r\n <div key={post.id} className=\"p-4 border-b\">\r\n <h3>{post.title}<\/h3>\r\n <p>{post.excerpt}<\/p>\r\n <\/div>\r\n ))}\r\n\r\n {hasMore && (\r\n <button onClick={loadMore} disabled={loading}>\r\n {loading ? 'Loading...' : 'Load More'}\r\n <\/button>\r\n )}\r\n <\/div>\r\n );\r\n}<\/code><\/pre>\nStep 6 \u2014 Forms with Inertia<\/h2>\nimport { useForm } from '@inertiajs\/react';\r\n\r\nexport default function CreateProject() {\r\n const { data, setData, post, processing, errors, reset } = useForm({\r\n name: '',\r\n description: '',\r\n status: 'active',\r\n });\r\n\r\n function handleSubmit(e) {\r\n e.preventDefault();\r\n post('\/projects', {\r\n onSuccess: () => reset(),\r\n });\r\n }\r\n\r\n return (\r\n <form onSubmit={handleSubmit}>\r\n <div>\r\n <label>Project Name<\/label>\r\n <input\r\n value={data.name}\r\n onChange={e => setData('name', e.target.value)}\r\n className={errors.name ? 'border-red-500' : ''}\r\n \/>\r\n {errors.name && <p className=\"text-red-500\">{errors.name}<\/p>}\r\n <\/div>\r\n\r\n <button type=\"submit\" disabled={processing}>\r\n {processing ? 'Creating...' : 'Create Project'}\r\n <\/button>\r\n <\/form>\r\n );\r\n}<\/code><\/pre>\nStep 7 \u2014 Prefetching (New in v2)<\/h2>\nimport { Link } from '@inertiajs\/react';\r\n\r\n\/\/ Prefetch on hover \u2014 page loads before user clicks\r\nexport default function ProjectList({ projects }) {\r\n return (\r\n <ul>\r\n {projects.map(project => (\r\n <li key={project.id}>\r\n <Link\r\n href={`\/projects\/${project.id}`}\r\n prefetch \/\/ Preloads on hover\r\n >\r\n {project.name}\r\n <\/Link>\r\n <\/li>\r\n ))}\r\n <\/ul>\r\n );\r\n}<\/code><\/pre>\nWhen to Use Inertia vs REST API<\/h2>\n
\n\n\nUse Inertia when<\/th>\n Use REST API when<\/th>\n<\/tr>\n<\/thead>\n \n\nSingle web application<\/td>\n Mobile app + web app sharing data<\/td>\n<\/tr>\n \nInternal tools and dashboards<\/td>\n Third-party integrations need the API<\/td>\n<\/tr>\n \nCMS, admin panels, SaaS apps<\/td>\n Public API for developers<\/td>\n<\/tr>\n \nSmall to medium team<\/td>\n Separate frontend and backend teams<\/td>\n<\/tr>\n \nFast initial delivery<\/td>\n Complex real-time features (WebSockets)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n