Proa: Framework web Rust với SSR tốc độ cao và render đa mục tiêu

Proa là một framework web mới được viết hoàn toàn bằng Rust, hướng đến hiệu năng cao và mô hình lập trình cho phép render đa mục tiêu (multi-target rendering) từ cùng một component có kiểu tĩnh. Framework này vừa xuất hiện trên Hacker News và nhanh chóng thu hút sự chú ý của cộng đồng lập trình viên.

Điểm đáng chú ý nhất của Proa là khả năng server-side rendering (SSR) với tốc độ vượt trội so với các giải pháp JavaScript truyền thống, cùng triết lý "không cần JavaScript nếu không thực sự cần".

Minh họa kiến trúc render đa mục tiêu của Proa

Một component, nhiều mục tiêu render

Proa giới thiệu một mô hình lập trình mới cho phép cùng một component có kiểu (typed component) có thể render ra HTML, Markdown và nhiều mục tiêu khác. Điều này có nghĩa là lập trình viên chỉ cần định nghĩa giao diện một lần, sau đó tái sử dụng cho nhiều ngữ cảnh khác nhau mà không phải viết lại logic.

Cụ thể, một component như ProductCard có thể triển khai đồng thời trait WebRenderSync cho HTML và MdRenderSync cho Markdown. Cả hai đều dùng chung dữ liệu đầu vào và logic xử lý, nhưng kết xuất ra định dạng phù hợp với từng mục tiêu.

Cách tiếp cận này đặc biệt hữu ích cho các ứng dụng cần hiển thị nội dung trên web, trong email, tài liệu Markdown hoặc các giao diện khác nhau — tất cả từ một nguồn dữ liệu duy nhất.

Hiệu năng vượt trội so với React

Nhóm phát triển Proa đã công bố benchmark so sánh trực tiếp với React renderToString. Kết quả cho thấy Proa render nhanh hơn 237 lần ở phân vị p50 trong điều kiện sản xuất ấm (warm production), đo trên VPS 8 vCPU AMD EPYC-Milan.

Các chỉ số cụ thể:

• Proa render p50: 5,56 ms
• React renderToString p50: chậm hơn 237 lần

Proa cũng công bố các chỉ số về khả năng chịu tải HTTP và hiệu năng Suspense dưới tải cao, đo trên chip Apple M4 Max.

Biểu đồ benchmark hiệu năng render của Proa

Đáng chú ý, nhóm phát triển cung cấp các bản demo tái tạo giao diện của GitHub, Sentry và Airbnb bằng Proa, cho thấy framework có thể xử lý các ứng dụng có mật độ thông tin cao (information-dense) mà vẫn giữ được tốc độ render phía máy chủ.

Streaming SSR và Suspense

Proa hỗ trợ streaming SSR theo hai chế độ:

• Theo thứ tự tài liệu: flush HTML theo đúng thứ tự khi trình tự quan trọng
• Không theo thứ tự: cho phép các Suspense boundary stream các phần đã sẵn sàng mà không chặn toàn bộ trang khi có dữ liệu chậm

Framework cung cấp WebContext với quyền truy cập có kiểu vào dữ liệu theo phạm vi request, metadata phản hồi, trạng thái route và bộ đệm loader — tất cả thông qua cùng một WebContext mà component đã nhận được.

Biểu đồ hiệu năng Suspense dưới tải của Proa

"RSJS islands": Tương tác mà không từ bỏ SSR

Proa giới thiệu khái niệm RSJS islands — một cách thêm tương tác vào trang web mà không phải hy sinh SSR gốc. Trang vẫn là HTML được render phía máy chủ, sau đó các điều khiển cụ thể có thể được đăng ký hành vi phía client bằng tín hiệu có kiểu (typed signals) và trình xử lý sự kiện.

Mỗi island được hydrate sẽ phát ra một module vanilla JS nhỏ kèm trạng thái seed, được phục vụ với runtime chia sẻ chỉ khoảng 1,3 KB gzipped. Đây là con số rất ấn tượng so với các framework JavaScript hiện đại thường có bundle size lớn hơn nhiều lần.

Hệ thống component Proa UI

Proa đi kèm Proa UI — bộ component theo phong cách Shadcn, nhưng mã nguồn nằm trong repo của bạn dưới dạng Rust có kiểu. Bạn có thể tùy biến chủ đề, kết hợp và triển khai theo nhu cầu.

Bộ component gồm 58 thành phần, từ cơ bản đến phức tạp:

• Accordion, Button, Card, Field, Table — các thành phần cơ bản
• Calendar, Chart, Input OTP, Chat — các thành phần phức tạp hơn
• Mỗi thành phần đều có ví dụ trực tiếp, bảng props và mã Rust có thể sao chép

Đặc biệt, các thành phần như Accordion có thể hoạt động hoàn toàn không cần JavaScript bằng cách dùng radio input và CSS thuần. Biểu đồ được vẽ dưới dạng SVG thuần trên server, không cần thư viện highlighter nào gửi xuống trình duyệt.

Tích hợp linh hoạt và áp dụng từng bước

Proa được thiết kế để không buộc bạn phải viết lại toàn bộ hệ thống. Có hai cách áp dụng chính:

• Axum-native: Dùng Proa cho routing và response khi bạn đã dùng Axum
• FFI: Gọi Proa từ Node, Go, Python, Ruby hoặc Java thông qua Foreign Function Interface

Bạn có thể proxy một route duy nhất sang Proa, giữ phần còn lại trên Next.js hoặc Rails, sau đó so sánh độ trễ và chi phí trong môi trường sản xuất. Đây là cách tiếp cận thận trọng, phù hợp với các đội ngũ muốn thử nghiệm mà không gây rủi ro cho hệ thống hiện có.

Bảo mật và khả năng truy cập

Proa tích hợp sẵn nhiều tính năng bảo mật:

• Tự động escape output — ngăn chặn XSS
• Bảo vệ request cross-origin
• Security headers mặc định
• Proxy upstream cố định

Về khả năng truy cập, Proa chạy kiểm tra WCAG và WAI-ARIA ngay trong quá trình cargo build, giúp phát hiện các lỗi markup phổ biến trước khi triển khai. Đây là điểm khác biệt đáng kể so với hầu hết framework hiện nay, vốn thường để việc kiểm tra accessibility cho các công cụ bên ngoài.

Ý nghĩa với cộng đồng lập trình viên Việt Nam

Với các đội ngũ phát triển web tại Việt Nam đang tìm kiếm giải pháp thay thế cho các framework JavaScript nặng nề, Proa có thể là một lựa chọn đáng cân nhắc — đặc biệt khi chi phí hạ tầng và tốc độ tải trang ngày càng quan trọng.

Tuy nhiên, cần lưu ý rằng Proa còn khá mới, cộng đồng còn nhỏ và hệ sinh thái chưa phong phú như React hay Next.js. Việc áp dụng vào dự án thực tế cần cân nhắc kỹ về độ chín muồi, tài liệu và hỗ trợ dài hạn.

Nếu bạn quan tâm, có thể bắt đầu bằng cách đọc quickstart và thử proxy một route nhỏ trong ứng dụng hiện tại để đo hiệu năng thực tế.

Framework này đại diện cho một xu hướng đáng chú ý: đưa hiệu năng của Rust vào phát triển web, kết hợp SSR nhanh với khả năng tương tác có chọn lọc — thay vì gửi hàng trăm KB JavaScript xuống trình duyệt người dùng.