Thoát khỏi "Bẫy" SPA: Thêm tính tương tác cho ASP.NET Razor Pages với HTMX

Nếu bạn đã làm việc trong hệ sinh thái .NET một thời gian, chắc hẳn bạn đã từng cảm thấy áp lực phải "SPA- hóa" mọi thứ. Chúng ta đã chuyển từ Razor Views sang React, rồi đến Blazor, và bây giờ lại đang quay trở lại. Tại sao ư? Bởi vì với nhiều ứng dụng kinh doanh dựa trên dữ liệu, sự phức tạp của một framework phía client (client-side framework) hoàn chỉnh là quá mức cần thiết.

Hãy để HTMX giải quyết vấn đề này. Đây không hẳn là một framework mới, mà là một cách tư duy khác biệt. Bằng cách tận dụng các thuộc tính HTML tiêu chuẩn, bạn có thể thêm AJAX, CSS Transitions, WebSockets và Server-Sent Events trực tiếp vào mã đánh dấu (markup) của mình.

Tại sao nên chọn Razor Pages kết hợp với HTMX?

Razor Pages vốn dĩ đã là một cách tuyệt vời để tổ chức các ứng dụng web .NET của bạn. Chúng sử dụng PageModel để xử lý logic và tệp .cshtml để hiển thị giao diện. Khi thêm HTMX vào, bạn sẽ nhận được những lợi ích sau:

• Không cần bước Build (No Build Step): Không còn phải lo lắng về npm install, webpack hay cấu hình vite cho giao diện người dùng chính của bạn.
• An toàn kiểu dữ liệu (Type Safety): Mã C# phía máy chủ vẫn là nguồn chân lý duy nhất.
• Tính đơn giản: Bạn chỉ cần trả về các đoạn mã HTML thay vì JSON và sau đó phải phân tích cú pháp cũng như hiển thị chúng trên phía client.

Ví dụ nhanh

Hãy tưởng tượng một nút "Thêm vào giỏ hàng" đơn giản. Trong một SPA truyền thống, việc này sẽ liên quan đến một lệnh gọi fetch, cập nhật kho lưu trữ trạng thái cục bộ (local state store) và kết xuất lại một component. Với HTMX và Razor Pages, mọi thứ đơn giản hơn nhiều:

Trong tệp .cshtml của bạn:

<!-- Trong tệp .cshtml của bạn -->
<button hx-post="/cart/add" 
        hx-target="#cart-count" 
        hx-swap="innerHTML">
    Thêm vào giỏ hàng
</button>

<div id="cart-count">@Model.CartCount</div>

Trong PageModel của bạn:

public IActionResult OnPostAdd(int productId)
{
    // Logic để thêm vào giỏ hàng
    _cartService.Add(productId);

    // Trả về chỉ đoạn fragment đã được cập nhật
    return Partial("_CartCountPartial", _cartService.Count);
}

Sự phục hưng của tư duy "Server-First" (Ưu tiên máy chủ)

Điều này không chỉ đơn thuần là giúp tiết kiệm vài dòng code. Nó là về xu hướng Server-First. Bằng cách giữ logic giao diện gần với dữ liệu hơn, chúng ta giảm bớt việc "chuyển đổi ngữ cảnh" (context switching) giữa các nhà phát triển frontend và backend.

Đối với các nhóm đã có nền tảng C# vững chắc, cách tiếp cận này cho phép bạn cung cấp trải nghiệm người dùng hiện đại, mượt mà mà không cần thuê một kỹ sư JavaScript chuyên dụng hay phải vật lộn với các lỗi hydratation của React.

Bắt đầu như thế nào?

1. Thêm script HTMX vào tệp _Layout.cshtml của bạn.
2. Bắt đầu thay thế các lệnh gọi Ajax.BeginForm hoặc jQuery của bạn bằng hx-post và hx-get.
3. Trả về PartialViewResult từ các trình xử lý (handlers) PageModel của bạn.

Bạn đã sẵn sàng để loại bỏ "thuế JavaScript" và quay lại việc xây dựng các tính năng cốt lõi chưa? Hãy cho tôi biết trong phần bình luận nếu bạn định thử HTMX trong dự án .NET tiếp theo của mình!