前後端分離還是大一統？Laravel + Vue / React 整合全攻略，選對路

身為一個每天都在跟程式碼打交道的工程師，我最常被問到的問題之一，就是：「Eric，我們公司想做一個互動性很高的網站，聽說 Laravel 很穩，前端用 Vue 或 React 很潮，那這兩個到底該怎麼兜起來？是該走純 API 的前後端分離，還是有其他更酷的做法？」 問得好！這問題簡直是現代 Web 開發的「天問」。選對了架構，開發起來像在高速公路上開跑車；選錯了，那可能就像在尖峰時刻的市區裡開著卡車，動彈不得。今天，我就來跟大家聊聊 Laravel + Vue / React 整合 的各種門派與心法，從概念到實戰，一次幫你理清思路。

為什麼要自找麻煩？Laravel + 現代前端框架的黃金組合

在我們深入探討「如何整合」之前，得先搞清楚「為何要整合」。畢竟，單純用 Laravel 的 Blade 模板引擎也能做出很棒的網站啊！ 沒錯，但當你的應用程式需要極高的互動性、流暢的使用者體驗，像是即時更新的儀表板、無刷新載入的商品頁面，或是一個複雜的單頁應用程式（Single Page Application, SPA）時，傳統的後端渲染模式就會開始顯得力不從心。每一次小小的操作都可能需要重新整理整個頁面，這對使用者來說體驗並不好。 這就是 Vue.js 和 React 這些 JavaScript 框架大展身手的時候了。它們的核心思想是「組件化開發」與「狀態管理」，能讓我們打造出如 App般流暢的網頁介面。

• Laravel 的強項： 作為一個成熟的 PHP 框架，Laravel 提供了強大的後端功能，包括優雅的路由、ORM (Eloquent)、身份驗證、排程任務等，讓開發者可以專注於業務邏輯，而不是重複造輪子。
• Vue / React 的強項： 它們專注於 UI 層，提供響應式的資料綁定和可重複使用的組件，讓前端的開發與維護變得前所未有的高效。

當你把 Laravel 強大的後端能力，與 Vue / React 靈活的前端互動性結合起來，就能創造出兼具穩定性、安全性與絕佳使用者體驗的現代化應用程式。這不是自找麻煩，而是為了追求卓越的必然選擇。

整合的十字路口：API 模式 vs. Inertia.js 模式

好，既然我們確定了這是一條正確的道路，那問題來了，路有兩條，該走哪一條？目前主流的 Laravel + Vue / React 整合 方式主要有兩種：傳統的 API 模式，以及近年來越來越受歡迎的 Inertia.js 模式。

h3>模式一：純前後端分離（API 模式）

這是最經典的作法。在這個模式下，Laravel 的角色變成了一個純粹的「API 供應商」。

• 運作方式： 前端（Vue / React）是一個完全獨立的專案，它透過 HTTP 請求（GET, POST, PUT, DELETE）與後端 Laravel API 進行溝通，取得 JSON 格式的資料，然後在瀏覽器端將資料渲染成畫面。
• Laravel 的責任： 提供 RESTful API、處理商業邏輯、資料庫操作、以及使用者身份驗證（通常使用 Laravel Sanctum 或 JWT）。
• 前端的責任： 處理所有的話面渲染、路由（使用 Vue Router 或 React Router）、狀態管理（使用 Pinia/Vuex 或 Redux/Zustand），以及呼叫後端 API。

優點：

• 關注點分離： 前後端徹底解耦，團隊可以並行開發，互不干擾。後端工程師專心寫 API，前端工程師專心刻畫面。
• 多平台支援： 同一套 API 可以同時供給 Web 前端、手機 App (iOS/Android) 或其他第三方服務使用，擴充性極佳。

缺點（工程師的小囉嗦）：

• 開發複雜度高： 你等於在維護兩個獨立的專案。身份驗證、CORS 設定、前端狀態管理... 這些都需要額外處理，尤其是身份驗證，第一次踩坑通常會花不少時間。
• SEO 挑戰： 標準的 SPA 內容是靠 JavaScript 在瀏覽器端生成的，對搜尋引擎爬蟲不友善。雖然可以透過伺服器端渲染（SSR）或預渲染（Prerendering）來解決，但這又會增加一層複雜度。

模式二：現代單體應用（Inertia.js 模式）

Inertia.js 的出現，可以說是為了解決純 API 模式的痛點而生。它自己稱作「現代的 Monolith (單體應用)」。 老實說，我第一次看到它的時候也覺得這東西有點奇葩，但用過之後... 真香！

