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