Astro คืออะไร? สร้างเว็บแรกที่โหลดไว เพราะไม่แบก JavaScript เกินจำเป็น

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

Astro เป็นเครื่องมือสร้างเว็บที่คิดกลับกัน คือส่งหน้าเว็บไปเป็น HTML ล้วนก่อน แล้วค่อยแนบ JavaScript ไปเฉพาะส่วนที่ต้องกดได้จริง บทความนี้จะพาสร้างเว็บแรกด้วย Astro ตั้งแต่ติดตั้ง เพิ่มหน้า ใส่ปุ่มกด ไปจนได้ไฟล์พร้อมขึ้นโฮสต์ครับ

จบบทความนี้คุณจะ:

• อธิบายได้ว่าทำไม Astro ถึงโหลดไว และ Island คืออะไร
• สร้างโปรเจกต์ Astro แล้วเปิดดูที่ localhost:4321
• เพิ่มหน้าใหม่ได้แค่สร้างไฟล์ในโฟลเดอร์ src/pages
• ใส่ปุ่มกดที่เขียนด้วย React โดยให้ JavaScript โหลดเฉพาะตอนที่ต้องใช้
• build เว็บเป็นไฟล์ในโฟลเดอร์ dist/ พร้อมเอาไปฝากโฮสต์

ถ้าอยากเห็นภาพรวมก่อน ดูคลิปสั้นนี้ได้เลย ยาวแค่ 1 นาทีครับ

เว็บทั่วไปแบกเป้ แต่ Astro เดินตัวเปล่า

ลองนึกภาพคนสองคนเดินขึ้นเขาไปจุดชมวิวเดียวกัน คนแรกแบกเป้ใบใหญ่ ใส่ของมาเผื่อทุกอย่าง ทั้งที่ระหว่างทางใช้จริงแค่ขวดน้ำ อีกคนเดินตัวเปล่า ถือขวดน้ำมาขวดเดียว ใครถึงก่อนก็พอเดาได้

เว็บก็เป็นแบบนั้นครับ เว็บที่ใช้ JavaScript วาดทั้งหน้าในเบราว์เซอร์ จะส่งโค้ดของทุกส่วนมาให้ แม้ส่วนนั้นเป็นแค่ย่อหน้าข้อความที่ไม่มีอะไรให้กด ส่วน Astro ตั้งต้นที่ ไม่ส่ง JavaScript เลย ทุกหน้าถูกแปลงเป็น HTML ไว้ล่วงหน้า ถ้าตรงไหนต้องกดได้ เช่น ปุ่มใส่ตะกร้า หรือสไลด์รูป เราค่อยบอก Astro ว่า "ตรงนี้ขอ JavaScript ด้วย" ส่วนที่ได้ JavaScript ไปนี้เรียกว่า Island

ชื่อ Island มาจากภาพนี้เลยครับ ทั้งหน้าเหมือนทะเลสงบ (HTML ที่แสดงได้ทันที) มีเกาะเล็กๆ ไม่กี่เกาะที่กดได้ เบราว์เซอร์จึงโหลดแค่โค้ดของเกาะ ไม่ต้องแบกโค้ดของทั้งทะเล

Astro ไม่ได้เหมาะกับทุกงาน ถ้าเว็บของคุณเป็นแอปที่ทุกส่วนต้องกดและเปลี่ยนตลอด เช่น แอปแชต ข้อดีเรื่องไม่แบก JavaScript จะเหลือน้อย เพราะทุกส่วนต้องใช้มันอยู่แล้ว Astro เด่นที่สุดกับเว็บที่เนื้อหาเป็นพระเอก

ศัพท์ที่ต้องรู้

ถ้ายังไม่คุ้นว่า HTML, CSS และ JavaScript แบ่งหน้าที่กันยังไง แนะนำให้อ่าน เขียนหน้าเว็บแรกด้วย HTML CSS JS ก่อน แล้วค่อยกลับมาต่อครับ

เตรียมเครื่อง

