พื้นฐานและ Mental Model ของ Astro

ไอเดียในประโยคเดียว

Astro render หน้าเว็บเป็น HTML บน server (ตอน build หรือตอนแต่ละ request) แล้วส่ง JavaScript ไป browser เป็นศูนย์โดย default — คุณเลือกที่จะ เปิด interactivity เอง ทีละ island เนื้อหาส่วนใหญ่ของ content site เป็น static อยู่แล้ว Astro เลยยึดตรงนั้นเป็น default และทำให้ส่วนที่ interactive ชัดเจนขึ้นมา

ทุก feature ของ Astro — islands, client directives, content collections, server islands — เป็นผลพวงจากคำมั่นข้อเดียว: ส่ง HTML ที่เสร็จแล้วไปให้ browser และส่งเฉพาะ JavaScript ที่จำเป็นจริง ๆ เท่านั้น

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

บทเรียน	สิ่งที่คุณจะได้เรียน
ทำไมต้อง Astro และ islands	islands architecture และแนวคิด zero-JS-by-default
Project และ .astro files	โครงสร้างโปรเจกต์และ `.astro` component (frontmatter + template)
The component model	Astro components, props, slots และ scoped styles
Rendering และ output modes	Static (SSG) vs on-demand (SSR) และ build ทำงานยังไง

เลนส์สำหรับทั้งคอร์ส

สองไอเดียนี้อธิบายเกือบทุกอย่างที่ Astro ทำ:

flowchart TB
  html["Server-first: render เป็น HTML
(ตอน build หรือแต่ละ request)"] --> ship["ส่ง HTML ที่เสร็จแล้ว
ไม่มี JS โดย default"]
  islands["Islands: เปิด interactivity
ต่อ component ไม่ใช่ต่อหน้า"] --> ship
  ship --> fast["หน้าเว็บเร็ว
JavaScript น้อยที่สุด"]

สองไอเดียที่ทุกอย่างต่อยอดมา

เพราะ Astro เป็น server-first component ของคุณจะรันเพื่อผลิต HTML — code ของ framework และ templating ไม่มีทางไปถึง browser
เพราะ interactivity เป็นแบบ opt-in ผ่าน islands หน้าหนึ่งจึงเป็น static HTML ได้ถึง 99% โดยมี widget เล็ก ๆ ตัวเดียวที่ hydrate แทนที่จะส่งทั้ง framework ไปรันทั้งหน้า

จับสองข้อนี้ไว้ แล้วดีไซน์ของ Astro จะเลิกรู้สึกเหมือนกองของ directive สุ่ม ๆ และกลายเป็นการเดิมพันเดียวที่สอดคล้องกัน