Tìm hiểu về lợi ích và những điểm đánh đổi khi hỗ trợ AMP trong ứng dụng Next.js
AMP là một khung thành phần web giúp cải thiện thời gian tải trang. 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ải trang nhanh, sau đó giải thích các cách khác nhau để bạn có thể hỗ trợ AMP trong ứng dụng Next.js, rồi giúp bạn quyết định phương pháp nào phù hợp nhất với mình.
Đối tượng mục tiêu của hướng dẫn này là nhà phát triển web đã quyết định sử dụng Next.js nhưng không chắc chắn về việc có nên 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ốc độ:
- HTML AMP: Một 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á nhất định và cấm các mẫu cấu trúc dẫn đến tình trạng chậm. Hãy xem bài viết Cách hoạt động của AMP để biết thông tin tổng quan cấp cao về các hoạt động tối ưu hoá và quy định hạn chế.
- Bộ nhớ đệm AMP: Bộ nhớ đệm nội dung được một số công cụ tìm kiếm (chẳng hạn như Google và Bing) sử dụng, dùng tính năng kết xuất trước để tăng tốc độ tải trang. Hãy xem bài viết Tại sao Bộ nhớ đệm AMP tồn tại để tìm hiểu thêm về lợi ích và sự đánh đổi của bộ nhớ đệm, đồng thời xem 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 trang AMP của bạn được đưa 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 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 đặ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à một khung React, nhưng bạn cần hiểu rằng khi sử dụng Next.js để phân phát 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ì các 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 nên sử dụng phương pháp AMP kết hợp hay chỉ AMP
Nếu bạn thực sự quan tâm đến hiệu suất tải, thì trang chỉ có AMP có thể là một cách hay để đảm bảo rằng trang của bạn tải nhanh và duy trì tốc độ đó. Nhưng có một điều cần lưu ý: để đảm bảo tốc độ, AMP cấm một số mẫu kiến trúc và phần tử HTML thường khiến 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ùng 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 bạn có thể được biểu thị bằng HTML AMP hay không:
- Đọc bài viết Cách hoạt động của AMP để hiểu các quy định hạn chế về cấu trúc cấp cao và các hoạt động tối ưu hoá bắt buộc của AMP.
- Đọ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 để 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 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ùng AMP không phù hợp với trang của bạn, bạn vẫn nên sử dụng AMP bất cứ khi nào có thể, vì tốc độ 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 trang AMP theo điều kiện. Tuy nhiên, phương pháp này cũng làm tăng chi phí bảo trì vì bạn phải duy trì hai phiên bản cho 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 độ đó bằng cách thực thi các mẫu giúp tăng tốc độ và cấm các mẫu làm chậm tốc độ. HTML AMP và Bộ nhớ đệm AMP là hai cách chính mà AMP đảm bảo tốc độ. Nhưng trước khi áp 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.