การแนะนำการนำทางใน NextJS

ในส่วนนี้ของหนังสือเรียน เราจะพูดคุยเกี่ยวกับ การทำงานของลิงก์ใน NextJS

เริ่มต้นด้วยการพูดคุยกันว่ามีอะไรที่พิเศษ เกี่ยวกับลิงก์บ้าง มาดูกัน ที่ลิงก์ในแนวทางต่าง ๆ ในการสร้างเว็บไซต์

เว็บไซต์บน React

สมมติว่าคุณมีเว็บไซต์บน React อย่างที่รู้กัน React คือ SPA - เว็บไซต์ที่ผู้ใช้จะอยู่ บนหน้าเดียวเสมอ คุณสามารถเชื่อมต่อ React Router และผู้ใช้จะคิดว่าเขาได้เยี่ยมชม หน้าเว็บต่าง ๆ ในขณะที่จริง ๆ แล้วเขายังคงอยู่ บนไฟล์เดิม

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

ในรูปแบบนี้ผู้ใช้จะได้รับ โครงร่างเว็บไซต์เมื่อเข้าสู่หน้าเว็บครั้งแรก จากนั้นส่วนต่าง ๆ ของเว็บไซต์ก็จะเปลี่ยนไป ผ่าน JavaScript ในขณะที่เว็บไซต์ สามารถขอข้อมูลจากเซิร์ฟเวอร์ ผ่าน AJAX

วิธีนี้ช่วยลดภาระโฮสติ้ง (ซึ่งมีค่าใช้จ่าย) และยังลด ภาระการใช้แบนด์วิธอินเทอร์เน็ตของผู้ใช้

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

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

เว็บไซต์บนแบ็กเอนด์

สมมติว่าเว็บไซต์ของคุณสร้างขึ้นบน หนึ่งในภาษาแบ็กเอนด์ ตัวอย่างเช่น PHP

ในกรณีนี้ เมื่อผู้ใช้ คลิกที่ลิงก์ หน้าเว็บไซต์จะ โหลดทั้งหมดทุกครั้ง

ปัญหาคือ ส่วนสำคัญของหน้าเว็บ ผู้ใช้มีอยู่แล้ว อย่างที่คุณรู้ บนหน้าเว็บมักจะเปลี่ยนเฉพาะเนื้อหา และข้อมูลเมตา ในขณะที่ส่วนอื่น ๆ ทั้งหมดยังคง ไม่เปลี่ยนแปลง

ทำไมเราต้องดาวน์โหลดส่วนอื่น ๆ ในเมื่อมีเพียง เนื้อหาเท่านั้นที่เปลี่ยนไป? นี่เป็นการสร้างภาระ ที่เพิ่มขึ้นให้กับเซิร์ฟเวอร์และแบนด์วิธอินเทอร์เน็ต

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

โดยสรุป หากเว็บไซต์ของเราอยู่บนแบ็กเอนด์ล้วน ๆ เราจะส่งข้อมูลที่ไม่จำเป็นจำนวนมากผ่านเครือข่าย

อย่างไรก็ตาม ในกรณีนี้เราไม่มี ปัญหาเรื่อง SEO สำหรับ URL ที่ร้องขอ จะส่งคืนเนื้อหาแบบคงที่ ที่เครื่องมือค้นหาเข้าใจ

เว็บไซต์บน NextJS

NextJS รวมทั้งสองวิธีเข้าด้วยกัน เมื่อผู้ใช้ป้อน URL ลงในแถบที่อยู่ โดยตรง ระบบจะส่งเนื้อหาแบบคงที่ ของหน้าเว็บกลับมา

แต่เมื่อผู้ใช้เริ่มคลิก ที่ลิงก์บนเว็บไซต์ของเรา หน้าเว็บไซต์ จะไม่โหลดใหม่ทั้งหมด แต่จะดึงข้อมูล ที่ผู้ใช้ต้องการผ่าน AJAX

เมื่อเครื่องมือค้นหาเยี่ยมชมเว็บไซต์ของเรา มันจะเห็นเนื้อหาแบบคงที่ที่ต้องการ และเมื่อผู้ใช้เยี่ยมชมเว็บไซต์ของเรา เว็บไซต์ของเราจะเริ่มทำงานคล้ายกับ SPA

และที่สำคัญที่สุด NextJS ทำ ทั้งหมดนี้โดยอัตโนมัติ! เราไม่ต้อง กังวลเกี่ยวกับสิ่งนี้ - มันจะจัดการทุกอย่างให้เอง สวยงาม!

ในบทเรียนต่อไป เราจะมาทำความเข้าใจ วิธีการทำให้ NextJS ทำงานตามที่อธิบาย ไว้