PlusMagi's Blog By Pitt Phunsanit Backend,Business,Database Astro: Dynamic Routes การส่ง Parameter ผ่าน URL และการใช้ฟังก์ชัน getStaticPaths()

Astro: Dynamic Routes การส่ง Parameter ผ่าน URL และการใช้ฟังก์ชัน getStaticPaths()

ในโลกของการพัฒนาเว็บไซต์สมัยใหม่ การสร้างหน้าเว็บที่มีเนื้อหาหลากหลายและเปลี่ยนแปลงได้ตามเงื่อนไข (Dynamic Content) เป็นเรื่องที่หลีกเลี่ยงไม่ได้ แม้ว่าเครื่องมืออย่าง Astro จะมีฟังก์ชันเฉพาะอย่าง getStaticPaths() เพื่อจัดการการสร้างเส้นทางแบบไดนามิก (Dynamic Routes) ในขั้นตอน Build Time แต่หัวใจสำคัญที่ขับเคลื่อนเส้นทางเหล่านั้นคือฐานข้อมูลที่แข็งแกร่งอย่าง PostgreSQL

บทความนี้จะพาคุณไปดูแนวคิดการทำงานของ Dynamic Routing และการส่งค่า Parameter ผ่าน URL โดยใช้ไวยากรณ์ของ PostgreSQL เพื่อให้เห็นภาพว่าฐานข้อมูลทำหน้าที่เป็นแหล่งข้อมูลหลักในการกำหนดขอบเขตและดึงข้อมูลสำหรับทุกเส้นทางที่เป็นไปได้ (Potential Paths) อย่างไร

💡 แนวคิด: การจำลอง getStaticPaths() ด้วย PostgreSQL

ฟังก์ชัน getStaticPaths() ใน Astro มีหน้าที่สร้างรายการของพารามิเตอร์ทั้งหมดที่เว็บไซต์จะต้องรองรับล่วงหน้า (เช่น รายการ Slug ของสินค้าทั้งหมด) ในบริบทของ PostgreSQL เราจะใช้การ Query ข้อมูลเพื่อดึงรายการ ID หรือ Slug ที่ไม่ซ้ำกันออกมา ซึ่งเป็นการจำลองการสร้างรายการเส้นทางที่จำเป็นทั้งหมด

ขั้นตอนที่ 1: การค้นหารายการเส้นทางทั้งหมด (Identifying All Paths)

สมมติว่าเรามีตาราง products และต้องการสร้างหน้าเว็บสำหรับสินค้าทุกชิ้น เราต้องดึงรายการ slug ทั้งหมดออกมาเพื่อกำหนดขอบเขตของ Dynamic Routes:

SQL

SELECT DISTINCT slug FROM products;

ผลลัพธ์ที่ได้คือรายการของ Slug เช่น ‘apple’, ‘banana’, ‘orange’ ซึ่งเป็นตัวกำหนดว่าเว็บไซต์ของเราต้องมีหน้าย่อยสำหรับแต่ละ Slug เหล่านี้

⚙️ การส่ง Parameter และการดึงข้อมูลเฉพาะเส้นทาง

เมื่อเราทราบรายการ Slug ทั้งหมดแล้ว ขั้นตอนต่อไปคือการจำลองการที่ระบบรับค่า Parameter (เช่น /product/banana) และใช้ค่านี้ในการดึงข้อมูลที่ถูกต้องจากฐานข้อมูลเท่านั้น เราจะใช้ Common Table Expressions (CTE) หรือการ JOIN เพื่อจำลองการส่ง Parameter เข้าไปใน Query:

SQL

WITH paths AS ( -- จำลองการส่ง Parameter 'banana' เข้ามา -- SELECT 'banana' AS current_slug) SELECT p.name, p.description FROM products p WHERE p.slug = (SELECT current_slug FROM paths);

ในตัวอย่างนี้ paths ทำหน้าที่เหมือนการรับค่า Parameter จาก URL โดยตรง ทำให้เราสามารถจำกัดขอบเขตการค้นหา (Filtering) ไปยังแถวข้อมูลที่ตรงกับ Slug ที่ส่งมาเท่านั้น ซึ่งเป็นหลักการทำงานพื้นฐานของการดึงข้อมูลแบบ Dynamic

🚀 การขยายผลด้วยการจัดการข้อมูลที่ซับซ้อน

หากข้อมูลของเราซับซ้อนขึ้น เช่น การดึงข้อมูลสินค้าที่เกี่ยวข้อง (Related Products) เราสามารถใช้ PostgreSQL ในการ JOIN ข้อมูลหลายตารางพร้อมกันเพื่อรองรับการแสดงผลที่สมบูรณ์แบบ:

SQL

SELECT p1.name, p2.name FROM products p1 JOIN product_relations pr ON p1.id = pr.product_id JOIN products p2 ON pr.related_product_id = p2.id WHERE p1.slug = 'apple' AND p2.slug = 'banana';

การใช้ PostgreSQL ในลักษณะนี้ทำให้มั่นใจได้ว่าทุกเส้นทางที่ถูกสร้างขึ้น (Dynamic Route) จะดึงข้อมูลที่ถูกต้องและสัมพันธ์กันอย่างมีประสิทธิภาพสูงสุด

✅ บทสรุป

แม้ว่า Astro จะเป็นเครื่องมือที่ช่วยให้การสร้าง Dynamic Routes ง่ายขึ้น แต่ PostgreSQL ยังคงเป็นเสาหลักที่รับผิดชอบในการจัดเก็บ จัดระเบียบ และส่งมอบข้อมูลตาม Parameter ที่ร้องขอ การทำความเข้าใจว่าการ Query ข้อมูลแบบจำกัดขอบเขต (Scoped Query) และการใช้ CTEs เพื่อกำหนดขอบเขตของข้อมูลที่ต้องการ คือหัวใจสำคัญที่ทำให้เว็บไซต์ที่สร้างด้วยแนวคิด Dynamic Routes สามารถทำงานได้อย่างรวดเร็วและมีประสิทธิภาพสูงในทุกสเกล

Exit mobile version