วิธีที่ Next.js ช่วยเพิ่มความรวดเร็วให้กับการนําทางด้วยการดึงข้อมูลเส้นทางล่วงหน้า และวิธีปรับแต่ง
สิ่งที่คุณจะได้เรียนรู้
ในบทความนี้ คุณจะได้เรียนรู้วิธีการทำงานของการกำหนดเส้นทางใน Next.js การเพิ่มประสิทธิภาพด้านความเร็ว และวิธีปรับแต่งให้เหมาะกับความต้องการของคุณมากที่สุด
คอมโพเนนต์ <Link>
คุณไม่จำเป็นต้องตั้งค่าการกำหนดเส้นทางด้วยตนเองใน Next.js
Next.js ใช้การกำหนดเส้นทางแบบระบบไฟล์ ซึ่งช่วยให้คุณสร้างไฟล์และโฟลเดอร์ได้
ภายในไดเรกทอรี ./pages/
:
![ภาพหน้าจอของไดเรกทอรีของหน้าที่มีไฟล์ 3 ไฟล์ ได้แก่index.js, margherita.js และ สับปะรด-พิซซ่า.js](https://web.dev/static/articles/route-prefetching-in-nextjs/image/screenshot-the-pages-dir-81addfb477754.png?authuser=19&hl=th)
หากต้องการลิงก์ไปยังหน้าต่างๆ ให้ใช้
<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 ที่จำเป็นไว้ล่วงหน้าโดยอัตโนมัติเพื่อ
แสดงผลหน้าเว็บที่เชื่อมโยง ซึ่งทำให้การไปยังหน้าใหม่เร็วขึ้น หากคุณ
ด้วยการกำหนดเส้นทางที่กำหนดเอง คุณสามารถใช้ Next.js Route API เพื่อใช้งาน
การโหลดข้อมูลตัวคุณเองล่วงหน้า หลีกเลี่ยงการดาวน์โหลดเนื้อหาโดยไม่จำเป็นด้วยการปิดใช้
การดึงข้อมูลล่วงหน้าสำหรับหน้าที่ไม่ค่อยมีการเข้าชม