• 運作方式： 你還是在寫 Laravel 的 Controller 和路由，但你回傳的不是 JSON，也不是 Blade 視圖，而是一個 Inertia 的響應，裡面指定了要載入哪個前端組件（Vue 或 React）以及需要傳遞給它的資料（props）。
• 無縫銜接： 使用者點擊連結時，Inertia 會在背景發送一個 XHR 請求，後端回傳一個 JSON，其中包含了下一個頁面的組件名稱和資料。前端的 Inertia 核心庫會自動幫你換掉頁面組件，完全不需要刷新頁面，達到了 SPA 的效果。

優點：

• 開發體驗極佳： 你可以像寫傳統 Laravel 應用一樣寫 Controller 和路由，享受 Laravel 完整的 Middleware、身份驗證、表單驗證等功能，同時又能獲得 SPA 的流暢體驗。
• 簡化開發： 不用再寫 API、不用煩惱前端路由、不用處理複雜的狀態管理。後端傳什麼資料，前端組件就用什麼，直觀又簡單。
• 內建 SEO 友善： Inertia 支援 SSR（伺服器端渲染），設定相對簡單，可以有效解決 SPA 的 SEO 問題。

缺點（還是要囉嗦一下）：

• 前後端耦合： 這種模式下，你的前端是為 Laravel 後端量身打造的，無法輕易地抽出來給手機 App 使用。如果一開始就確定需要支援多平台，那 API 模式可能還是比較好的選擇。

實戰演練：用 Vite 快速啟動一個 Laravel + Vue 專案

紙上談兵終覺淺，我們來動手做一次。現在的 Laravel 預設使用 Vite 作為前端建構工具，速度飛快，體驗極佳。

步驟一：建立新的 Laravel 專案

打開你的終端機，輸入以下指令。我們以 Vue 為例，如果你想用 React，只要把 `--vue` 換成 `--react` 即可。

composer create-project laravel/laravel my-app
cd my-app
composer require inertiajs/inertia-laravel
npm install
npm install @inertiajs/vue3 vue

步驟二：設定 Inertia 中介軟體

到 `app/Http/Kernel.php` 檔案，在 `$middlewareGroups` 的 `web` 陣列中加入 Inertia 的中介軟體：

'web' => [
    // ... 其他中介軟體
    \App\Http\Middleware\HandleInertiaRequests::class,
],

步驟三：設定前端進入點

修改 `resources/js/app.js` 檔案，讓它使用 Inertia 來啟動 Vue：

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true });
    return pages[`./Pages/${name}.vue`];
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el);
  },
});

步驟四：修改 Controller 回傳 Inertia 視圖

假設我們有一個 `PostController`，我們想顯示文章列表。傳統上你會回傳一個 Blade 視圖，現在改成回傳 Inertia：

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Inertia\Inertia;

class PostController extends Controller
{
    public function index()
    {
        return Inertia::render('Posts/Index', [
            'posts' => Post::all()->map(fn ($post) => [
                'id' => $post->id,
                'title' => $post->title,
            ]),
        ]);
    }
}

這裡的 `'Posts/Index'` 對應到前端的 `resources/js/Pages/Posts/Index.vue` 組件。`'posts'` 陣列會作為 props 傳遞給這個組件。

步驟五：建立前端 Vue 組件

在 `resources/js/Pages/Posts/` 目錄下建立一個 `Index.vue` 檔案：

<script setup>
defineProps({
  posts: Array,
});
</script>

<template>
  <div>
    <h1>文章列表</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

最後，同時執行 `php artisan serve` 和 `npm run dev`，你就能在瀏覽器上看到由 Vue 組件渲染出來、但資料是從 Laravel Controller 直接傳過來的頁面了！是不是很神奇？整個過程幾乎沒有 API 的感覺，但你卻得到了一個功能完整的 SPA 頁面。

結論：該如何選擇？

講了這麼多，到底該選哪個？這裡是我 Eric 的真心建議：

• 如果你正在開發一個 Web 應用，且短期內沒有支援 App 的計畫： 請毫不猶豫地選擇 Inertia.js。它的開發效率和體驗會讓你愛不釋手，並且能避開許多前後端分離的坑。
• 如果你需要為多個客戶端（Web, iOS, Android）提供服務： 那就選擇傳統的 API 模式。這是最靈活、最具擴充性的架構，雖然前期開發成本較高，但長遠來看是值得的。

無論選擇哪條路，Laravel + Vue / React 整合 都是一個強大的技術組合，能幫助你打造出色的現代化應用。高效的開發不僅能節省成本，更能提升網站的整體效能，這對於使用者體驗和網站速度至關重要。 希望今天的分享對你有幫助。選擇正確的技術架構是專案成功的第一步，也是最關鍵的一步。如果你在專案開發上遇到了瓶頸，或是有更複雜的架構問題需要諮詢，浪花科技的團隊隨時準備好提供專業的協助。 準備好打造下一個偉大的專案了嗎？立即聯繫我們，讓我們的專家團隊助你一臂之力！