Tóm tắt nhanh:
ak-react-best-practiceslà bộ 45 luật hiệu năng React và Next.js của Vercel Engineering, chia 8 nhóm theo mức ảnh hưởng. Nó chọn luật khớp với nút thắt bạn đã thấy, sửa theo ví dụ đúng của luật rồi so số đo trước và sau. Nó không áp hết luật một lượt và không thêmmemokhắp nơi khi chưa có bằng chứng.
Công khai: mình là maintainer của AgentKit và có quan hệ affiliate: link AgentKit trong bài là link affiliate, mua qua link này bạn được giảm 30%.
Tóm tắt
Dùng khi app React hoặc Next.js chậm ở một chỗ cụ thể: trang tải lâu, bundle nặng, gõ phím bị giật, hoặc khi muốn review hay audit hiệu năng. Không cần cho component mới chưa có vấn đề hiệu năng nào được đo hay chỉ ra.
flowchart LR
A["Chỗ chậm đã đo hoặc đã chỉ ra"] --> B["ak-react-best-practices"]
B --> C["Luật khớp nút thắt + code đã sửa"]
C --> D["Số đo trước và sau"]
E["Yêu cầu audit rộng"] --> B
B --> F["Đối chiếu với đủ 45 luật"]Nó dựa trên 4 ý:
| Ý | Câu hỏi | Ví dụ |
|---|---|---|
| Nút thắt có bằng chứng | Chậm ở đâu, và bạn biết bằng cách nào? | Tab network cho thấy 3 request nối đuôi nhau |
| Nhóm luật | Nút thắt thuộc nhóm nào trong 8 nhóm? | Request nối đuôi thuộc async-, import cả thư viện icon thuộc bundle- |
| Mức ưu tiên không phải mệnh lệnh | Có phải áp mọi luật CRITICAL cho chắc? | Không. Trang không có waterfall thì luật async- không giúp gì |
| Đúng phiên bản, đo trước và sau | API có chạy trên bản React, Next.js của project, sửa xong có nhanh thật không? | optimizePackageImports cần Next.js 13.5 trở lên; so lại kích thước bundle sau khi sửa |
8 nhóm theo thứ tự ưu tiên: async- và bundle- ở mức CRITICAL, server- ở mức HIGH, client- ở mức MEDIUM-HIGH, rerender- và rendering- ở mức MEDIUM, js- ở mức LOW-MEDIUM, advanced- ở mức LOW.
Prompt mẫu cho trang tải chậm vì waterfall:
/ak-react-best-practices Trang /products/[id] của <tên app> mất khoảng 2 giây mới hiện.
Tab network cho thấy 3 request lấy sản phẩm, đánh giá, tồn kho chạy nối đuôi.
Ràng buộc: giữ nguyên dữ liệu trang hiển thị.
Xong khi: các request độc lập chạy song song, thời gian tải giảm so với trước.Skill này không có cờ. Sau tên lệnh bạn ghi tên component, trang hoặc một mẫu code (như async-parallel), có thể bỏ trống, và nên kèm triệu chứng cùng số đo đã có.
Phần dưới đây là bản chi tiết: luồng chạy, 5 tình huống kèm prompt, cách ghi đầu vào, lịch sử thay đổi theo bản ak và các lỗi hay vấp. Bản chi tiết và trang trực quan dành cho subscriber. Agent của bạn cũng tìm được trong đó qua MCP của portal.
Mở khi tài khoản có quyền subscriber
Bài này dành cho subscriber
Khi tài khoản có quyền, toàn bộ bài, bản visual tương tác và lệnh gọi từ agent đều mở.
- Đăng nhập hoặc tạo tài khoản modernEngineerQuyền đọc gắn với email tài khoản.
- Chọn gói trên trang Bảng giáGói 1, 3 hoặc 12 tháng, trả bằng chuyển khoản VietQR. Quyền đọc mở khoảng một phút sau khi tiền về.
- Hoặc nhập mã Facebook subscriberNgười ủng hộ trang qua Facebook nhận mã kích hoạt qua tin nhắn mỗi tháng.
Đã là subscriber? Đăng nhập để đọc.
Dùng bài này trong agent của bạn
Lấy API keyChép đoạn dưới, dán vào Claude Code, Codex hay agent bạn đang dùng. Agent đọc bài rồi đối chiếu với repo đang mở.
Đọc bài "ak-react-best-practices: sửa đúng chỗ chậm trong app React, Next.js" trên modernEngineer rồi áp dụng vào repo này.
1. Gọi tool content_get của MCP server modernengineer với locale "vi", slug "ak-react-best-practices". Nếu chưa nối MCP server modernengineer, dừng lại và hướng dẫn tôi nối theo https://modernengineer.dev/vi/mcp.
2. Tóm tắt các bước chính của bài, chỉ ra bước nào áp dụng được cho repo này.
3. Đề xuất thay đổi cụ thể và hỏi tôi trước khi sửa file.Nối MCP cho Claude Code (một lần)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Đọc trọn bài qua MCP cần API key của tài khoản subscriber hoặc đã mua guide này. Không có quyền, agent sẽ chỉ đọc được phần mở đầu.
- Phiên bản
- v1.0.0
- Cập nhật
- 22/10/2026
- Giấy phép
- Bảo lưu mọi quyền
- Slug
- ak-react-best-practices
