วิธีที่ Next.js เพิ่มความเร็วในการไปยังส่วนต่างๆ ด้วยการดึงข้อมูลเส้นทางล่วงหน้าและวิธีปรับแต่ง
สิ่งที่คุณจะได้เรียนรู้
ในโพสต์นี้คุณจะได้เรียนรู้ว่าการกำหนดเส้นทางใน Next.js ทำงานอย่างไร มีการเพิ่มประสิทธิภาพด้านความเร็วอย่างไร และวิธีปรับแต่งเส้นทางให้เหมาะกับความต้องการของคุณมากที่สุด
คอมโพเนนต์ <Link>
ใน Next.js คุณไม่จำเป็นต้องตั้งค่าการกำหนดเส้นทางด้วยตนเอง
Next.js ใช้การกำหนดเส้นทางตามระบบไฟล์ ซึ่งให้คุณสร้างไฟล์และโฟลเดอร์ภายในไดเรกทอรี ./pages/
ได้เท่านั้น ดังนี้
หากต้องการลิงก์ไปยังหน้าต่างๆ ให้ใช้คอมโพเนนต์ <Link>
ซึ่งคล้ายกับวิธีที่คุณใช้องค์ประกอบ <a>
แบบเก่าที่ใช้งานได้ดังนี้
<Link href="/margherita">
<a>Margherita</a>
</Link>
เมื่อคุณใช้คอมโพเนนต์ <Link>
สำหรับการนำทาง Next.js จะทำหน้าที่ต่างๆ ให้คุณมากขึ้นเล็กน้อย โดยปกติแล้ว ระบบจะดาวน์โหลดหน้าเว็บเมื่อคุณคลิกลิงก์ไปยังหน้าดังกล่าว แต่ Next.js จะดึงข้อมูล JavaScript ที่จำเป็นในการแสดงผลหน้าเว็บไว้ล่วงหน้าโดยอัตโนมัติ
เมื่อคุณโหลดหน้าเว็บที่มีลิงก์ไม่กี่ลิงก์ มีโอกาสที่เวลาที่คุณไปตามลิงก์ องค์ประกอบที่อยู่ด้านหลังลิงก์จะถูกดึงข้อมูลไปแล้ว การทำเช่นนี้จะช่วยปรับปรุงการตอบสนองของแอปพลิเคชันโดยทำให้การนำทางไปยังหน้าใหม่รวดเร็วขึ้น
ในแอปตัวอย่างด้านล่าง หน้า index.js
ลิงก์ไปยัง margherita.js
ด้วย <Link>
:
ใช้ Chrome DevTools เพื่อยืนยันว่ามีการดึงข้อมูล margherita.js
ล่วงหน้าแล้ว ดังนี้
1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
คลิกแท็บเครือข่าย
เลือกช่องทำเครื่องหมายปิดใช้แคช
โหลดหน้าเว็บซ้ำ
เมื่อโหลด index.js
แท็บเครือข่ายจะแสดงว่ามีการดาวน์โหลด margherita.js
ด้วย
วิธีการทำงานของการดึงข้อมูลล่วงหน้าโดยอัตโนมัติ
Next.js จะดึงข้อมูลเฉพาะลิงก์ที่ปรากฏในวิวพอร์ตล่วงหน้า และใช้ Intersection
Observer API ในการตรวจหาลิงก์เหล่านั้น และยังปิดใช้การดึงข้อมูลล่วงหน้าเมื่อการเชื่อมต่อเครือข่ายช้าหรือเมื่อผู้ใช้เปิด Save-Data
ไว้อีกด้วย จากการตรวจสอบเหล่านี้ Next.js จะแทรกแท็ก <link
rel="preload">
แบบไดนามิกเพื่อดาวน์โหลดคอมโพเนนต์สำหรับการนำทางที่ตามมา
Next.js จะดึงข้อมูล JavaScript เท่านั้น โดยไม่เรียกใช้ วิธีนี้จะไม่ดาวน์โหลดเนื้อหาเพิ่มเติมที่หน้าที่ดึงข้อมูลล่วงหน้าอาจขอจนกว่าคุณจะไปที่ลิงก์
หลีกเลี่ยงการดึงข้อมูลล่วงหน้าที่ไม่จำเป็น
หากต้องการหลีกเลี่ยงการดาวน์โหลดเนื้อหาที่ไม่จำเป็น คุณสามารถปิดการดึงข้อมูลล่วงหน้าสำหรับหน้าที่มีการเข้าชมน้อยครั้งได้โดยตั้งค่าพร็อพเพอร์ตี้ prefetch
ใน <Link>
เป็น false
ดังนี้
<Link href="/pineapple-pizza" prefetch={false}>
<a>Pineapple pizza</a>
</Link>
ในแอปตัวอย่างที่ 2 นี้ หน้า index.js
มี <Link>
เป็น pineapple-pizza.js
และตั้งค่า prefetch
เป็น false
หากต้องการตรวจสอบกิจกรรมในเครือข่าย ให้ทำตามขั้นตอนจากตัวอย่างแรก เมื่อโหลด index.js
แท็บเครือข่ายสำหรับเครื่องมือสำหรับนักพัฒนาเว็บจะแสดงว่ามีการดาวน์โหลด margherita.js
แล้ว แต่ pineapple-pizza.js
ไม่มีลักษณะดังนี้
การดึงข้อมูลล่วงหน้าด้วยการกำหนดเส้นทางที่กำหนดเอง
คอมโพเนนต์ <Link>
เหมาะสำหรับกรณีการใช้งานส่วนใหญ่ แต่คุณจะสร้างคอมโพเนนต์ของคุณเองเพื่อกำหนดเส้นทางได้ด้วย Next.js ช่วยให้คุณดำเนินการดังกล่าวได้ง่ายขึ้นด้วย API เราเตอร์ที่มีให้บริการใน next/router
หากต้องการทำอะไรบางอย่าง (เช่น ส่งแบบฟอร์ม) ก่อนไปยังเส้นทางใหม่ คุณสามารถกำหนดเส้นทางนั้นในรหัสการกำหนดเส้นทางที่กำหนดเองได้
เมื่อใช้คอมโพเนนต์ที่กำหนดเองสำหรับการกำหนดเส้นทาง คุณสามารถเพิ่มการดึงข้อมูลล่วงหน้าไปยังคอมโพเนนต์เหล่านั้นได้ด้วย
หากต้องการใช้การดึงข้อมูลล่วงหน้าในโค้ดการกำหนดเส้นทาง ให้ใช้เมธอด prefetch
จาก useRouter
ลองดู components/MyLink.js
ในแอปตัวอย่างนี้
การดึงข้อมูลล่วงหน้าจะทำในฮุก useEffect
หากตั้งค่าพร็อพเพอร์ตี้ prefetch
ใน <MyLink>
เป็น true
ระบบจะดึงข้อมูลเส้นทางที่ระบุในพร็อพเพอร์ตี้ href
ล่วงหน้าเมื่อแสดงผล <MyLink>
นั้น
useEffect(() => {
if (prefetch) router.prefetch(href)
});
เมื่อคุณคลิกลิงก์ การกำหนดเส้นทางจะเสร็จสิ้นใน handleClick
ข้อความจะบันทึกในคอนโซลและเมธอด push
จะไปยังเส้นทางใหม่ที่ระบุใน href
ดังนี้
const handleClick = e => {
e.preventDefault();
console.log("Having fun with Next.js.");
router.push(href);
};
ในแอปตัวอย่างนี้ หน้า index.js
มี <MyLink>
ถึง margherita.js
และ pineapple-pizza.js
พร็อพเพอร์ตี้ prefetch
ตั้งค่าเป็น true
ใน /margherita
และเป็น false
ใน /pineapple-pizza
<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza" title="Pineapple pizza" prefetch={false} />
เมื่อโหลด index.js
แท็บเครือข่ายจะแสดงว่าดาวน์โหลด margherita.js
แล้ว และ pineapple-pizza.js
ไม่มีลักษณะดังนี้
เมื่อคลิกลิงก์ใดลิงก์หนึ่ง คอนโซลจะบันทึก "สนุกไปกับ Next.js" และนำทางไปยังเส้นทางใหม่
บทสรุป
เมื่อคุณใช้ <Link>
Next.js จะดึงข้อมูล JavaScript ที่จำเป็นในการแสดงผลหน้าเว็บที่เชื่อมโยงล่วงหน้าโดยอัตโนมัติ ซึ่งทำให้ไปยังหน้าใหม่ๆ ได้เร็วขึ้น หากคุณใช้การกำหนดเส้นทางที่กำหนดเอง คุณสามารถใช้ API ของเราเตอร์ Next.js เพื่อใช้งานการดึงข้อมูลล่วงหน้าด้วยตนเอง หลีกเลี่ยงการดาวน์โหลดเนื้อหาโดยไม่จำเป็นด้วยการปิดใช้การดึงข้อมูลล่วงหน้าสำหรับหน้าที่ไม่ค่อยได้เข้าชม