KHI MỘT LẦN REFRESH ĐƠN GIẢN LÀM HỎNG ỨNG DỤNG CỦA CHÚNG TÔI
Chúng tôi đã phát hiện một lỗi. Các route chính hoạt động tốt. Các route sâu gây ra tình trạng tải lại toàn bộ trang. Thanh sidebar bị reset mỗi lần. Ứng dụng có cảm giác không ổn định.
Nó hoạt động tốt ở môi trường local. Nhưng lại lỗi ở môi trường production.
Chúng tôi sử dụng Next.js static export trên Azure Static Web Apps. Thiết lập này không có server runtime. Nó chỉ phục vụ các tệp tĩnh.
Vấn đề nằm ở soft navigation. Next.js cần dữ liệu route payload để thực hiện các chuyển cảnh mượt mà. Nó cần HTML cho lần tải đầu tiên.
Các quy tắc rewrite của Azure quá rộng. Azure đã gửi HTML khi Next.js yêu cầu dữ liệu payload. Bộ định tuyến (router) bị lỗi. Ứng dụng bị tải lại.
Chúng tôi đã khắc phục điều này bằng cách tự động hóa. Chúng tôi đã xây dựng một công cụ để tạo các quy tắc rewrite từ kết quả build. Công cụ này hiện:
- Quét các tệp route động.
- Tạo các quy tắc cụ thể cho HTML và payload.
- Sắp xếp các quy tắc theo độ ưu tiên.
- Ghi tệp cấu hình cuối cùng.
Điều này giúp loại bỏ các lỗi thủ công.
Nếu bạn sử dụng static export trên Azure:
- Hãy tự động hóa các tệp cấu hình của bạn.
- Kiểm tra soft navigation.
- Kiểm tra xem các yêu cầu payload có trả về HTML hay không.
- Hãy coi các quy tắc rewrite là hạ tầng quan trọng.
Các lỗi frontend phức tạp thường nằm giữa kết quả build và các quy tắc hosting.