Tìm hiểu về các lợi ích và điểm đánh đổi của việc hỗ trợ AMP trong ứng dụng Next.js
AMP là một khung thành phần web đảm bảo trang tải nhanh. Next.js có tính năng hỗ trợ tích hợp sẵn 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 việc tải trang nhanh, sau đó giải thích các cách mà bạn có thể 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 hướng dẫn này là các nhà phát triển web đã quyết định sử dụng Next.js nhưng không chắc 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 độ nhanh:
- HTML AMP: Một dạng HTML bị hạn chế khiến một số hoạt động tối ưu hoá nhất định trở nên bắt buộc và nghiêm cấm các mẫu cấu trúc dẫn đến tốc độ chậm. Xem phần Cách hoạt động của AMP để biết thông tin tổng quan về 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. Bộ nhớ đệm này sử dụng kết xuất trước để tăng tốc độ tải trang. Hãy xem bài viết Lý do nên có bộ nhớ đệm AMP để tìm hiểu thêm về các lợi ích và sự đánh đổi của bộ nhớ đệm và bài viết Làm cách nào để trang AMP của tôi được lưu vào bộ nhớ đệm? để hiểu được cách các trang AMP được chuyển vào bộ nhớ đệm.
Cách bạn có thể 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 một phiên bản AMP đi kèm của mọi trang Next.js.
- Phương pháp chỉ với AMP cho phép bạn đặt AMP làm lựa chọn duy nhất cho một trang.
Mặc dù Next.js thường được coi là khung React, nhưng điều quan trọng là bạn phải hiểu rằng khi sử dụng Next.js để phân phát các trang AMP, bạn sẽ không thể chạy thành phần Phản ứng phía máy khách được nữa vì các thành phần Phản ứng 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à 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 chỉ sử dụng AMP kết hợp hay chỉ sử dụng AMP
Nếu bạn nghiêm túc về hiệu suất tải, thì trang chỉ dành cho AMP có thể là cách tốt để đảm bảo rằng trang của bạn tải nhanh và luôn hoạt động nhanh. Nhưng sau đây là ưu điểm: để đảm bảo độ bền, AMP cấm một số mẫu cấu trúc và phần tử HTML thường dẫn đến các trang 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 phải tìm hiểu xem 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:
- Hãy đọc bài viết Cách hoạt động của AMP để hiểu các hạn chế cấp cao về cấu trúc và cách tối ưu hoá bắt buộc của AMP.
- Hãy đọc Thẻ HTML để biết những thẻ HTML mà AMP cho phép và nghiêm cấm, duyệt xem danh mục thành phần AMP để xem các thành phần tuỳ chỉnh mà cộng đồng AMP đã tạo để 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 sử dụng JavaScript tuỳ chỉnh để triển khai các tính năng mà AMP hiện chưa 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, bạn vẫn nên sử dụng AMP bất cứ khi nào có thể, vì độ nhanh được đảm bảo của HTML AMP và Bộ nhớ đệm AMP. Phương pháp AMP kết hợp trong Next.js cung cấp một cách để phân phát các trang AMP theo điều kiện. Tuy nhiên, cách này cũng làm tăng chi phí bảo trì 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 hoạt động nhanh và luôn hoạt động nhanh bằng cách thực thi các mẫu dẫn đến tốc độ nhanh và cấm các mẫu dẫn đến tốc độ chậm. Bộ nhớ đệm AMP và Bộ nhớ đệm AMP là hai cách chính giúp AMP đảm bảo độ nhanh. Nhưng trước khi sử dụng AMP, bạn nên đảm bảo rằng trang này có thể hỗ trợ tất cả các yêu cầu của trang web.