Astro คืออะไร: Framework สำหรับสร้างเว็บที่เร็วที่สุด

Astro คืออะไร

Astro เป็น web framework ที่ออกแบบมาเพื่อสร้างเว็บไซต์ที่เร็วมาก โดยใช้แนวคิด Islands Architecture ที่ส่ง HTML ล้วนๆ ไปยัง browser โดยไม่มี JavaScript เลย ยกเว้นส่วนที่ต้องการ interactivity จริงๆ

ทำไม Astro ถึงเร็ว

• Zero JS by default — ไม่ส่ง JavaScript ไปยัง browser เลย
• Server-first — render ทุกอย่างบน server
• Islands Architecture — hydrate เฉพาะ component ที่ต้องการ

ติดตั้ง Astro

npm create astro@latest my-site
cd my-site
npm run dev

โครงสร้างโปรเจ็ค

my-site/
  src/
    pages/       # ทุกไฟล์ที่นี่กลายเป็น route
    components/  # Astro components
    layouts/     # Layout templates
    content/     # Markdown/MDX content
  public/        # Static assets
  astro.config.mjs

Astro Component

---
// Component Script (runs on server)
const greeting = 'สวัสดี';
const { name } = Astro.props;
---

<!-- Component Template -->
<h1>{greeting}, {name}!</h1>
<p>ยินดีต้อนรับสู่ Astro</p>

<style>
  h1 { color: #ff5d01; }
</style>

Pages

---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---

<Layout title="หน้าหลัก">
  <main>
    <h1>ยินดีต้อนรับ</h1>
    <Card title="Astro" body="Framework ที่เร็วที่สุด" />
  </main>
</Layout>

เปรียบเทียบกับ Framework อื่น

Framework	JS ที่ส่ง	Use case
Astro	0KB (default)	Content sites, blogs
Next.js	~70KB+	Full-stack apps
Nuxt	~80KB+	Vue apps
SvelteKit	~10KB+	Interactive apps

สรุป

Astro เหมาะกับ content-heavy sites เช่น blog, documentation, marketing pages ที่ต้องการ performance สูงและ SEO ดีครับ