Astro ต้องใช้ Node.js ซึ่งเป็นโปรแกรมที่ทำให้รัน JavaScript นอกเบราว์เซอร์ได้ ทั้งตอนเปิดเซิร์ฟเวอร์จำลองและตอน build ณ ตอนเขียน (ต.ค. 2026) คู่มือของ Astro ระบุว่าต้องใช้ Node.js 22.22.0 ขึ้นไป และรองรับเฉพาะ รุ่นเลขคู่ รุ่นเลขคี่อย่าง v23 ใช้ไม่ได้

ที่เป็นแบบนี้เพราะรุ่นเลขคู่จะได้เป็นรุ่น LTS (Long Term Support) ที่ได้รับการดูแลยาว ส่วนรุ่นเลขคี่มีอายุสั้น และเนื่องจาก Astro รุ่นใหม่ขยับรุ่นขั้นต่ำขึ้นได้เรื่อยๆ ทางที่ชัวร์ที่สุดคือใช้ LTS ตัวล่าสุด เปิด Terminal แล้วเช็กรุ่นที่มีอยู่

node -v

v24.11.0

เช็กว่าได้แล้ว: เป็นเลขคู่และไม่ต่ำกว่า v22.22.0 ถ้าภายหลัง Astro ขึ้นว่า Node.js รุ่นนี้ not supported ให้อัปเดตเป็น LTS ตัวล่าสุด

ถ้าไม่รู้จักคำสั่ง node หรือเลขเก่ากว่านี้ ให้ดาวน์โหลดรุ่น LTS จาก nodejs.org ติดตั้งแล้ว ปิด Terminal เปิดใหม่ เพราะหน้าต่างที่เปิดค้างไว้ยังไม่รู้จักโปรแกรมใหม่ ใครใช้ VS Code ติดตั้งส่วนเสริมชื่อ Astro ไว้ด้วย จะได้สีโค้ดในไฟล์ .astro

สร้างโปรเจกต์ด้วย npm create astro

คำสั่งนี้จะดาวน์โหลดตัวช่วยสร้างโปรเจกต์รุ่นล่าสุดมารัน (คำว่า @latest คือขอรุ่นใหม่สุดเสมอ) แล้วถามเราทีละข้อ

npm create astro@latest

ถ้า npm ถามว่าจะติดตั้งแพ็กเกจ create-astro ไหม ให้กด Y แล้ว Enter จากนั้นตอบคำถามตามนี้

• Where should we create your new project? พิมพ์ ./my-astro เป็นชื่อโฟลเดอร์ใหม่ที่ยังว่าง
• How would you like to start your new project? เลือก Use minimal (empty) template เพราะไฟล์น้อย อ่านง่าย (เลือก A basic, helpful starter project ก็ทำตามบทความได้ เพราะเดี๋ยวเราจะเขียนหน้าแรกใหม่ทั้งไฟล์)
• Install dependencies? ตอบ Yes ให้ดาวน์โหลดแพ็กเกจที่ต้องใช้มาไว้ใน node_modules
• Initialize a new git repository? ตอบ Yes จะได้มีประวัติการแก้ไขตั้งแต่วันแรก

ระวัง: PowerShell ขึ้นว่า running scripts is disabled บน Windows บางเครื่อง PowerShell ถูกตั้งให้บล็อกไฟล์สคริปต์ .ps1 ซึ่ง npm ตัวปกติเป็นแบบนั้นพอดี ให้พิมพ์ npm.cmd แทน npm เช่น npm.cmd create astro@latest และ npm.cmd run dev ได้ผลเหมือนกันทุกอย่าง

พอเสร็จจะได้โฟลเดอร์ my-astro ที่ใช้บ่อยที่สุดคือ src/pages/ ซึ่งทุกไฟล์ในนั้นคือหนึ่งหน้าเว็บ ส่วน public/ เก็บไฟล์ที่ส่งออกไปตรงๆ เช่น ไอคอน และ astro.config.mjs คือไฟล์ตั้งค่าของ Astro

