Arsitektur Laravel + Inertia + React

Arsitektur Laravel + Inertia.js + React

Sebelum mulai coding, penting untuk memahami bagaimana ketiga teknologi ini bekerja bersama. Kombinasi Laravel + Inertia.js + React memberikan pengalaman development yang unik - seperti membangun SPA modern tapi dengan kesederhanaan aplikasi monolith tradisional.

Bayangkan Anda sedang membangun sebuah restoran modern. Laravel adalah dapur tempat semua makanan (data) dimasak dan disiapkan. React adalah ruang makan tempat tamu (user) menikmati makanan dalam suasana yang nyaman. Inertia.js adalah pelayan yang mengantar makanan dari dapur ke meja tamu dengan efisien.

Tanpa pelayan (Inertia), Anda harus membuat sistem antar sendiri - seperti membuat REST API dimana dapur dan ruang makan berkomunikasi melalui nomor pesanan. Dengan pelayan (Inertia), komunikasi menjadi langsung dan natural - dapur tahu persis apa yang dimau tamu, dan tamu mendapat makanan tepat seperti yang dipesan.

Di lesson ini, kita akan mempelajari arsitektur ini secara mendalam agar Anda memiliki mental model yang jelas sebelum mulai menulis kode. Pemahaman arsitektur akan membantu Anda debugging lebih cepat dan membuat keputusan teknis yang tepat.

Perbandingan 3 Arsitektur

Ada tiga cara umum membangun aplikasi web modern, masing-masing dengan kelebihan dan kekurangannya. Memahami perbedaan ini akan membantu Anda memilih arsitektur yang tepat untuk setiap project.

Traditional MPA (Multi-Page Application) adalah cara klasik dimana setiap navigasi memuat halaman baru dari server - seperti buku yang harus membuka halaman baru setiap kali baca bab berikutnya. API + SPA adalah arsitektur modern dimana frontend dan backend terpisah total - seperti restoran dengan dapur di gedung berbeda. Inertia menggabungkan keduanya - satu gedung tapi dengan pengalaman restoran modern.

Tabel berikut membandingkan ketiga arsitektur dari berbagai aspek. Perhatikan bagaimana Inertia mengambil yang terbaik dari kedua dunia - routing server-side yang sederhana seperti MPA, tapi dengan pengalaman SPA tanpa page reload:

Bagaimana Inertia Bekerja?

Untuk memahami Inertia, kita perlu membedakan dua skenario: kunjungan pertama (initial page load) dan navigasi berikutnya (subsequent navigation). Perbedaan cara penanganan kedua skenario inilah yang membuat Inertia unik dan performant.

Bayangkan seperti menonton film di bioskop. Saat pertama kali masuk (initial load), Anda perlu beli tiket, popcorn, cari kursi, tunggu iklan selesai - prosesnya lengkap. Tapi kalau mau nonton film kedua (subsequent navigation), Anda sudah di dalam bioskop - cukup pindah studio saja tanpa perlu keluar dan masuk lagi.

Berikut adalah visualisasi step-by-step bagaimana Inertia memproses request di kedua skenario:

1. Initial Page Load (Kunjungan Pertama)

2. Subsequent Navigation (Navigasi Berikutnya)

Contoh Kode (Preview)

Preview: Controller Laravel dengan Inertia

Dalam arsitektur Laravel + Inertia + React, Controller berperan sebagai penghubung antara database dan frontend. Berbeda dengan API tradisional yang mengembalikan JSON, Controller dengan Inertia mengembalikan response khusus yang berisi nama component React dan data (props) yang akan dikirim ke component tersebut.

Berikut adalah contoh bagaimana Controller Laravel mengirim data ke React component menggunakan Inertia::render(). Method ini menerima dua parameter: nama component React (tanpa ekstensi .tsx) dan array data yang akan menjadi props di React.

<?php

namespace App\Http\Controllers;

use App\Models\Employee;
use Inertia\Inertia;

class EmployeeController extends Controller
{
    /**
     * Menampilkan daftar karyawan dengan pagination
     * 
     * Alur:
     * 1. Query Employee dengan relasi department dan position
     * 2. Paginate hasil query (10 per halaman)
     * 3. Kirim ke React via Inertia::render()
     */
    public function index()
    {
        // ========== QUERY DATA ==========
        // Eager load relasi untuk menghindari N+1 problem
        $employees = Employee::with(['department', 'position'])
            ->paginate(10);
        
        // ========== KIRIM KE REACT ==========
        // Props ini akan tersedia di React component
        return Inertia::render('Employees/Index', [
            'employees' => $employees,  // Data karyawan dengan pagination
            'filters' => request()->only(['search', 'department']),
        ]);
    }
}

Kode di atas menunjukkan pola dasar Controller dengan Inertia. Pertama, kita menggunakan Employee::with(['department', 'position']) untuk eager loading relasi - ini mencegah N+1 query problem yang bisa memperlambat aplikasi. Kedua, paginate(10) membagi hasil query menjadi halaman-halaman berisi 10 data.

