Mục lục nội dung

Giới thiệu

Laravel Livewire đã trở thành một công cụ mạnh mẽ cho phép các developer Laravel xây dựng giao diện người dùng động mà không cần viết JavaScript. Tuy nhiên, khi dự án phát triển quy mô lớn, vấn đề hiệu năng render và tải lại dữ liệu thường xuất hiện, gây ra trải nghiệm chậm chạp cho người dùng cuối. Bài viết này sẽ đi sâu vào các kỹ thuật tối ưu hiệu năng Livewire, bao gồm việc cache dữ liệu trong component, debounce các hành động nhập liệu, và cách kết hợp Alpine.js để giảm thiểu các vòng gọi AJAX không cần thiết.

Livewire và vấn đề render không tối ưu

Nguyên nhân gây re‑render toàn bộ component

Mỗi khi một hành động (event) được kích hoạt, Livewire sẽ gửi một yêu cầu AJAX tới server, thực thi phương thức trong component, và trả về HTML mới cho toàn bộ component. Nếu không có biện pháp kiểm soát, việc này sẽ khiến $this->render() được gọi lại và toàn bộ DOM của component được cập nhật, ngay cả khi chỉ có một phần dữ liệu thay đổi. Các nguyên nhân phổ biến:

  • Tham chiếu tới các collection lớn trong thuộc tính public mà không có lazy loading.
  • Thực hiện các query phức tạp trong phương thức render() mà không cache.
  • Không sử dụng wire:ignore cho các phần UI được Alpine.js hoặc JavaScript quản lý.

Chiến lược giảm re‑render

Để giảm thiểu việc render lại toàn bộ component, chúng ta có thể áp dụng các chiến lược sau:

  • Sử dụng computed properties – khai báo các phương thức trả về dữ liệu và gọi chúng trong view thay vì lưu trong public property.
  • Cache kết quả truy vấn – lưu trữ tạm thời các query tốn thời gian trong bộ nhớ cache (Redis, file cache).
  • Debounce các input – giới hạn tần suất gửi yêu cầu khi người dùng gõ ký tự.
  • Phân tách component – chia component lớn thành các component con, mỗi component chỉ chịu trách nhiệm một phần UI.

Kỹ thuật cache dữ liệu trong Livewire

Sử dụng property caching

Livewire cho phép khai báo các thuộc tính protected hoặc private và tính toán chúng một lần, sau đó lưu vào bộ nhớ tạm trong vòng đời của component. Đối với dữ liệu không thay đổi thường xuyên, chúng ta có thể lưu vào cache Laravel và chỉ tải lại khi cần.

<?php
namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Cache;
use App\Models\Product;

class ProductList extends Component
{
    // Thuộc tính public sẽ được truyền tới view
    public $search = '';

    // Thuộc tính cache nội bộ, không xuất ra view
    protected $cachedProducts;

    public function mount()
    {
        // Tải danh sách sản phẩm từ cache nếu có, nếu không thực hiện query và lưu lại
        $this->cachedProducts = Cache::remember('all_products', now()->addMinutes(30), function () {
            return Product::orderBy('name')->get();
        });
    }

    public function updatedSearch()
    {
        // Khi người dùng thay đổi từ khóa tìm kiếm, không cần query lại toàn bộ DB
        // Chỉ lọc trong bộ nhớ đã cache
        $this->resetPage();
    }

    public function getFilteredProductsProperty()
    {
        // Computed property, trả về kết quả đã lọc dựa trên $search
        return $this->cachedProducts->filter(function ($product) {
            return stripos($product->name, $this->search) !== false;
        });
    }

    public function render()
    {
        return view('livewire.product-list', [
            'products' => $this->filteredProducts,
        ]);
    }
}
?>

Trong ví dụ trên, cachedProducts được tải một lần trong mount() và lưu trong cache Laravel trong 30 phút. Khi người dùng thay đổi từ khóa tìm kiếm, chúng ta chỉ thực hiện lọc trên collection đã có, tránh việc thực hiện query lại database.

Cache query results

Đối với các query phức tạp, đặc biệt là khi có các quan hệ eager load, chúng ta có thể cache toàn bộ kết quả dưới dạng JSON. Khi dữ liệu thay đổi, chỉ cần Cache::forget() để làm mới.

<?php
use Illuminate\Support\Facades\Cache;
use App\Models\Order;

$orders = Cache::remember('recent_orders', now()->addMinutes(10), function () {
    return Order::with(['customer', 'items.product'])
                ->where('status', '!=', 'cancelled')
                ->orderBy('created_at', 'desc')
                ->take(50)
                ->get();
});

// Truyền $orders tới Livewire component hoặc view
?>

Nhờ cache, thời gian phản hồi giảm đáng kể, đặc biệt khi API Livewire được gọi liên tục trong các thao tác pagination.

Kết hợp Livewire với Alpine.js để tối ưu UI

Debounce input

Alpine.js cung cấp directive x-model.debounce cho phép trì hoãn việc cập nhật giá trị tới Livewire cho đến khi người dùng dừng nhập trong một khoảng thời gian nhất định. Điều này giảm số lượng request AJAX gửi tới server.

<div x-data="{}">
    <input type="text" 
           wire:model="search" 
           x-model.debounce.500ms="search" 
           placeholder="Tìm kiếm sản phẩm..." 
           class="border rounded p-2 w-full">