เปิดเว็บครั้งแรกด้วย npm run dev

เข้าไปในโฟลเดอร์โปรเจกต์ แล้วสั่งเปิด dev server หรือเซิร์ฟเวอร์จำลองที่รันอยู่ในเครื่องเราเอง ไว้ดูผลระหว่างเขียนโค้ด

cd my-astro
npm run dev

 astro  v7.x.x ready in 350 ms
 
┃ Local    http://localhost:4321/
┃ Network  use --host to expose

อ่านทีละส่วนครับ

• ready in ... ms คือเซิร์ฟเวอร์พร้อมแล้ว เลขรุ่นและเวลาในเครื่องคุณจะต่างไปจากนี้
• Local คือที่อยู่ที่ใช้เปิดดู localhost แปลว่าเครื่องตัวเอง ส่วน 4321 คือเลขพอร์ต เหมือนเลขห้องในตึก จะได้ไม่ชนกับโปรแกรมอื่น
• Network บอกว่าตอนนี้เปิดได้แค่จากเครื่องนี้ ถ้าอยากลองจากมือถือในวง Wi‑Fi เดียวกัน ให้รัน npm run dev -- --host

เปิดเบราว์เซอร์ไปที่ http://localhost:4321 แล้วทิ้ง Terminal ไว้อย่าปิด เพราะเซิร์ฟเวอร์รันอยู่ในนั้น จะหยุดเมื่อไรให้กด Ctrl+C

เช็กว่าได้แล้ว: เห็นคำว่า Astro ตัวใหญ่บนหน้าเว็บ ส่วนแถบเล็กๆ ด้านล่างจอคือ Dev Toolbar ซึ่งมีเฉพาะตอน dev คนที่เข้าเว็บจริงจะไม่เห็นครับ

แก้หน้าแรกใน index.astro

ไฟล์ .astro แบ่งเป็นสองส่วน ส่วนบนที่อยู่ระหว่างเส้น --- สองเส้นเรียกว่า frontmatter เป็นที่เขียน JavaScript ซึ่ง รันตอนสร้างหน้า ไม่ได้ถูกส่งไปเบราว์เซอร์ ส่วนล่างเป็น HTML ที่ใส่ค่าจากข้างบนได้ด้วยวงเล็บปีกกา { }

เปิด src/pages/index.astro ลบของเดิมทั้งหมด แล้ววางโค้ดนี้แทน

---
const siteName = "DevKub";
const topics = ["HTML", "CSS", "JavaScript"];
---
 
<html lang="th">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>เว็บแรกของฉัน</title>
  </head>
  <body>
    <h1>สวัสดีจาก {siteName}</h1>
    <p>หน้านี้สร้างด้วย Astro และยังไม่มี JavaScript ไปถึงเบราว์เซอร์เลย</p>
    <ul>
      {topics.map((topic) => <li>{topic}</li>)}
    </ul>
    <a href="/about">เกี่ยวกับเรา</a>
  </body>
</html>

กดเซฟแล้วกลับไปดูเบราว์เซอร์ หน้าเว็บจะเปลี่ยนเองโดยไม่ต้องรีเฟรช เพราะ dev server คอยดูไฟล์ใน src/ อยู่ตลอด

สังเกตบรรทัด topics.map(...) ครับ เป็น JavaScript ก็จริง แต่ Astro รันมันตั้งแต่ตอนสร้างหน้า ได้ผลเป็นแท็ก <li> สามบรรทัด เบราว์เซอร์ได้รับแค่ HTML ที่เสร็จแล้ว

เช็กว่าได้แล้ว: เห็นหัวข้อ "สวัสดีจาก DevKub" กับรายการ HTML, CSS, JavaScript ส่วนลิงก์ "เกี่ยวกับเรา" ถ้ากดตอนนี้จะเจอหน้า 404 เพราะยังไม่มีหน้านั้น เดี๋ยวเราสร้างกัน

