Foundations & Mental Model
islands architecture, zero-JS by default, .astro component และ static vs on-demand rendering เริ่ม →
Astro Deep Dive
คอร์สแบบ standalone ระดับ intermediate→advanced ว่าด้วย Astro 7 ตั้งแต่ islands architecture และ .astro component ไปจนถึง client directives, content collections, on-demand rendering, Actions, server islands และ view transitions — สอนผ่าน code ที่ annotate และไดอะแกรมที่แสดงว่า Astro ส่งอะไรไป browser และทำไม
สิ่งที่คุณจะได้เรียน
หัวข้อที่มีชื่อว่า “สิ่งที่คุณจะได้เรียน”Components & Templating
Astro syntax, scoped styles & scripts, slots & composition และ Markdown/MDX ประกอบ →
Islands & Client Interactivity
client directives, UI framework integrations, sharing state และ server islands hydrate →
Content & Data
content collections & Content Layer API, Zod schema, data fetching และ dynamic routes ออกแบบ →
Server-Side Astro
SSR & adapters, API endpoints, Actions และ middleware & sessions serve →
Rendering, Performance & UX
view transitions ด้วย ClientRouter, images & assets, zero-JS default และ caching optimize →
Tooling, Integrations & Production
config & integrations, TypeScript & content types, testing และ deployment ship →
Astro ทำงานอย่างไรข้างใน
output จริงของ compiler, วงจร hydration ของ astro-island, data store ของ content layer, request pipeline และ build pipeline — อ้างจาก source ของ Astro 7 เอง ดูข้างใน →
อ่านโค้ด Astro ที่ AI เขียน
catalog 22 bug ที่โค้ด Astro จาก AI ทำพลาด, checklist สำหรับ review, เครื่องมือตรวจสอบ และ worked review 3 ชุด — ทุก bug พิสูจน์จริง review →
อภิธานศัพท์
74 คำตั้งแต่ island ถึง Sätteri พร้อมเวอร์ชัน Astro ที่เพิ่มหรือถอดแต่ละคำ ค้นหา →
คอร์สนี้ทำงานยังไง
หัวข้อที่มีชื่อว่า “คอร์สนี้ทำงานยังไง”เข้าใจ model ก่อน แล้วค่อยดู code
ทุกหัวข้อเริ่มจาก model — islands, server-first render, content pipeline — พอเข้าใจแล้วตัวเลือกของ Astro จะเลิกดูสุ่ม ๆ และกลายเป็นเรื่องที่สมเหตุสมผล
Astro 7 ที่ verify แล้ว
เขียนบน Astro 7 (native Rust compiler, Vite 8 กับ Rolldown, Markdown pipeline ชื่อ Sätteri, route caching ที่ stable แล้ว) และตรวจสอบกับ official docs — Content Layer API (src/content.config.ts พร้อม loader), <ClientRouter />, server islands, Actions และ sessions ถูกสอนตามที่มีอยู่จริงวันนี้
เน้นการออกแบบ ไม่ใช่แค่ syntax
ไม่ใช่แค่ “นี่คือ client directive” แต่เป็น “ทำไมถึงส่ง island แทนการ hydrate ทั้งหน้า และ directive ไหนที่เหมาะ” คุณจะ reason ได้ว่าอะไรถูกส่งไป browser อย่างมั่นใจ
ไดอะแกรมที่อธิบายได้
islands hydration, render pipeline, content collection flow และ server islands เป็นไดอะแกรม Mermaid ที่รองรับธีม สองภาษา (English / ไทย) พร้อมบันทึกความคืบหน้า quiz