Content & Data

ปัญหาเรื่อง content

เว็บ Astro ส่วนใหญ่เป็น content site อยู่แล้ว ทั้งบล็อกที่มีโพสต์เป็นสิบ, docs ที่มีหน้าเป็นร้อย, หรือ catalog สินค้าที่ดึงมาจาก CMS คำถามที่โมดูลนี้ตอบคือ จะเอา content พวกนั้น ไม่ว่าจะเป็นไฟล์ Markdown, JSON, หรือ API ปลายทาง เข้ามาเป็นข้อมูลที่มี type และผ่าน validation แล้ว query ได้ในหน้าเพจของเราได้ยังไง?

คำตอบของ Astro คือ Content Layer API เราประกาศ collection ขึ้นมา แต่ละอันมี loader ที่อ่าน content จากที่ไหนสักที่ (ไฟล์ในเครื่อง หรือ endpoint ปลายทาง) และมี schema ที่ validate โครงสร้าง จากนั้นก็ query collection ด้วย getCollection และ getEntry แล้ว render body ของแต่ละ entry ด้วย render ผลลัพธ์คือ content ที่ทำงานเหมือน database เล็ก ๆ ที่มี type สร้างขึ้นตอน build

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่จะได้เรียน
Content collections	Content Layer API: `defineCollection`, `loader`, `getCollection` และ `render`
Schemas & references	validate frontmatter ด้วย Zod และเชื่อม collection ด้วย `reference()`
Data fetching	top-level `await fetch()`, ข้อมูลแบบ build-time vs request-time, headless CMS
Dynamic routes	route แบบ file-based `[slug].astro`, `getStaticPaths()` และ pagination

flowchart LR
  files["Markdown / JSON / API"] --> loader["loader (glob / file)"]
  loader --> schema["schema validate (Zod)"]
  schema --> query["getCollection / getEntry"]
  query --> page["page render HTML"]

จาก content ดิบสู่หน้าเพจที่ render แล้ว

เรื่องใหญ่ที่สุดที่ต้องรู้

ถ้าคุณเคยใช้ Astro ก่อนเวอร์ชัน 5 การเปลี่ยนแปลงที่ใหญ่ที่สุดคือ collection ไม่ใช่โฟลเดอร์เวทมนตร์อีกต่อไป เมื่อก่อนแค่โยน Markdown ลงใน src/content/blog/ ก็กลายเป็น collection ให้อัตโนมัติ แต่ใน Astro 6 ทุก collection ต้องประกาศ loader ใน src/content.config.ts วิธีนี้ชัดเจนกว่า และทรงพลังกว่ามาก เพราะ API เดียวกันโหลดได้ทั้งไฟล์ในเครื่อง และ ข้อมูลจากปลายทาง ผ่าน interface ที่มี type ตัวเดียว