เพิ่มหน้าใหม่ แค่สร้างไฟล์

Astro ใช้ระบบที่เรียกว่า file-based routing คือ ==ชื่อไฟล์ในโฟลเดอร์ src/pages กลายเป็น URL ให้เอง== ไม่ต้องไปเขียนตั้งค่าเส้นทางที่ไหน เหมือนตู้เอกสารที่ป้ายหน้าลิ้นชักบอกเลยว่าข้างในคือเรื่องอะไร

โฟลเดอร์ย่อยก็กลายเป็นส่วนหนึ่งของ URL ด้วย และไฟล์ Markdown (.md) ที่วางในนี้ก็กลายเป็นหน้าเว็บได้เหมือนกัน

สร้างไฟล์ใหม่ชื่อ about.astro ไว้ข้างๆ index.astro แล้ววางโค้ดนี้

---
const year = new Date().getFullYear();
---
 
<html lang="th">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>เกี่ยวกับเรา</title>
  </head>
  <body>
    <h1>เกี่ยวกับเรา</h1>
    <p>หน้านี้เกิดจากไฟล์ about.astro ไฟล์เดียว ไม่ต้องตั้งค่าเส้นทางเพิ่ม</p>
    <p>หน้านี้ถูกสร้างเมื่อปี {year}</p>
    <a href="/">กลับหน้าแรก</a>
  </body>
</html>

เช็กว่าได้แล้ว: กลับไปหน้าแรก กดลิงก์ "เกี่ยวกับเรา" แล้วไปเจอหน้าใหม่ที่ http://localhost:4321/about กด "กลับหน้าแรก" แล้วกลับมาได้

บรรทัด new Date().getFullYear() มีเรื่องน่าสนใจครับ ตอน build เลขปีจะถูกคำนวณครั้งเดียวแล้วฝังลงใน HTML คนที่เปิดเว็บปีหน้าก็ยังเห็นปีเดิมจนกว่าเราจะ build ใหม่ นี่แหละความหมายของ frontmatter รันตอนสร้างหน้า ไม่ได้รันในเครื่องคนดู

ใส่ปุ่มกดแบบ Island ด้วย React

ถึงตรงนี้เว็บเรายังไม่มี JavaScript สักบรรทัด ทีนี้ลองเพิ่มปุ่มนับจำนวนครั้งที่กด เขียนด้วย React แล้วให้ Astro วางเป็นเกาะหนึ่งเกาะ

1. หยุดเซิร์ฟเวอร์ แล้วเพิ่ม React เข้าโปรเจกต์

กด Ctrl+C ก่อน เพราะขั้นนี้ติดตั้งแพ็กเกจและแก้ไฟล์ตั้งค่า เซิร์ฟเวอร์ที่รันค้างอาจยังใช้ค่าเก่า

npx astro add react

คำสั่งนี้จะบอกว่าจะติดตั้งอะไรบ้าง (@astrojs/react, react, react-dom) และจะแก้ไฟล์ไหน ให้ตอบ Yes ทุกข้อ พอเสร็จ ในไฟล์ astro.config.mjs จะมีบรรทัด integrations: [react()] เพิ่มเข้ามา แปลว่า Astro รู้จัก React แล้ว

2. สร้างปุ่มเป็น Component

สร้างโฟลเดอร์ src/components แล้วสร้างไฟล์ Counter.jsx ในนั้น

import { useState } from "react";
 
export default function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount(count + 1)}>
      กดแล้ว {count} ครั้ง
    </button>
  );
}

useState(0) คือความจำของปุ่ม เริ่มที่ 0 ทุกครั้งที่กด setCount จะเพิ่มค่าขึ้นหนึ่ง แล้ว React วาดตัวเลขใหม่ให้เอง

3. วางปุ่มลงในหน้าแรก

แก้ src/pages/index.astro ตามนี้ บรรทัดที่ไฮไลต์คือส่วนที่เพิ่มเข้ามา

