inertia
Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
Top Related Projects
A full-stack framework for Laravel that takes the pain out of building dynamic UIs.
The speed of a single-page web application without having to write any JavaScript
A rugged, minimal framework for composing JavaScript behavior in your markup.
A declarative, HTML-based language that makes building web apps fun
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
Quick Overview
Inertia.js is a modern approach to building classic server-driven web applications. It allows you to create fully client-side rendered, single-page apps without the complexity of modern SPAs. Inertia works with existing server-side frameworks and provides a seamless way to build full-stack applications.
Pros
- Enables SPA-like experiences without abandoning server-side routing and controllers
- Works with existing server-side frameworks (Laravel, Rails, etc.) and client-side frameworks (Vue, React, Svelte)
- Simplifies the development process by eliminating the need for a separate API
- Provides a smooth transition path for traditional server-rendered apps to modern client-side rendering
Cons
- Learning curve for developers accustomed to traditional server-rendered applications
- Limited SEO capabilities compared to server-side rendering (though this can be mitigated with server-side rendering options)
- Requires changes to both frontend and backend code, which may not be suitable for all projects
- Performance can be affected if not implemented correctly, especially for initial page loads
Code Examples
- Basic Inertia component (Vue.js):
<template>
<layout>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</layout>
</template>
<script>
import Layout from './Layout'
export default {
components: {
Layout,
},
props: {
title: String,
content: String,
},
}
</script>
- Inertia link component (React):
import { Link } from '@inertiajs/react'
export default function Navigation() {
return (
<nav>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/contact">Contact</Link>
</nav>
)
}
- Server-side controller (Laravel):
use Inertia\Inertia;
class UserController extends Controller
{
public function index()
{
return Inertia::render('Users/Index', [
'users' => User::all(),
]);
}
}
Getting Started
To get started with Inertia.js, follow these steps:
-
Install Inertia adapter for your server-side framework (e.g., for Laravel):
composer require inertiajs/inertia-laravel
-
Install Inertia client-side adapter and your preferred frontend framework:
npm install @inertiajs/react react react-dom
-
Set up your main app component (e.g., in React):
import { createInertiaApp } from '@inertiajs/react' import { createRoot } from 'react-dom/client' createInertiaApp({ resolve: name => { const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true }) return pages[`./Pages/${name}.jsx`] }, setup({ el, App, props }) { createRoot(el).render(<App {...props} />) }, })
-
Create your first Inertia page component and start building your app!
Competitor Comparisons
A full-stack framework for Laravel that takes the pain out of building dynamic UIs.
Pros of Livewire
- Full-stack Laravel framework, allowing for easier integration with existing Laravel projects
- Real-time updates without page reloads, providing a smoother user experience
- Simpler learning curve for developers already familiar with Laravel and PHP
Cons of Livewire
- Limited to Laravel ecosystem, reducing flexibility for non-Laravel projects
- Potentially higher server load due to more frequent server-side rendering
- Less control over client-side JavaScript compared to Inertia.js
Code Comparison
Livewire component example:
class SearchUsers extends Component
{
public $search = '';
public function render()
{
return view('livewire.search-users', [
'users' => User::where('name', 'like', "%{$this->search}%")->get(),
]);
}
}
Inertia.js component example:
<template>
<div>
<input v-model="search" type="text" placeholder="Search users...">
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return { search: '', users: [] }
},
watch: {
search() {
this.$inertia.get('/users', { search: this.search }, { preserveState: true })
}
}
}
</script>
The speed of a single-page web application without having to write any JavaScript
Pros of Turbo
- Native HTML-based approach, allowing for easier integration with existing server-side frameworks
- Built-in caching mechanism for improved performance
- Supports progressive enhancement, making it more accessible for users without JavaScript
Cons of Turbo
- Requires more server-side rendering, potentially increasing server load
- Less control over client-side state management compared to Inertia
- May require more complex setup for single-page application-like experiences
Code Comparison
Turbo (HTML-based):
<turbo-frame id="messages">
<h2>Messages</h2>
<ul>
<li>Message 1</li>
<li>Message 2</li>
</ul>
</turbo-frame>
Inertia (JavaScript-based):
import { Inertia } from '@inertiajs/inertia'
Inertia.visit('/messages', {
preserveState: true,
preserveScroll: true,
})
Turbo focuses on enhancing traditional HTML-based navigation, while Inertia provides a more JavaScript-centric approach to building single-page applications. Turbo excels in progressive enhancement and seamless integration with server-side frameworks, whereas Inertia offers tighter control over client-side state and behavior. The choice between the two depends on project requirements, existing infrastructure, and development team preferences.
A rugged, minimal framework for composing JavaScript behavior in your markup.
Pros of Alpine
- Lightweight and minimal, with a small learning curve
- Works well with existing server-side rendered applications
- Can be easily integrated into existing projects without major refactoring
Cons of Alpine
- Limited to DOM manipulation and basic interactivity
- Lacks built-in routing capabilities
- Not suitable for complex, data-heavy single-page applications
Code Comparison
Alpine:
<div x-data="{ open: false }">
<button @click="open = true">Open Modal</button>
<div x-show="open">Modal Content</div>
</div>
Inertia:
import { Inertia } from '@inertiajs/inertia'
Inertia.visit('/users', {
method: 'post',
data: { name: 'John' }
})
Alpine focuses on enhancing HTML with minimal JavaScript, while Inertia provides a more robust solution for building single-page applications with server-side routing. Alpine is better suited for adding interactivity to traditional server-rendered pages, whereas Inertia excels in creating modern, JavaScript-driven applications with seamless navigation and state management.
Alpine's simplicity makes it ideal for small to medium-sized projects or enhancing existing applications. Inertia, on the other hand, offers a more comprehensive solution for building full-fledged single-page applications with server-side rendering capabilities, making it more suitable for larger, more complex projects.
A declarative, HTML-based language that makes building web apps fun
Pros of Marko
- Faster rendering performance due to its compile-time optimizations
- Built-in support for server-side rendering and isomorphic applications
- More flexible templating syntax with both concise and HTML-like options
Cons of Marko
- Steeper learning curve, especially for developers familiar with traditional JavaScript frameworks
- Smaller community and ecosystem compared to more mainstream frameworks
- Less suitable for integrating with existing server-side frameworks
Code Comparison
Marko:
<ul>
<for|item| of=items>
<li>${item}</li>
</for>
</ul>
Inertia:
<ul>
{items.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
Summary
Marko is a powerful UI library with excellent performance and built-in server-side rendering capabilities. It offers a unique templating syntax and compile-time optimizations. However, it may have a steeper learning curve and a smaller ecosystem compared to Inertia.
Inertia, on the other hand, focuses on creating modern single-page applications with server-side routing. It's easier to integrate with existing server-side frameworks and has a more familiar syntax for developers coming from popular JavaScript frameworks. However, it may not offer the same level of performance optimizations as Marko.
Choose Marko for high-performance, isomorphic applications, especially when starting a new project. Opt for Inertia when integrating with existing server-side frameworks or when prioritizing ease of adoption for your development team.
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
Pros of Preact
- Lightweight and fast: Preact is a 3KB alternative to React with the same modern API
- Compatible with React ecosystem: Can use most React libraries and tools
- Efficient rendering: Uses a virtual DOM for optimal performance
Cons of Preact
- Smaller community: Less support and fewer resources compared to Inertia
- Limited built-in features: Requires additional libraries for routing and state management
- Learning curve: Developers familiar with React may need to adapt to Preact's differences
Code Comparison
Preact:
import { h, render } from 'preact';
const App = () => <h1>Hello, World!</h1>;
render(<App />, document.body);
Inertia:
use Inertia\Inertia;
return Inertia::render('Home', [
'title' => 'Hello, World!'
]);
While Preact focuses on lightweight client-side rendering, Inertia bridges server-side and client-side, allowing for a more traditional server-driven approach with modern JavaScript frameworks. Preact excels in performance and size, making it suitable for lightweight applications, while Inertia provides a seamless integration between backend and frontend, simplifying the development of full-stack applications.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers. Find full documentation at inertiajs.com.
Contributing
Thank you for considering contributing to Inertia! You can read the contribution guide here.
Code of Conduct
In order to ensure that the Laravel community is welcoming to all, please review and abide by the Code of Conduct.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
License
Inertia is open-sourced software licensed under the MIT license.
Top Related Projects
A full-stack framework for Laravel that takes the pain out of building dynamic UIs.
The speed of a single-page web application without having to write any JavaScript
A rugged, minimal framework for composing JavaScript behavior in your markup.
A declarative, HTML-based language that makes building web apps fun
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot