Trang web tĩnh với kho hàng trực tiếp
Bạn muốn một trang web nhanh. Bạn cũng cần mức tồn kho chính xác. Hầu hết mọi người chỉ chọn một. Họ chọn tốc độ hoặc sự chính xác. Bạn thì không cần phải như vậy.
Các trang web tĩnh (static sites) rất nhanh. Nhưng dữ liệu sẽ bị cũ giữa các lần build. Việc lấy dữ liệu phía client (client-side fetching) thì chính xác. Nhưng nó lại thêm các biểu tượng chờ (loading spinners). Các biểu tượng chờ này sẽ làm hỏng trải nghiệm người dùng.
Hãy sử dụng hai lớp sự thật.
Lớp thứ nhất phục vụ các hệ thống bên ngoài.
- Sử dụng dữ liệu tại thời điểm build cho Google và Meta.
- Điều này giúp ngừng quảng cáo cho các mặt hàng đã bán.
- Một script đồng bộ sẽ giúp dữ liệu này luôn mới.
Lớp thứ hai phục vụ khách truy cập của bạn.
- Render lưới sản phẩm dưới dạng HTML tĩnh.
- Giả định rằng các mặt hàng luôn có sẵn.
- Sử dụng một script nhỏ để cập nhật UI sau khi trang đã tải xong.
- Việc này sẽ ẩn nút mua hàng đối với các mặt hàng đã bán.
Cách tiếp cận này loại bỏ các trạng thái chờ (loading states). Trang web mang lại cảm giác tức thì. Nếu API của bạn gặp lỗi, trang web vẫn hoạt động. Người dùng vẫn có thể xem và thêm vào giỏ hàng. Nếu một mặt hàng đã được bán, giỏ hàng sẽ từ chối yêu cầu đó.
Một lỗi ở giỏ hàng vẫn tốt hơn là một màn hình trống rỗng.
Hãy sử dụng cách này cho các cửa hàng có lưu lượng truy cập thấp. Nó phù hợp cho các mặt hàng nghệ thuật hoặc hàng ngách. Đừng sử dụng cách này cho các đợt flash sale. Lưu lượng truy cập cao cần các bước kiểm tra nghiêm ngặt.