---
import Counter from "../components/Counter.jsx";
const siteName = "DevKub";
const topics = ["HTML", "CSS", "JavaScript"];
---
 
<html lang="th">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>เว็บแรกของฉัน</title>
  </head>
  <body>
    <h1>สวัสดีจาก {siteName}</h1>
    <p>หน้านี้สร้างด้วย Astro และมี JavaScript แค่ที่ปุ่มข้างล่าง</p>
    <ul>
      {topics.map((topic) => <li>{topic}</li>)}
    </ul>
    <a href="/about">เกี่ยวกับเรา</a>
    <Counter client:visible />
  </body>
</html>

คำว่า client:visible คือหัวใจของเรื่องนี้ครับ มันบอก Astro ว่า "ปุ่มนี้ต้องกดได้ แต่ไม่ต้องรีบ รอคนเลื่อนมาเห็นปุ่มก่อนแล้วค่อยโหลด JavaScript" ส่วนอื่นของหน้ายังเป็น HTML ล้วนเหมือนเดิม

รัน npm run dev อีกครั้ง แล้วเปิด http://localhost:4321

เช็กว่าได้แล้ว: เห็นปุ่ม "กดแล้ว 0 ครั้ง" กดแล้วตัวเลขเพิ่มขึ้นทีละหนึ่ง

ลองถอด client:visible ออกดู ลบ client:visible ออกแล้วเซฟ ปุ่มยังขึ้นครบ แต่กดเท่าไรตัวเลขก็ไม่ขยับ เพราะถ้าไม่สั่ง Astro จะแปลง Component เป็น HTML เฉยๆ ไม่ส่ง JavaScript ไปด้วย เป็นความผิดพลาดที่มือใหม่เจอบ่อยที่สุด ลองเสร็จแล้วใส่กลับด้วยนะครับ

เลือกจังหวะโหลด Island ด้วย client

client:visible ไม่ใช่ตัวเลือกเดียว Astro มีคำสั่งตระกูล client: ให้เลือกว่าจะส่ง JavaScript ของเกาะไปตอนไหน ที่ใช้บ่อยมีสามตัวนี้

เทียบกับร้านอาหาร client:load คือพนักงานที่ยืนรอตั้งแต่ลูกค้าเดินเข้าร้าน client:idle คือพนักงานที่มาเมื่อว่างจากงานอื่น ส่วน client:visible มาเฉพาะตอนลูกค้านั่งลงที่โต๊ะนั้นจริงๆ หลักง่ายๆ คือเริ่มจาก client:visible หรือ client:idle แล้วใช้ client:load เฉพาะของที่ต้องกดได้ตั้งแต่วินาทีแรก

Build เป็นไฟล์พร้อมขึ้นเว็บ

dev server เหมาะกับตอนเขียนโค้ด แต่ไม่ใช่ของที่เอาไปให้คนอื่นใช้ เวลาจะขึ้นเว็บจริงต้องสั่ง build ให้ Astro แปลงทุกหน้าเป็นไฟล์สำเร็จรูป เหมือนส่งต้นฉบับเข้าโรงพิมพ์

กด Ctrl+C หยุด dev server ก่อน แล้วรัน

npm run build

generating static routes
▶ src/pages/about.astro
  └─ /about/index.html
▶ src/pages/index.astro
  └─ /index.html
[build] 2 page(s) built in 1.12s
[build] Complete!

2 page(s) built คือได้ครบสองหน้า ผลทั้งหมดอยู่ในโฟลเดอร์ใหม่ชื่อ dist/ ลองเปิด dist/about/index.html ดูครับ จะเห็นว่าเป็น HTML ล้วน ไม่มีแท็ก <script> เลยเพราะหน้านั้นไม่มีเกาะ ส่วน JavaScript ของปุ่มแยกไปอยู่ใน _astro/ และถูกเรียกเฉพาะหน้าแรกที่มีปุ่ม ก่อนขึ้นจริง ลองเปิดผล build ในเครื่องด้วยคำสั่งนี้

