Giữ nguyên các báo cáo hiện có, tự do cải tiến: Câu chuyện thiết kế trang tĩnh được giải quyết bằng Vike

Bài viết giới thiệu trường hợp đội ngũ Lemonbase áp dụng Vike và phương thức trang tĩnh (SSG) để có thể tự do cải tiến trang báo cáo, đồng thời vẫn duy trì ổn định các kết quả báo cáo hiện có.

Nội dung chính

• Các báo cáo hiện có cần cố định dữ liệu và UI tại một thời điểm cụ thể, nhưng do cấu trúc render phía client (CSR), khi thay đổi logic/thiết kế thì cả các báo cáo cũ cũng bị ảnh hưởng
• Nhóm đã xem xét nhiều phương án khác nhau như module federation, quản lý phiên bản component, nhưng cuối cùng đánh giá rằng việc tạo trang tĩnh (SSG) là cách phù hợp nhất
• Chỉ cần bổ sung một số cấu hình đơn giản lên trên dự án vốn dựa trên Vite để áp dụng SSG thông qua Vike
  • Build file HTML đã bao gồm dữ liệu tại thời điểm phát hành báo cáo để cố định nội dung
  • Bản xem trước trước khi phát hành vẫn giữ khả năng phản ánh dữ liệu thời gian thực
• Tích hợp báo cáo vào trong sản phẩm bằng phương thức iframe để kết nối UX một cách tự nhiên
• Kết quả áp dụng:
  • Các báo cáo cũ không thay đổi, còn báo cáo mới có thể được cải tiến tự do
  • Hiệu năng được cải thiện (tải nhanh hơn) và giảm chi phí bảo trì
  • Có thể triển khai nhanh mà không cần hạ tầng quy mô lớn riêng biệt
• Tuy vậy, một điểm đáng tiếc là cộng đồng của Vike còn nhỏ nên tài liệu tham khảo chưa nhiều

Đối tượng nên đọc

• Các nhóm đang tìm cách quản lý ổn định các trang báo cáo theo từng phiên bản
• Các lập trình viên FE cần chuyển từ cấu trúc CSR sang SSG hoặc cần thiết kế kết hợp
• Các lập trình viên muốn bổ sung nhẹ nhàng tính năng trang tĩnh vào dự án dựa trên Vite