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

ข้อควรระวัง: ตัวอย่าง Glitch จะทำงานในโหมดการใช้งานจริง เนื่องจากการดึงข้อมูลล่วงหน้าขึ้นอยู่กับเงื่อนไขการท่องเว็บ และมีการเปิดใช้ในเวอร์ชันที่ใช้งานจริงที่ได้รับการเพิ่มประสิทธิภาพเท่านั้น หากต้องการเปลี่ยนเป็นโหมดการพัฒนา โปรดดู README.md ในตัวอย่างภาพแตก

หมายเหตุ: เนื่องจาก <link rel="preload"> จะขอทรัพยากรที่มีลำดับความสำคัญสูง เบราว์เซอร์จึงคาดหวังว่าจะมีการใช้ทรัพยากรเหล่านั้นทันที ซึ่งจะเรียกใช้คำเตือนของ Console ลำดับความสำคัญในการดึงข้อมูลจะพร้อมใช้งานใน Chrome ซึ่งจะทำให้ Next.js สามารถระบุลำดับความสำคัญที่ต่ำกว่าสำหรับทรัพยากรที่ไม่จำเป็นต้องใช้ <link rel="preload" fetchpriority="low"> ในทันที

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

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