npm run preview

แล้วเปิด http://localhost:4321 อีกครั้ง

เช็กว่าได้แล้ว: หน้าแรก หน้า about และปุ่มนับเลขทำงานเหมือนตอน dev แต่ไม่มี Dev Toolbar แล้ว

ข้อควรรู้คือ preview เสิร์ฟไฟล์ใน dist/ จาก build ครั้งล่าสุด ไม่ได้ดู src/ แบบ dev server แก้โค้ดแล้วจึงต้อง npm run build ใหม่ก่อนทุกครั้ง

เอาขึ้นเว็บจริง

สิ่งที่อยู่ใน dist/ เป็นไฟล์ธรรมดาทั้งหมด เลยฝากไว้ที่โฮสต์แบบไฟล์นิ่ง (static hosting) ได้แทบทุกเจ้า ที่นิยมกันมีเช่น

• Cloudflare มีบริการฝากเว็บที่เริ่มใช้ได้ฟรี อยากรู้จัก Cloudflare มากขึ้น อ่านต่อที่ ขึ้นเว็บแรกบน Cloudflare Workers
• Netlify และ Vercel เชื่อมกับ GitHub แล้วระบบดูออกเองว่าเป็นโปรเจกต์ Astro
• GitHub Pages ฝากเว็บฟรีคู่กับ repo บน GitHub โดยให้ GitHub Actions สั่ง build

เกือบทุกเจ้าทำคล้ายกัน คือเอาโค้ดขึ้น GitHub เชื่อม repo กับโฮสต์ แล้วบอกว่าคำสั่ง build คือ npm run build และโฟลเดอร์ผลลัพธ์คือ dist จากนั้นทุกครั้งที่ push โค้ดใหม่ เว็บจะ build และอัปเดตเอง รายละเอียดดูได้ที่ คู่มือ Deploy ของ Astro

อย่าอัปโหลด node_modules โฟลเดอร์นี้ใหญ่มากและไม่ต้องใช้บนโฮสต์ ถ้าอัปโหลดเองให้เอาเฉพาะของใน dist/ ส่วนคนที่ใช้ git ไฟล์ .gitignore ที่ Astro สร้างให้ได้กัน node_modules และ dist ไว้แล้ว

เจอปัญหา ลองเช็กตามนี้

ไปต่อ

• ลอง Vue หรือ Svelte เพิ่มได้ด้วย npx astro add vue หรือ npx astro add svelte และใช้หลาย Framework ปนกันในหน้าเดียวก็ได้
• เริ่มจาก template บล็อก สั่ง npm create astro@latest -- --template blog จะได้บล็อกที่มีหน้ารวมโพสต์ หน้าบทความ และ RSS ให้แกะดู
• อ่านต่อ เรื่อง Islands และคู่มือทั้งหมดที่ docs.astro.build

สรุป

• Astro ส่งหน้าเว็บเป็น HTML ล้วนก่อน และแนบ JavaScript ไปเฉพาะส่วนที่ต้องกดได้ ที่เรียกว่า Island เว็บจึงโหลดไว
• ต้องใช้ Node.js 22.22.0 ขึ้นไปและเป็นรุ่นเลขคู่ (ณ ตอนเขียน) สร้างโปรเจกต์ด้วย npm create astro@latest และเปิดดูด้วย npm run dev ที่ localhost:4321
• ทุกไฟล์ใน src/pages คือหนึ่งหน้า ชื่อไฟล์กลายเป็น URL เช่น about.astro คือ /about
• Component จาก React จะกดได้ก็ต่อเมื่อใส่ client:load, client:idle หรือ client:visible
• npm run build ได้ไฟล์พร้อมขึ้นโฮสต์ในโฟลเดอร์ dist/ และดูผลก่อนขึ้นจริงได้ด้วย npm run preview

พร้อมแล้วก็ไปทำ Quiz ท้ายบทด้านล่างเพื่อรับ XP ได้เลยครับ