Inertia.js 完全指南：Laravel 與 React 的最佳橋樑

什麼是 Inertia.js？

最近在研究 Laravel 和 React 的整合方案，Inertia.js 是目前我覺得最優雅的選擇。它讓你可以用傳統的伺服器端路由，但擁有 SPA 的使用體驗。

簡單來說：不需要寫 API，就能讓 Laravel 把資料傳給 React。

安裝與設定

後端（Laravel）

composer require inertiajs/inertia-laravel
php artisan inertia:middleware

在 app/Http/Kernel.php 加入 Middleware：

'web' => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,
],

前端（React）

npm install @inertiajs/react

設定進入點：

// resources/js/app.jsx
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} />);
  },
});

核心概念

從 Controller 傳資料給 React

// app/Http/Controllers/ProductController.php
public function index()
{
    return Inertia::render('Products/Index', [
        'products' => Product::latest()->paginate(10),
    ]);
}

React 端直接透過 props 接收：

// resources/js/Pages/Products/Index.jsx
export default function Index({ products }) {
  return (
    <div>
      {products.data.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
}

表單處理

Inertia 提供了 useForm hook，處理表單超方便：

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

function CreateProduct() {
  const { data, setData, post, processing, errors } = useForm({
    name: '',
    price: '',
  });

  function handleSubmit(e) {
    e.preventDefault();
    post('/products');
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={data.name}
        onChange={e => setData('name', e.target.value)}
      />
      {errors.name && <span>{errors.name}</span>}
      <button disabled={processing}>送出</button>
    </form>
  );
}

頁面間導航

使用 Link 元件取代 <a> 標籤，實現無重新載入的頁面切換：

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

<Link href="/products" className="text-blue-600">
  查看所有產品
</Link>

共享資料（Shared Data）

在 HandleInertiaRequests Middleware 中設定全域共享資料：

public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user(),
        ],
        'flash' => [
            'message' => fn () => $request->session()->get('message'),
        ],
    ]);
}

搭配其他技術

Inertia.js 和 Tailwind CSS 搭配使用效果極佳。後續也可以考慮加入 TypeScript 來提升型別安全性。

小結

目前覺得 Inertia.js 最大的優勢是降低了全端開發的複雜度。你不需要維護一套 API，不需要處理 token 認證，也不需要管理前後端兩組路由。對於中小型專案和接案來說，這是非常實際的效率提升。

如果你需要類似的系統，歡迎聯繫討論。