Để người dùng nhìn màn hình loading xoay tròn 5–10 giây khi AI Agent suy nghĩ là cách nhanh nhất để họ thoát trang. Sử dụng Streaming qua Server-Sent Events (SSE) giúp phản hồi xuất hiện tức thì theo từng token, nhưng nếu xử lý render vụng về ở client, giao diện sẽ lập tức bị giật (layout shift) hoặc drop FPS.
Dưới đây là 4 kỹ thuật tối ưu Frontend giúp trải nghiệm stream dữ liệu từ AI mượt như văn bản gõ tay thật.
1. Cơ chế Streaming: Vì sao chọn SSE thay vì WebSocket?
Rất nhiều đội ngũ mặc định chọn WebSocket khi làm tính năng realtime, nhưng với AI Agent, Server-Sent Events (SSE) vượt trội hơn ở 3 điểm:
- Giao thức một chiều nhẹ tênh: AI stream dữ liệu về một chiều từ server tới client qua HTTP/2 chuẩn, không tốn tài nguyên duy trì kết nối song công (full-duplex).
- Tự động khôi phục kết nối (Auto-reconnect): Trình duyệt có cơ chế tự retry khi rớt mạng mà không cần viết thêm script quản lý heartbeat.
- Tương thích hoàn hảo với CDN & Edge: Dễ dàng định tuyến qua Cloudflare Workers hoặc Vercel Edge Functions mà không gặp rào cản về stateful connection.
2. Ba kỹ thuật chặn giật lag UI khi nhận Token Stream
Kỹ thuật 1: Throttle Render bằng requestAnimationFrame
Mỗi khi server đẩy về một token (hoặc chunk 2–3 ký tự), nếu bạn gọi setState() liên tục trong React/Vue, ứng dụng sẽ re-render hàng trăm lần mỗi giây:
- Giải pháp: Sử dụng một hàng đợi (Queue) để hứng token từ stream.
- Gom các ký tự nhận được và chỉ cập nhật lên DOM trong frame kế tiếp thông qua
requestAnimationFrame(), giữ vững tốc độ khung hình ở mức 60 FPS.
Kỹ thuật 2: Xử lý Markdown động với Incremental Parser
Render Markdown dạng rich-text (bảng, khối code, in đậm) khi nội dung chưa hoàn tất thường làm gãy syntax (ví dụ: thẻ code ``` chưa đóng):
- Đừng ném toàn bộ chuỗi text đang dở dang vào trình parse Markdown nặng nề ở từng token.
- Chỉ kích hoạt tự động cuộn khi người dùng đang ở sát đáy; nếu người dùng chủ động lăn chuột ngược lên, tạm ngắt auto-scroll cho đến khi họ kéo lại xuống dưới.
2. Quản lý trạng thái đa tầng: Khi Agent vừa Suy nghĩ vừa Gọi Tool
Giao diện AI Agent hiện đại không chỉ có text, mà còn hiển thị các trạng thái trung gian (Thinking, Calling Tool, Waiting API):
- Event Type rõ ràng: Quy định định dạng SSE trả về nhiều loại sự kiện thay vì chỉ text thuần:
event: thought
data: {"message": "Đang kiểm tra tồn kho..."}
event: tool_call
data: {"tool": "check_stock", "status": "running"}
event: message
data: {"token": "Sản phẩm "}- Skeleton & Badge trạng thái: Hiển thị khối trạng thái riêng biệt cho bước gọi tool và thu gọn lại thành badge nhỏ khi hoàn tất, tránh làm vỡ bố cục đoạn text chính của phản hồi.
Lời kết
Trải nghiệm Streaming mượt mà là yếu tố quyết định người dùng cảm thấy AI Agent thông minh, phản xạ nhanh và đáng tin cậy. Chỉ cần tinh chỉnh bộ đệm render và cơ chế cuộn trang, bạn đã nâng tầm cảm giác sử dụng của toàn bộ ứng dụng web.