ดูข้อมูลเกี่ยวกับข้อดีและข้อเสียของการรองรับ AMP ในแอป Next.js
AMP เป็นเฟรมเวิร์กคอมโพเนนต์เว็บที่รับประกันการโหลดหน้าเว็บที่รวดเร็ว Next.js รองรับ AMP ในตัว
สิ่งที่คุณจะได้เรียนรู้
คำแนะนำนี้จะอธิบายสั้นๆ เกี่ยวกับวิธีที่ AMP รับประกันการโหลดหน้าเว็บที่รวดเร็ว จากนั้นอธิบายวิธีต่างๆ ที่คุณรองรับ AMP ในแอป Next.js ได้ และช่วยคุณเลือกแนวทางที่เหมาะกับคุณที่สุด
กลุ่มเป้าหมายของคู่มือนี้คือนักพัฒนาเว็บที่ตัดสินใจใช้ Next.js แต่ยังไม่แน่ใจว่าควรรองรับ AMP หรือไม่
วิธีที่ AMP รับประกันการโหลดหน้าเว็บที่รวดเร็ว
AMP มีกลยุทธ์หลัก 2 ประการในการรับประกันความรวดเร็ว ดังนี้
- AMP HTML: HTML รูปแบบที่จํากัดซึ่งกําหนดให้ต้องเพิ่มประสิทธิภาพบางอย่างและห้ามรูปแบบสถาปัตยกรรมที่ทําให้ช้า ดูวิธีการทำงานของ AMP เพื่อดูภาพรวมระดับสูงเกี่ยวกับการเพิ่มประสิทธิภาพและข้อจํากัด
- แคช AMP: แคชเนื้อหาที่เครื่องมือค้นหาบางรายการ เช่น Google และ Bing ใช้ ซึ่งใช้การแสดงผลล่วงหน้าเพื่อเร่งความเร็วในการโหลดหน้าเว็บ ดูเหตุผลที่ต้องมีแคช AMP เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับข้อดีและข้อเสียของแคช และหน้า AMP ของฉันได้รับการแคชได้อย่างไรเพื่อทําความเข้าใจวิธีที่หน้า AMP ของคุณเข้าไปอยู่ในแคช
วิธีใช้ AMP ใน Next.js
การใช้ AMP ใน Next.js มี 2 วิธีดังนี้
- แนวทาง Hybrid AMP ช่วยให้คุณสร้างหน้า Next.js เวอร์ชัน AMP ประกอบกันได้
- แนวทาง AMP เท่านั้นช่วยให้คุณกำหนดให้ AMP เป็นตัวเลือกเดียวสำหรับหน้าเว็บได้
แม้ว่าโดยทั่วไปจะถือว่า Next.js เป็นเฟรมเวิร์ก React แต่คุณควรทราบว่าเมื่อใช้ Next.js เพื่อแสดงหน้า AMP คุณจะไม่สามารถเรียกใช้คอมโพเนนต์ React ฝั่งไคลเอ็นต์ได้อีกต่อไป เนื่องจากคอมโพเนนต์ React ไม่ใช่คอมโพเนนต์ AMP ที่ถูกต้อง กล่าวคือ Next.js ไม่ใช่เฟรมเวิร์ก React อีกต่อไป แต่เป็นเครื่องมือเทมเพลตฝั่งเซิร์ฟเวอร์สำหรับสร้างหน้า AMP
วิธีตัดสินใจว่าจะใช้แนวทาง AMP แบบผสมหรือ AMP เท่านั้น
หากคุณให้ความสำคัญกับประสิทธิภาพการโหลด หน้า AMP เท่านั้นอาจเป็นวิธีที่ดีในการทำให้หน้าเว็บโหลดเร็วและยังคงเร็วอยู่เสมอ แต่ข้อจํากัดคือ AMP ไม่อนุญาตให้ใช้รูปแบบสถาปัตยกรรมและองค์ประกอบ HTML บางรายการที่มักทําให้หน้าเว็บช้า เพื่อรับประกันความรวดเร็ว ตัวอย่างเช่น AMP ไม่อนุญาตให้ใช้ JavaScript แบบซิงค์ที่กำหนดเองเนื่องจากทรัพยากรที่บล็อกการแสดงผลเป็นสาเหตุที่พบบ่อยของการโหลดหน้าเว็บช้า
หากต้องการทราบว่าแนวทาง AMP เท่านั้นเหมาะกับคุณหรือไม่ คุณต้องพิจารณาว่าโค้ดส่วนหน้าทั้งหมดแสดงใน AMP HTML ได้หรือไม่ โดยทำดังนี้
- อ่านวิธีการทํางานของ AMP เพื่อให้เข้าใจข้อจํากัดด้านสถาปัตยกรรมระดับสูงและการเพิ่มประสิทธิภาพที่จําเป็นของ AMP
- อ่านแท็ก HTML เพื่อดูว่า AMP อนุญาตและไม่อนุญาตแท็ก HTML ใดบ้าง เรียกดูแคตตาล็อกคอมโพเนนต์ AMP เพื่อดูคอมโพเนนต์ที่กําหนดเองซึ่งชุมชน AMP สร้างขึ้นเพื่อแก้ปัญหา Use Case ที่พบได้ทั่วไป และดู amp-script เพื่อดูวิธีใช้ JavaScript ที่กําหนดเองเพื่อติดตั้งใช้งานฟีเจอร์ที่ AMP ยังไม่รองรับในขณะนี้
แม้ว่าแนวทาง AMP เท่านั้นจะไม่เหมาะกับหน้าเว็บของคุณ แต่คุณก็ควรใช้ AMP เมื่อเป็นไปได้ เนื่องจาก AMP HTML และแคช AMP รับประกันความรวดเร็ว แนวทาง AMP แบบผสมใน Next.js มีวิธีแสดงหน้า AMP แบบมีเงื่อนไข อย่างไรก็ตาม วิธีนี้ยังทำให้ต้นทุนการบำรุงรักษาสูงขึ้นด้วยเนื่องจากคุณต้องดูแลรักษาหน้าเว็บแต่ละหน้า 2 เวอร์ชัน
บทสรุป
AMP รับประกันว่าเว็บไซต์จะทำงานได้อย่างรวดเร็วและคงความเร็วไว้ได้ด้วยการบังคับใช้รูปแบบที่ทําให้เว็บไซต์ทำงานได้รวดเร็วและห้ามใช้รูปแบบที่ทําให้เว็บไซต์ทำงานช้า AMP HTML และแคช AMP เป็น 2 วิธีหลักที่ AMP รับประกันความรวดเร็ว แต่ก่อนที่จะนำ AMP มาใช้ คุณควรตรวจสอบว่า AMP รองรับข้อกําหนดทั้งหมดของเว็บไซต์