前端

Laravel 是个后端框架，提供建现代 Web 应用所需的所有功能：路由、验证、缓存、队列、文件存储 等等。但我们也认为给开发者一套漂亮的全栈体验很重要，包括构建应用前端的强力方案。

用 Laravel 建应用时，前端开发主要有两条路，选哪条取决于你想用 PHP 还是 JavaScript 框架（React、Svelte、Vue）来写前端。下面分别讲，帮你判断哪种适合你的应用。

用 PHP 构建

PHP 和 Blade

过去，大多数 PHP 应用用简单的 HTML 模板嵌 PHP echo 来渲染 HTML，把数据库里查出来的数据显示到浏览器：

<div>
    <?php foreach ($users as $user): ?>
        Hello, <?php echo $user->name; ?> <br />
    <?php endforeach; ?>
</div>

在 Laravel 里，这种渲染 HTML 的方式仍然可以用视图和 Blade 实现。Blade 是一个极轻量的模板语言，提供方便、简短的语法来显示数据、遍历数据等：

<div>
    @foreach ($users as $user)
        Hello, {{ $user->name }} <br />
    @endforeach
</div>

用这种方式建应用时，表单提交和其它页面交互通常会从服务器收到一份全新的 HTML 文档，浏览器整页重渲染。直到今天，很多应用用简单的 Blade 模板做前端也挺合适。

不断提升的期待

不过，用户对 Web 应用的期待提高了，很多开发者发现需要做更动态、交互更顺滑的前端。为此，有人开始用 React、Svelte、Vue 这类 JavaScript 框架建前端。

也有人更想继续用自己顺手的后端语言，于是发展出一些"主要靠后端语言就能搭出现代 Web 应用 UI"的方案。比如 Rails 生态里催生了 Turbo、Hotwire、Stimulus 这些库。

在 Laravel 生态里，"主要用 PHP 搭现代动态前端"的需求催生了 Laravel Livewire 和 Alpine.js。

Livewire

Laravel Livewire 是一个用来搭 Laravel 前端的框架，做出来的前端和用 React、Svelte、Vue 搭的一样动态、现代、有生命力。

用 Livewire 时，你创建 Livewire"组件"——渲染 UI 的一小块，并暴露方法和数据让前端能调用、能交互。比如一个简单的"计数器"组件：

<?php

use Livewire\Component;

new class extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }
};
?>

<div>
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>

如你所见，Livewire 让你写 wire:click 这种新的 HTML 属性，把 Laravel 的前端和后端连起来。另外，你能用简单的 Blade 表达式渲染组件当前的状态。

对很多人来说，Livewire 革新了用 Laravel 做前端的方式——既能享受 Laravel 的顺手，又能搭出现代动态的 Web 应用。用 Livewire 的开发者通常还会配上 Alpine.js，在前端"按需"撒一点 JavaScript，比如用来渲染一个弹窗。

如果你是 Laravel 新手，建议先熟悉视图和 Blade 的基本用法，然后看官方 Laravel Livewire 文档 学怎么用交互式 Livewire 组件把应用带到下一个层次。

起步套件

如果你想用 PHP 和 Livewire 搭前端，可以用我们的 Livewire 起步套件快速启动开发。

用 React、Svelte 或 Vue 构建

虽然用 Laravel 和 Livewire 能搭出现代前端，很多开发者还是更想用 React、Svelte、Vue 这类 JavaScript 框架。这样能用上 NPM 上丰富的 JavaScript 包和工具生态。

但如果没有额外工具，把 Laravel 和 React/Svelte/Vue 配在一起，会有一堆麻烦事要解决：客户端路由、数据水合（hydration）、认证。

客户端路由通常用 React/Svelte/Vue 的强势框架（如 Next 和 Nuxt）来简化；但把 Laravel 这种后端框架和这些前端框架配在一起时，数据水合和认证仍然又复杂又繁琐。

另外，开发者得维护两个代码仓库，经常要在两边协调维护、发布、部署。这些问题不是解不了，但我们不觉得这是种高效或愉快的开发方式。

Inertia

好在 Laravel 给了两全其美。Inertia 在你的 Laravel 应用和现代 React/Svelte/Vue 前端之间搭了一座桥——让你用 React/Svelte/Vue 搭正经的现代前端，同时用 Laravel 的路由和控制器处理路由、数据水合、认证，全部在一个代码仓库里。这样你能同时享受 Laravel 和 React/Svelte/Vue 的全部能力，两边都不打折扣。

把 Inertia 装进 Laravel 应用后，你照常写路由和控制器。不过控制器里不再返回 Blade 模板，而是返回一个 Inertia 页面：

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;

class UserController extends Controller
{
    /**
     * Show the profile for a given user.
     */
    public function show(string $id): Response
    {
        return Inertia::render('users/show', [
            'user' => User::findOrFail($id)
        ]);
    }
}

一个 Inertia 页面对应一个 React、Svelte 或 Vue 组件，通常放在你应用的 resources/js/pages 目录。通过 Inertia::render 方法传给页面的数据，会用来"注水"页面组件的 props：

import Layout from '@/layouts/authenticated';
import { Head } from '@inertiajs/react';

export default function Show({ user }) {
    return (
        <Layout>
            <Head title="Welcome" />
            <h1>Welcome</h1>
            <p>Hello {user.name}, welcome to Inertia.</p>
        </Layout>
    )
}

可以看到，Inertia 让你搭前端时用上 React/Svelte/Vue 的全部能力，同时在 Laravel 后端和 JavaScript 前端之间提供一座轻量桥梁。

服务端渲染（SSR）——在服务器把页面渲染成 HTML 再发给浏览器（首屏快、利于 SEO），而不是让浏览器跑 JS 渲染。如果你担心应用需要 SSR 而不敢用 Inertia，别担心：Inertia 支持服务端渲染。通过 Laravel Cloud 或 Laravel Forge 部署时，让 Inertia 的 SSR 进程一直跑着也很轻松。

起步套件

如果你想用 Inertia 和 React/Svelte/Vue 搭前端，可以用我们的 React、Svelte 或 Vue 应用起步套件快速启动。这些起步套件用 Inertia、React/Svelte/Vue、Tailwind、Vite 给你搭好前后端认证流程，让你直接开始做下一个大点子。

打包资源

不管你选 Blade+Livewire 还是 React/Svelte/Vue+Inertia，大概率都需要把应用的 CSS 打包成生产可用的资源。当然，如果用 React/Svelte/Vue，还得把组件打包成浏览器能用的 JavaScript 资源。

Laravel 默认用 Vite 打包资源。Vite 构建速度极快，本地开发时热模块替换（HMR）几乎瞬间生效。所有新的 Laravel 应用（包括用我们起步套件建的）都有一个 vite.config.js，加载我们轻量的 Laravel Vite 插件，让 Vite 配 Laravel 用起来很舒服。

最快上手 Laravel + Vite 的方式是用我们的应用起步套件开始开发——它给你搭好前后端认证脚手架。