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

เมื่อโหลดหน้าเว็บที่มีลิงก์ 2-3 รายการ มีโอกาสที่ระบบจะดึงข้อมูลคอมโพเนนต์ที่อยู่เบื้องหลังลิงก์นั้นมาแล้วก่อนที่คุณจะคลิกลิงก์ ซึ่งจะช่วยปรับปรุง การตอบสนองของแอปพลิเคชันด้วยการทำให้การไปยังหน้าใหม่เร็วขึ้น

ในแอปตัวอย่าง หน้า index.js จะลิงก์ไปยัง margherita.js โดยมี <Link> ดังนี้

ใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อยืนยันว่ามีการดึงข้อมูลล่วงหน้าของ margherita.js โดยทำดังนี้ 1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
2. คลิกแท็บเครือข่าย
3. เลือกช่องทำเครื่องหมายปิดใช้แคช
4. โหลดหน้าซ้ำ

เมื่อโหลด index.js แท็บเครือข่ายจะแสดงว่ามีการดาวน์โหลด margherita.js ด้วย

วิธีการทำงานของการดึงข้อมูลล่วงหน้าอัตโนมัติ

Next.js จะดึงข้อมูลล่วงหน้าเฉพาะลิงก์ที่ปรากฏใน Viewport และใช้ 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> to pineapple-pizza.js โดยตั้งค่า prefetch เป็น false ดังนี้

หากต้องการตรวจสอบกิจกรรมเครือข่าย ให้ทำตามขั้นตอนจากตัวอย่างแรก เมื่อโหลด index.js แท็บเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บจะแสดงว่ามีการดาวน์โหลด margherita.js แต่ไม่มีการดาวน์โหลด pineapple-pizza.js

ดึงข้อมูลล่วงหน้าด้วยการกำหนดเส้นทางที่กำหนดเอง

<Link> คอมโพเนนต์เหมาะสำหรับกรณีการใช้งานส่วนใหญ่ แต่คุณก็สร้างคอมโพเนนต์ของคุณเองเพื่อทำการกำหนดเส้นทางได้เช่นกัน Next.js ช่วยให้คุณทำสิ่งนี้ได้ง่ายขึ้นด้วย router 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 ดังนี้

เมื่อคลิกลิงก์ใดลิงก์หนึ่ง Console จะบันทึกข้อความ "สนุกกับ Next.js" และไปยังเส้นทางใหม่

บทสรุป

เมื่อใช้ <Link>, Next.js จะดึงข้อมูล JavaScript ที่จำเป็นต่อการแสดงผลหน้าเว็บที่ลิงก์ไว้ล่วงหน้าโดยอัตโนมัติ ซึ่งจะช่วยให้การไปยังหน้าใหม่เร็วขึ้น หากใช้การกำหนดเส้นทางที่กำหนดเอง คุณสามารถใช้ Next.js Router API เพื่อติดตั้งใช้งาน การดึงข้อมูลล่วงหน้าด้วยตนเองได้ หลีกเลี่ยงการดาวน์โหลดเนื้อหาโดยไม่จำเป็นด้วยการปิดใช้ การดึงข้อมูลล่วงหน้าสำหรับหน้าเว็บที่เข้าชมไม่บ่อย