Yang membuat Inertia unik adalah method Inertia::render(). Parameter pertama 'Employees/Index' menunjuk ke file resources/js/Pages/Employees/Index.tsx. Parameter kedua adalah array associative yang akan menjadi props di React component. Dengan cara ini, data dari Laravel langsung tersedia di React tanpa perlu membuat API terpisah.

Preview: React Page Menerima Props

Di sisi React, kita menerima data yang dikirim Controller sebagai props. Dengan TypeScript, kita mendefinisikan interface untuk memastikan type safety - artinya TypeScript akan memberikan error di development jika kita mengakses property yang tidak ada atau dengan type yang salah.

Inertia.js secara otomatis meng-inject props dari Controller ke component React. Kita tidak perlu melakukan fetch atau axios call - data sudah tersedia saat component di-render.

import { Head } from '@inertiajs/react';

/**
 * Interface untuk type Employee
 * Mendefinisikan struktur data karyawan dari backend
 */
interface Employee {
    id: number;
    full_name: string;
    department: { name: string };
}

/**
 * Interface untuk Props component
 * Harus sesuai dengan data yang dikirim dari Controller
 */
interface Props {
    employees: {
        data: Employee[];  // Array karyawan dari paginate()
    };
    filters: {
        search?: string;  // Filter search dari URL query
    };
}

/**
 * Page Component: Employee Index
 * Menampilkan daftar karyawan dalam format list
 * 
 * Props dari Controller langsung tersedia sebagai parameter!
 */
export default function Index({ employees, filters }: Props) {
    return (
        <>
            {/* Head untuk set title halaman */}
            <Head title="Employees" />
            
            {/* Container utama */}
            <div className="p-6">
                {/* Loop data karyawan */}
                {employees.data.map(emp => (
                    <div key={emp.id}>
                        {emp.full_name} - {emp.department.name}
                    </div>
                ))}
            </div>
        </>
    );
}

Pada kode di atas, perhatikan bagaimana kita mendefinisikan interface Employee dan Props. Interface ini berfungsi sebagai "kontrak" antara backend dan frontend - jika Controller mengirim data dengan struktur berbeda, TypeScript akan memberikan warning di IDE. Ini sangat membantu mencegah bug runtime.

Function component Index menerima { employees, filters } sebagai destructured props. Data ini langsung dari Controller tanpa perlu API call. Component Head dari Inertia digunakan untuk mengatur title halaman secara dinamis. Kemudian kita me-loop employees.data (perhatikan: data pagination Laravel ada di property data) untuk menampilkan setiap karyawan.

Shared Data (Global Props)

Selain props per-halaman, Inertia juga menyediakan mekanisme "shared data" - data yang tersedia di SEMUA halaman React. Ini sangat berguna untuk data yang sering diakses seperti informasi user yang login, flash messages, atau konfigurasi aplikasi.

Shared data dikonfigurasi di middleware HandleInertiaRequests. Di sini kita bisa menambahkan data apapun yang akan tersedia di semua component React melalui usePage() hook atau $page props.

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request): array
    {
        return [
            ...parent::share($request),
            
            // Data ini tersedia di SEMUA React pages
            'auth' => [
                'user' => $request->user(),
            ],
            'flash' => [
                'success' => fn () => $request->session()->get('success'),
                'error' => fn () => $request->session()->get('error'),
            ],
        ];
    }
}

Kode di atas menunjukkan method share() yang mengembalikan array data yang akan tersedia di semua halaman. Key auth berisi informasi user yang sedang login - ini sangat berguna untuk menampilkan nama user di navbar atau mengecek permission. Key flash berisi pesan success/error yang akan ditampilkan sebagai notifikasi toast setelah melakukan aksi.

Perhatikan penggunaan closure fn () => untuk flash messages. Ini adalah optimasi - Inertia hanya akan memanggil closure saat data benar-benar dibutuhkan. Jika halaman tidak menggunakan flash data, closure tidak akan dieksekusi, menghemat resources.

Keuntungan Inertia untuk HRIS

Untuk aplikasi internal seperti HRIS, Inertia memberikan banyak keuntungan dibandingkan arsitektur lain. Berikut adalah beberapa keuntungan utama yang akan Anda rasakan selama development dan maintenance aplikasi.

Bayangkan seperti memilih kendaraan untuk perjalanan. Untuk perjalanan dalam kota (aplikasi internal), motor atau mobil lebih efisien daripada pesawat (microservices). Inertia adalah kendaraan yang tepat untuk aplikasi enterprise monolith yang tidak membutuhkan akses dari mobile app atau third-party.

Keuntungan-keuntungan ini menjadi sangat terasa saat tim Anda kecil atau saat Anda bekerja solo - tidak perlu maintain dua codebase atau setup infrastructure kompleks:

Kapan TIDAK Menggunakan Inertia?

Meskipun Inertia sangat powerful, ada situasi di mana arsitektur lain lebih cocok. Penting untuk memahami batasan ini agar tidak salah pilih teknologi.

Link Dokumentasi Resmi

Untuk referensi lebih lanjut, berikut dokumentasi resmi yang bisa Anda bookmark:

Checkpoint - Review Pemahaman

Sebelum melanjutkan ke lesson berikutnya, pastikan Anda sudah memahami konsep-konsep dasar arsitektur ini. Coba jawab pertanyaan berikut:

Ringkasan