Pernah nggak kamu merasa bingung ketika harus memilih teknologi untuk membangun aplikasi web? Kalau pakai Blade template bawaan Laravel memang sederhana dan cepat, tapi tampilannya sering terasa kaku dan kurang interaktif. Sementara kalau langsung menggunakan React atau Vue sebagai full SPA, tampilannya memang modern, tetapi setup-nya bisa bikin pusing. Kita harus menyiapkan API terpisah, mengurus fetch data, CORS, hingga autentikasi yang jadi berlapis-lapis. Di titik ini banyak developer merasa serba salah, antara ingin aplikasi tetap simpel atau tampil canggih.
Untungnya ada Inertia.js, sebuah pendekatan yang unik karena tidak benar-benar framework baru, melainkan jembatan yang menyatukan Laravel di sisi backend dengan React atau Vue di sisi frontend. Dengan Inertia, kita tidak perlu lagi menulis API REST atau GraphQL hanya untuk membuat antarmuka modern. Semua logika server tetap berjalan dengan gaya Laravel yang familiar, sementara bagian frontend bisa dikembangkan dengan teknologi modern layaknya SPA. Hasilnya, kita bisa membangun aplikasi monolith Laravel yang rasanya seperti aplikasi React penuh, tanpa harus melewati proses rumit.
Konsep Dasar Inertia.js
Intinya Inertia.js berfungsi kayak “lem” (glue) antara backend sama frontend. Jadi dia bukan framework baru, bukan juga replacement untuk Laravel atau React, tapi lebih kayak penghubung.
Kalau dibandingin sama API tradisional kayak REST atau GraphQL, biasanya backend bakal balikin data JSON, lalu frontend nge-render data itu. Dengan Inertia, kamu nggak perlu proses itu. Backend cukup balikin komponen + props, dan langsung di-render di browser. Jadi proses request → response → rendering tetap ada, tapi nggak lagi dalam bentuk API JSON mentah.
Hal ini bikin workflow lebih simpel, apalagi buat pemula yang sering bingung harus mulai dari mana. Kamu nggak perlu mikirin data serialization, parsing JSON, atau bikin banyak endpoint REST.
Kelebihan dan Kekurangan Inertia.js
Kalau ngomong soal kelebihan, ada beberapa hal yang bikin Inertia cukup menarik. Pertama, kamu nggak perlu bikin API terpisah. Jadi lebih hemat waktu dan tenaga. Kedua, kamu bisa tetap pakai framework favorit kayak Vue, React, atau Svelte. Ketiga, routing masih pakai server-side framework, contohnya Laravel, jadi developer backend juga tetap nyaman.
Tapi tentu aja ada kekurangan. Pertama, Inertia masih bergantung pada ekosistem backend tertentu kayak Laravel, Rails, atau Django. Jadi nggak bisa asal dipakai di semua backend. Kedua, Inertia belum sepopuler Next.js atau Nuxt.js, jadi komunitasnya lebih kecil, kadang cari solusi masalah bisa agak susah.
Meskipun begitu, kalau kebutuhanmu bikin aplikasi modern tapi nggak mau ribet API, Inertia tetap jadi pilihan yang solid.
Arsitektur dan Alur Kerja Inertia.js
Alurnya simpel: user akses halaman → frontend kirim request → backend balikin response berupa komponen + data → browser render halaman. Jadi setiap kali kamu navigasi ke link, sebenarnya request tetap dikirim ke server, tapi response yang balik bukan HTML penuh, melainkan data komponen yang langsung dipasang di frontend.
Server jadi tetep pegang kendali routing, tapi render view diganti oleh React atau Vue. Bedanya, semua proses itu berlangsung smooth tanpa reload penuh. Jadi kesannya tetap SPA.
Persiapan & Instalasi
Cara paling gampang cobain Inertia adalah pakai Laravel Breeze karena dia sudah nyediain template siap pakai dengan React atau Vue. Misalnya kamu pakai React:
- Install Laravel:
composer create-project laravel/laravel reactinertia - Install Breeze:
composer require laravel/breeze - Jalankan:
php artisan breeze:install react - Jalankan migrasi:
php artisan migrate - Lalu build asset dengan
npm install && npm run dev
Setelah itu aplikasi sudah siap jalan dengan setup Inertia bawaan. Kalau kamu pakai framework lain, misalnya Rails atau Django, instalasinya mirip, tapi di artikel ini kita fokus di Laravel Breeze + React biar lebih familiar.
Membuat Halaman Pertama dengan Inertia.js
Misalnya kita mau bikin halaman Hello World. Pertama bikin route di web.php:
Route::get('/hello', function () {
return Inertia::render('Hello', [
'name' => 'World'
]);
});Lalu di resources/js/Pages/Hello.jsx, buat komponen:
export default function Hello({ name }) {
return <h1>Hello {name}!</h1>
}Kalau kamu buka /hello, hasilnya langsung muncul tulisan “Hello World!” tanpa perlu bikin API atau fetch data manual. Jadi data dari controller langsung nyampe ke komponen React sebagai props. Simpel banget kan, nggak ribet sama sekali.
Navigasi Halaman dan Link Inertia
Navigasi di Inertia nggak pakai anchor biasa, tapi pakai Link dari @inertiajs/react. Bedanya, kalau kamu klik link biasa, browser reload penuh. Sedangkan kalau pakai Link, transisi halaman lebih halus karena cuma data aja yang dimuat ulang.
Contoh:
import { Link } from '@inertiajs/react'
<Link href="/hello">Ke halaman Hello</Link>Dengan cara ini, halaman berubah tanpa kehilangan state global dan nggak ada reload penuh. Jadi user experience lebih mulus, mirip SPA pada umumnya.
Form Handling dengan Inertia.js
Buat form, kita bisa pakai useForm hook dari Inertia. Misalnya kita punya form login:
const { data, setData, post, errors } = useForm({
email: '',
password: ''
})
const submit = (e) => {
e.preventDefault()
post('/login')
}Kalau validasi backend gagal, error otomatis dikirim balik dan bisa langsung ditampilkan di frontend. Jadi kita nggak perlu bikin error handler manual yang panjang. Contohnya error email bisa ditampilkan dengan {errors.email}.
Hal ini bikin form handling jadi lebih natural dan sinkron dengan Laravel validation.
Best Practices
Supaya project tetap rapih, ada beberapa tips: •
- Atur struktur folder dengan jelas, misalnya semua komponen ada di
resources/js/Componentsdan halaman diresources/js/Pages. • - Gunakan props hanya untuk data yang memang dipakai, jangan lempar semuanya biar nggak berat. •
- Kalau aplikasi makin besar, manfaatkan fitur partial reload supaya cuma data tertentu yang di-fetch ulang, bukan semuanya. •
- Usahain konsisten antara backend dan frontend biar gampang maintain.
Hal-hal kecil kayak gini bakal ngaruh besar ke maintainability project ke depannya.
Studi Kasus Mini Project
Sekarang kita coba mini project CRUD sederhana pakai Laravel Breeze + React. Misalnya bikin fitur daftar tugas (Todo List).
Buat project baru:
laravel new todo-breeze
cd todo-breezeInstall Breeze dengan React:
composer require laravel/breeze --dev
php artisan breeze:install react
npm install && npm run dev
php artisan migrateJalankan server:
php artisan serveSekarang kalau dibuka di browser http://127.0.0.1:8000, sudah ada login/register bawaan Breeze.
Membuat Model dan Migration Todo
Kita akan bikin tabel todos untuk menyimpan daftar tugas.
php artisan make:model Todo -mKemudian buka app/models/Todo.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Todo extends Model
{
protected $fillable = [
'title',
'is_done',
];
}Di file database/migrations/xxxx_create_todos_table.php:
Schema::create('todos', function (Blueprint $table) {
$table->id();
$table->string('title'); // judul tugas
$table->boolean('is_done')->default(false); // status selesai atau belum
$table->timestamps();
});Jalankan migrate:
php artisan migrateRouting Todo
Buka routes/web.php:
Route::controller(TodoController::class)->middleware(['auth', 'verified'])->group(function () {
Route::get('todos', 'index')->name('todos.index');
Route::post('todos/create', 'store')->name('todos.store');
Route::put('todos/edit/{todo}', 'update')->name('todos.update');
Route::delete('todos/delete/{todo}', 'destroy')->name('todos.destroy');
});Controller Todo
Buat controller:
php artisan make:controller TodoControllerIsi app/Http/Controllers/TodoController.php:
<?php
namespace App\Http\Controllers;
use App\Models\Todo;
use Illuminate\Http\Request;
use Inertia\Inertia;
class TodoController extends Controller
{
public function index()
{
$todos = Todo::latest()->get();
return Inertia::render('Todos/Index', [
'todos' => $todos
]);
}
public function store(Request $request)
{
$request->validate([
'title' => 'required|string|max:255',
]);
Todo::create([
'title' => $request->title,
]);
return to_route('todos.index');
}
public function update(Request $request, Todo $todo)
{
$todo->update([
'is_done' => !$todo->is_done
]);
return to_route('todos.index');
}
public function destroy(Todo $todo)
{
$todo->delete();
return to_route('todos.index');
}
}Membuat Halaman React Todo
Buat folder resources/js/Pages/Todos/Index.jsx.
import { useForm, router } from '@inertiajs/react';
export default function Index({ todos }) {
const { data, setData, post, reset } = useForm({ title: '' });
// Create todo
const submit = (e) => {
e.preventDefault();
post(route('todos.store'), {
onSuccess: () => reset()
});
};
// Toggle selesai/belum
const toggleTodo = (id) => {
router.put(route('todos.update', id));
};
// Hapus todo
const deleteTodo = (id) => {
router.delete(route('todos.destroy', id));
};
return (
<div className="max-w-lg mx-auto mt-10">
<h1 className="text-2xl font-bold mb-4">Todo List</h1>
{/* Form tambah todo */}
<form onSubmit={submit} className="flex gap-2 mb-4">
<input
type="text"
value={data.title}
onChange={(e) => setData('title', e.target.value)}
className="border p-2 flex-1"
placeholder="Tambah tugas..."
/>
<button
type="submit"
className="bg-blue-500 text-white px-4 py-2 rounded"
>
Tambah
</button>
</form>
{/* List todo */}
<ul className="space-y-2">
{todos.map((todo) => (
<li
key={todo.id}
className="flex justify-between items-center border p-2 rounded"
>
<span
className={todo.is_done ? 'line-through text-gray-500' : ''}
>
{todo.title}
</span>
<div className="flex gap-2">
<button
onClick={() => toggleTodo(todo.id)}
className="text-green-600"
>
{todo.is_done ? 'Undo' : 'Done'}
</button>
<button
onClick={() => deleteTodo(todo.id)}
className="text-red-600"
>
Hapus
</button>
</div>
</li>
))}
</ul>
</div>
);
}Testing
- Jangan lupa install dulu library sweet alert2 nya dengan menjalankan perintah
npm install sweetalert2 - Jalankan perintah
npm run builddi terminal projek dan lakukan uji Coba Todo List - Login dulu dengan user yang sudah register.
- Akses
http://127.0.0.1:8000/todos. - Tambahkan todo, tandai selesai, atau hapus.
Inertia.js cocok banget buat kamu yang pengen bikin aplikasi modern tapi males ribet sama API. Kalau kebutuhanmu cuma aplikasi monolith dengan fitur interaktif, ini adalah solusi yang hemat waktu. Tapi kalau project besar dengan tim frontend-backend terpisah, mungkin REST atau GraphQL masih lebih pas.
Alternatif lain yang bisa dipertimbangin adalah Next.js, Nuxt.js, atau Livewire. Tapi buat pemula, Inertia jelas lebih gampang dipahami.
Kalau kamu sudah berhasil bikin mini project Todo List ini, selamat, itu artinya kamu sudah paham dasar-dasar Laravel Breeze + Inertia.js + React. Tapi tentu aja, masih banyak hal menarik yang bisa kamu eksplor. Buat kamu yang mau belajar lebih dalam sekaligus bikin project nyata, saya sudah siapkan beberapa kelas premium yang untuk level up skill:
- CUAN: Financial Planner dengan Laravel, ReactJS dan InertiaJS Belajar membangun aplikasi keuangan pribadi (financial planner) yang interaktif dan modern, cocok banget buat studi kasus real-life.
- Sistem Informasi Akademik Universitas dengan Laravel dan ReactJS
Studi kasus pembuatan sistem akademik kampus, lengkap dengan manajemen mahasiswa, dosen, mata kuliah, dan jadwal. - Full Stack Developer: Website Perpustakaan dengan Laravel 11, Inertia, dan React
Cocok buat latihan CRUD yang lebih kompleks, termasuk fitur pencarian, peminjaman, dan laporan. - Bangun Aplikasi Laravel Modern Menggunakan React InertiaJS
Kelas general yang bahas best practice membangun aplikasi modern berbasis Laravel + React dengan arsitektur yang rapi.
Dengan mengikuti kelas-kelas ini, kamu nggak cuma belajar teori, tapi juga langsung praktek bikin aplikasi nyata yang bisa kamu pakai sebagai portofolio.
