ปัญหา SEO และเฟรมเวิร์ก NextJS

เมื่อเราพัฒนาเว็บไซต์ สิ่งสำคัญคือเราต้องเข้าใจว่า เราจะโปรโมทเว็บไซต์นี้ในเครื่องมือค้นหาหรือไม่ เครื่องมือค้นหาที่พูดถึงคือเว็บไซต์เฉพาะทาง เช่น Google หรือ Yandex ที่ผู้ใช้ค้นหา ข้อมูลที่ต้องการ

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

และนี่คือปัญหาที่รอเราอยู่: เว็บไซต์ที่พัฒนาบน React จะไม่ได้รับการโปรโมตในเครื่องมือค้นหา ประเด็นคือเนื้อหาของหน้าเว็บไซต์ดังกล่าว ถูกสร้างขึ้นแบบไดนามิกในเบราว์เซอร์ผ่าน JavaScript เครื่องมือค้นหายังไม่สามารถประมวลผลหน้าเว็บดังกล่าวได้ ดังนั้นเว็บไซต์ดังกล่าวจะไม่สามารถแสดงผลได้อย่างเต็มที่ สำหรับคำค้นหา

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

เฟรมเวิร์ก NextJS นี้เองที่แก้ปัญหาดังกล่าว มันอนุญาตให้เขียนโค้ด JSX บนฝั่งเซิร์ฟเวอร์ เซิร์ฟเวอร์แปลง JSX นี้เป็น HTML ปกติ และส่งไปยังเบราว์เซอร์ ดังนั้น โค้ด HTML ที่จำเป็นสำหรับการทำงานที่ถูกต้อง ของเครื่องมือค้นหา กับเว็บไซต์ของเราจะถูกส่งไปยังฝั่งไคลเอ็นต์

วิธีการทำสิ่งนี้อย่างละเอียด คือสิ่งที่เราจะศึกษา ภายในตำราเรียนนี้

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

เอาล่ะ ไปกันเลย :)