Membangun SPA Modern dengan Rasa Monolitik: Mengenal Laravel, Inertia.js, dan React

Di dunia pengembangan web, seringkali kita dihadapkan pada pilihan: membangun aplikasi server-rendered tradisional yang solid atau aplikasi Single-Page Application (SPA) yang modern dan responsif? Bagaimana jika Anda bisa mendapatkan yang terbaik dari kedua dunia tersebut? Inilah yang ditawarkan oleh kombinasi Laravel, Inertia.js, dan React.

Tumpukan teknologi ini memungkinkan Anda membangun aplikasi halaman tunggal yang kaya fitur dengan frontend React, namun dengan alur kerja pengembangan yang terasa seperti aplikasi monolitik klasik yang digerakkan oleh server.

Apa Itu Inertia.js?

Inertia.js bukanlah sebuah framework, melainkan sebuah "lem" atau jembatan penghubung antara backend Laravel dan frontend JavaScript modern (seperti React, Vue, atau Svelte). Tujuannya sederhana: memungkinkan Anda membuat SPA tanpa kerumitan membangun dan mengelola API REST atau GraphQL.

Secara tradisional, saat membangun SPA, backend Laravel Anda hanya akan berfungsi sebagai penyedia data melalui API. Frontend React kemudian akan mengambil data ini dan mengelola semua routing di sisi klien.

Inertia mengubah pendekatan ini. Dengan Inertia, routing tetap dikendalikan oleh Laravel, sama seperti aplikasi web biasa. Namun, alih-alih me-render tampilan Blade HTML secara penuh pada setiap permintaan, Laravel mengirimkan respons JSON yang berisi nama komponen JavaScript dan data (props) yang dibutuhkannya. Inertia di sisi klien kemudian secara dinamis memuat komponen React yang sesuai tanpa perlu memuat ulang seluruh halaman.

Komponen Utama Tumpukan Ini

Mari kita bedah peran masing-masing teknologi dalam arsitektur ini:

1. Laravel (Backend)

Sebagai tulang punggung aplikasi, Laravel bertanggung jawab atas semua logika inti:

Routing: Anda mendefinisikan rute web Anda di routes/web.php seperti biasa.
Controller: Controller mengambil data dari database atau sumber lain.
Autentikasi & Otorisasi: Sistem keamanan Laravel yang kuat tetap digunakan sepenuhnya.
Penyedia Data: Alih-alih mengembalikan view Blade, controller Anda akan menggunakan Inertia untuk me-render komponen React dengan props yang diperlukan.

Contoh di Controller Laravel:

PHP

use Inertia\Inertia;

class UserController extends Controller
{
    public function index()
    {
        $users = User::all();

        return Inertia::render('Users/Index', [
            'users' => $users,
        ]);
    }
}

Pada contoh di atas, alih-alih return view(...), kita menggunakan Inertia::render(...). Argumen pertama adalah nama komponen React (resources/js/Pages/Users/Index.jsx), dan yang kedua adalah data yang akan menjadi props untuk komponen tersebut.

2. Inertia.js (Jembatan)

Inertia adalah lapisan tipis yang menangani komunikasi. Di sisi server, ada adapter untuk Laravel. Di sisi klien, ada adapter untuk React. Saat pengguna mengklik sebuah tautan <Link href="/users">, Inertia mencegat klik tersebut dan membuat permintaan XHR (AJAX) ke Laravel. Laravel merespons dengan paket JSON Inertia, dan Inertia menukar komponen halaman saat ini dengan yang baru. Hasilnya adalah transisi halaman yang secepat kilat.

3. React (Frontend)

React bertanggung jawab untuk membangun antarmuka pengguna Anda. Anda membuat komponen-komponen React yang dapat digunakan kembali seperti biasa. Setiap "halaman" dalam aplikasi Anda pada dasarnya adalah sebuah komponen React tingkat atas yang menerima data dari controller Laravel sebagai props.

Contoh Komponen React (resources/js/Pages/Users/Index.jsx):

JavaScript

import React from 'react';
import { Head, Link } from '@inertiajs/react';

export default function Index({ users }) {
    return (
        <>
            <Head title="Users" />
            <div className="container">
                <h1 className="text-2xl font-bold">Daftar Pengguna</h1>
                <ul>
                    {users.map(user => (
                        <li key={user.id}>
                            {user.name} - 
                            <Link href={`/users/${user.id}`}>Lihat Profil</Link>
                        </li>
                    ))}
                </ul>
            </div>
        </>
    );
}

Mengapa Menggunakan Stack Laravel + Inertia + React?

Pengalaman Pengembang yang Luar Biasa: Anda mendapatkan kekuatan Laravel di backend dan ekosistem React yang kaya di frontend, sambil mempertahankan alur kerja pengembangan yang terpadu dan sederhana.
Aplikasi Monolitik, Rasa SPA: Anda tidak perlu memisahkan codebase menjadi dua (backend API dan frontend SPA). Semuanya ada dalam satu proyek Laravel, membuat deployment dan pengelolaan lebih mudah.
Tidak Perlu Membangun API: Ini adalah keuntungan terbesar. Anda tidak lagi menghabiskan waktu untuk merancang, membangun, dan mendokumentasikan API. Controller Anda langsung memberikan data ke komponen frontend.
Performa Tinggi: Karena hanya data JSON yang ditransfer antar halaman (bukan seluruh aset HTML, CSS, dan JS), navigasi terasa sangat cepat dan responsif bagi pengguna.
SEO-Friendly: Inertia mendukung Server-Side Rendering (SSR) secara out-of-the-box, yang sangat penting untuk optimisasi mesin pencari (SEO).

Kesimpulan

Kombinasi Laravel, Inertia.js, dan React menawarkan pendekatan yang elegan untuk membangun aplikasi web modern. Ini adalah solusi sempurna bagi tim atau pengembang yang mencintai produktivitas Laravel tetapi menginginkan antarmuka pengguna yang dinamis dan reaktif yang disediakan oleh React. Dengan menghilangkan kebutuhan akan API perantara, stack ini menyederhanakan pengembangan secara signifikan sambil memberikan hasil akhir yang canggih dan berperforma tinggi.