Tìm hiểu về các lợi ích và sự đánh đổi của việc hỗ trợ AMP trong ứng dụng Next.js của bạn
AMP là khung thành phần web đảm bảo tốc độ tải trang nhanh. Next.js có hỗ trợ tích hợp cho AMP.
Bạn sẽ học được gì?
Trước tiên, hướng dẫn này mô tả ngắn gọn cách AMP đảm bảo tốc độ tải trang nhanh, sau đó giải thích những cách hỗ trợ AMP trong ứng dụng Next.js, sau đó giúp bạn quyết định phương pháp phù hợp nhất với bạn.
Đối tượng mục tiêu của tài liệu hướng dẫn này là một nhà phát triển web đã quyết định sử dụng Next.js nhưng không chắc liệu có hỗ trợ AMP hay không.
Cách AMP đảm bảo tải trang nhanh
AMP có hai chiến lược chính để đảm bảo tính nhanh:
- HTML AMP: Dạng HTML bị hạn chế, bắt buộc phải thực hiện một số hoạt động tối ưu hoá và cấm các mẫu cấu trúc dẫn đến tốc độ tải chậm. Xem phần Cách hoạt động của AMP để biết thông tin tổng quan về các cách tối ưu hoá và hạn chế.
- Bộ nhớ đệm AMP: Bộ nhớ đệm nội dung mà một số công cụ tìm kiếm (chẳng hạn như Google và Bing) sử dụng có chức năng kết xuất trước để tăng tốc độ tải trang. Xem bài viết Tại sao bộ nhớ đệm AMP lại tồn tại để tìm hiểu thêm về những lợi ích cũng như sự đánh đổi của bộ nhớ đệm và bài viết Trang AMP của tôi được lưu vào bộ nhớ đệm như thế nào? để hiểu cách các trang AMP của bạn được lưu vào bộ nhớ đệm.
Cách sử dụng AMP trong Next.js
Có hai cách để sử dụng AMP trong Next.js:
- Phương pháp AMP kết hợp cho phép bạn tạo phiên bản AMP đi kèm của bất kỳ trang Next.js nào.
- Phương pháp chỉ AMP cho phép bạn biến AMP trở thành lựa chọn duy nhất cho một trang.
Mặc dù Next.js thường được coi là một khung React, nhưng bạn cần hiểu rằng khi sử dụng Next.js để phân phát các trang AMP, bạn không thể chạy các thành phần React ở phía máy khách nữa vì thành phần React không phải là thành phần AMP hợp lệ. Nói cách khác, Next.js không còn là một khung React mà là một công cụ tạo mẫu phía máy chủ để tạo các trang AMP.
Cách quyết định xem nên sử dụng phương pháp tiếp cận chỉ AMP hay AMP kết hợp
Nếu bạn nghiêm túc về hiệu suất tải, trang chỉ có AMP có thể là cách tốt để đảm bảo rằng trang của bạn tải nhanh. Tuy nhiên, điều cần lưu ý ở đây là: để đảm bảo tính ổn định, AMP nghiêm cấm một số mẫu kiến trúc và phần tử HTML thường dẫn đến các trang tải chậm. Ví dụ: AMP không cho phép JavaScript đồng bộ tuỳ chỉnh vì tài nguyên chặn hiển thị là nguyên nhân phổ biến khiến trang tải chậm.
Để biết liệu phương pháp chỉ dành cho AMP có phù hợp với bạn hay không, bạn cần tìm hiểu xem liệu tất cả mã giao diện người dùng của mình có thể được biểu thị trong HTML AMP hay không:
- Đọc Cách hoạt động của AMP để hiểu các quy định hạn chế về cấu trúc tổng thể của AMP và các biện pháp tối ưu hóa bắt buộc.
- Đọc Thẻ HTML để xem những thẻ HTML mà AMP cho phép và cấm, duyệt qua danh mục thành phần AMP để xem các thành phần tuỳ chỉnh mà cộng đồng AMP đã xây dựng nhằm giải quyết các trường hợp sử dụng phổ biến, đồng thời xem amp-script để tìm hiểu cách dùng JavaScript tuỳ chỉnh nhằm triển khai các tính năng mà AMP hiện không hỗ trợ.
Ngay cả khi phương pháp chỉ dành cho AMP không hiệu quả cho trang của bạn, thì bạn vẫn nên sử dụng AMP bất cứ khi nào có thể, vì tính ổn định của HTML AMP và Bộ nhớ đệm AMP được đảm bảo. Phương pháp tiếp cận AMP kết hợp trong Next.js cung cấp cách phân phát các trang AMP theo điều kiện. Tuy nhiên, việc này cũng tạo ra chi phí bảo trì cao hơn vì bạn phải duy trì 2 phiên bản của mỗi trang.
Kết luận
AMP đảm bảo rằng trang web của bạn tải nhanh và duy trì tốc độ nhanh bằng cách thực thi các mẫu tạo ra tốc độ tải nhanh và cấm những mẫu hình dẫn đến tốc độ tải chậm. Bộ nhớ đệm HTML và AMP là hai cách chính để AMP đảm bảo tính nhanh chóng. Nhưng trước khi sử dụng AMP, bạn nên đảm bảo rằng AMP có thể hỗ trợ tất cả các yêu cầu của trang web của bạn.