</div>

Trong đoạn code trên, Alpine sẽ chỉ cập nhật search sau 500ms không có thay đổi, và Livewire sẽ nhận được giá trị mới một lần duy nhất, thay vì mỗi ký tự.

Sử dụng wire:ignore cho phần UI do Alpine quản lý

Khi Alpine thực hiện các thao tác DOM (ví dụ: dropdown, modal), chúng ta nên bảo vệ phần này khỏi việc Livewire re‑render bằng cách thêm wire:ignore. Điều này ngăn Livewire ghi đè lên trạng thái UI do Alpine duy trì.

<div wire:ignore>
    <select x-data="{open: false}" 
            @click="open = !open" 
            class="border rounded p-2">
        <option value="">Chọn danh mục</option>
        <option value="electronics">Điện tử</option>
        <option value="books">Sách</option>
    </select>
</div>

Với wire:ignore, Livewire sẽ không cố gắng cập nhật lại phần select khi component được render lại, giúp giữ trạng thái mở/đóng của dropdown.

Thực hành: Xây dựng component quản lý danh sách sản phẩm

Component class

<?php
namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use Illuminate\Support\Facades\Cache;
use App\Models\Product;

class ProductTable extends Component
{
    use WithPagination;

    public $search = '';
    public $perPage = 10;

    protected $cachedProducts;

    public function mount()
    {
        $this->cachedProducts = Cache::remember('all_products', now()->addHours(1), function () {
            return Product::orderBy('name')->get();
        });
    }

    public function updatingSearch()
    {
        $this->resetPage();
    }

    public function getFilteredProductsProperty()
    {
        return $this->cachedProducts->filter(function ($product) {
            return stripos($product->name, $this->search) !== false;
        })->forPage($this->page, $this->perPage);
    }

    public function render()
    {
        return view('livewire.product-table', [
            'products' => $this->filteredProducts,
        ]);
    }
}
?>

Component view (Blade)

<div class="p-4">
    <div class="mb-4">
        <input type="text" 
               wire:model.debounce.500ms="search" 
               placeholder="Tìm kiếm sản phẩm..." 
               class="border rounded p-2 w-full">
    </div>

    <table class="min-w-full bg-white">
        <thead>
            <tr>
                <th class="px-4 py-2 border">ID</th>
                <th class="px-4 py-2 border">Tên</th>
                <th class="px-4 py-2 border">Giá</th>
                <th class="px-4 py-2 border">Hành động</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach($products as $product): ?>
                <tr>
                    <td class="px-4 py-2 border"><?php echo $product->id; ?></td>
                    <td class="px-4 py-2 border"><?php echo e($product->name); ?></td>
                    <td class="px-4 py-2 border">$<?php echo number_format($product->price, 0, ',', '.'); ?></td>
                    <td class="px-4 py-2 border">
                        <button wire:click="edit(<?php echo $product->id; ?>)" class="bg-blue-500 text-white px-2 py-1 rounded">Sửa</button>
                        <button wire:click="delete(<?php echo $product->id; ?>)" class="bg-red-500 text-white px-2 py-1 rounded ml-2">Xóa</button>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>

    <div class="mt-4">
        <!-- Pagination Livewire component -->
        <div>
            <?php echo $products->links(); ?>
        </div>
    </div>
</div>

Component trên kết hợp các kỹ thuật đã trình bày: cache danh sách sản phẩm, debounce tìm kiếm, và phân trang bằng WithPagination. Nhờ wire:model.debounce.500ms, số lượng request tới server giảm đáng kể khi người dùng gõ từ khóa.

Best Practices và Pitfalls

  1. Tránh truy vấn trong render(): render() được gọi sau mỗi request AJAX, vì vậy mọi query nặng nên được di chuyển ra mount(), computed property, hoặc cache.
  2. Sử dụng wire:key cho các vòng lặp để Livewire có thể theo dõi phần tử một cách chính xác, tránh lỗi khi danh sách thay đổi.
  3. Giới hạn kích thước payload: Khi trả về dữ liệu JSON lớn, hãy cân nhắc trả về chỉ những trường cần thiết bằng select() hoặc ->pluck().
  4. Đừng lạm dụng wire:ignore: Nếu quá nhiều phần UI bị bỏ qua, Livewire sẽ mất khả năng đồng bộ trạng thái, dẫn tới lỗi logic.
  5. Kiểm tra cache invalidation: Khi dữ liệu gốc thay đổi (thêm/sửa/xóa), luôn gọi Cache::forget() hoặc Cache::tags() để làm mới cache.

Kết luận

Việc tối ưu hiệu năng Livewire không chỉ dựa vào một kỹ thuật duy nhất mà cần kết hợp cache dữ liệu, debounce input và kết hợp Alpine.js một cách hợp lý. Khi áp dụng các best practices trên, bạn sẽ giảm đáng kể số lượng request, giảm thời gian render và mang lại trải nghiệm người dùng mượt mà hơn cho các ứng dụng Laravel SPA. Để nắm vững toàn bộ quy trình và có những ví dụ thực tế chi tiết hơn, Tham khảo khóa học "Khóa học Laravel Livewire từ cơ bản đến nâng cao" tại đây.