กำหนดเส้นทางการดึงข้อมูลล่วงหน้าใน Next.js

วิธีที่ Next.js เพิ่มความเร็วในการไปยังส่วนต่างๆ ด้วยการดึงข้อมูลเส้นทางล่วงหน้าและวิธีปรับแต่ง

Milica Mihajlija

สิ่งที่คุณจะได้เรียนรู้

ในโพสต์นี้คุณจะได้เรียนรู้ว่าการกำหนดเส้นทางใน 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. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ

1. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ

2. คลิกแท็บเครือข่าย

3. เลือกช่องทำเครื่องหมายปิดใช้แคช

4. โหลดหน้าเว็บซ้ำ

เมื่อโหลด 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 เพื่อใช้งานการดึงข้อมูลล่วงหน้าด้วยตนเอง หลีกเลี่ยงการดาวน์โหลดเนื้อหาโดยไม่จำเป็นด้วยการปิดใช้การดึงข้อมูลล่วงหน้าสำหรับหน้าที่ไม่ค่อยได้เข้าชม