ศัพท์ของ Astro เน้นที่ island เป็นหลัก — หน้าเว็บ render ออกมาเป็น static HTML เป็นค่า default และมีแค่ส่วนที่เราติด client directive ไว้ (หรือเลือกให้เป็น server island) เท่านั้นที่จะส่ง หรือรัน JavaScript จริง ๆ ทับซ้อนกันอยู่บนนี้ก็คือ content layer (collection ที่สร้างจาก loader แล้ว validate ด้วย schema แบบ Zod), Actions สำหรับเรียก server แบบ type-safe และ <ClientRouter /> สำหรับ navigate แบบมี animation ระหว่างหน้าเดิม เวลาอ่านบทเรียนแล้วเจอคำที่ไม่คุ้น หรือไม่แน่ใจว่ายังใช้ได้อยู่กับ Astro 7.3.5 ไหม ให้กลับมาดูที่นี่
Term
ความหมาย
บทเรียน
action / defineAction()
function ฝั่ง server แบบ type-safe ของ Astro: ประกาศด้วย defineAction({ input, handler }) ใน src/actions/ แล้วเรียกจาก client ผ่าน object actions ที่ generate ให้ พร้อม validate ด้วย Zod อัตโนมัติและได้ผลลัพธ์ที่มี type — ไม่ต้องเขียน fetch()/URL/JSON เองด้วยมือ
Actions
ActionError
คลาส error ที่ handler ของ action throw ออกมาเพื่อบอกความล้มเหลวที่เจาะจง (throw new ActionError({ code: 'UNAUTHORIZED', message: '...' })) ฝั่งที่เรียกจะแยกแยะ error ที่ catch ได้ด้วย error instanceof ActionError แล้วอ่าน error.code
Actions
adapter
plugin (@astrojs/node, -vercel, -cloudflare, -netlify, …) ที่ทำให้ output: 'server' — หรือ route ไหนก็ตามที่ prerender = false — รันบน deploy target จริง ๆ ได้ ต้องมีทันทีที่มี route ที่ render แบบ on-demand
SSR & Adapters
astro add
คำสั่ง CLI (npx astro add <integration>) ที่ลง package ของ integration แล้วต่อสายเข้า array integrations ใน astro.config.mjs ให้อัตโนมัติ แทนที่จะต้องแก้ config เอง
Config & Integrations
astro check
คำสั่ง CLI (ใช้ @astrojs/check + TypeScript ข้างใน) ที่ type-check ไฟล์ .astro แบบครบวงจร รวมถึง expression ข้างใน template ด้วย จับ prop type ที่ผิดที่ tsc ธรรมดารันแค่ frontmatter อย่างเดียวจะพลาดไปได้
Testing & Tooling
astro sync
สร้าง (หรือสร้างใหม่) type ของ TypeScript สำหรับ content collection และ virtual module astro: อื่น ๆ ลงใน .astro/ type พวกนี้ regenerate ตอน astro dev/astro build อยู่แล้ว แต่ sync เฉย ๆ คือทางลัดที่เร็วกว่าทันทีหลังแก้ schema
TypeScript & Content Types
astro-island
custom element ที่ client runtime ของ Astro ห่อรอบ component ที่ hydrate แล้วใน HTML ที่ render ออกมา พกพา client directive, prop ที่ serialize แล้ว และข้อมูล renderer ที่ต้องใช้ hydrate มันในเบราว์เซอร์
Client Directives
astro:env
module สำหรับ environment variable แบบมี type: ประกาศตัวแปรครั้งเดียวใน env.schema ของ astro.config.mjs แล้ว import จาก astro:env/client หรือ astro:env/server ได้ type จริง ๆ แทนที่จะเป็น string ไม่มี type แบบ process.env
Config & Integrations
Astro.glob() (removed)
วิธีเดิมในการ import ไฟล์ในเครื่องหลายไฟล์แบบ eager จาก frontmatter (await Astro.glob('./posts/*.md')) เอาออกไปใน Astro v5 แทนที่ด้วย import.meta.glob(pattern, { eager: true }) ของ Vite เอง ซึ่งไม่คืน Promise และไม่ต้องใช้ await
Data Fetching
@astrojs/db (removed)
integration ฐานข้อมูลแบบ built-in ของ Astro ที่ใช้ Drizzle เบื้องหลัง ถูกเอาออกทั้งหมดใน Astro 7.0 โดยไม่มี package ทดแทนที่ทีมหลักดูแลต่อ — ให้ย้ายไปใช้ node:sqlite ของ Node ที่ built-in, Drizzle ORM ตรง ๆ หรือ library ฐานข้อมูลอื่น
Deployment & Ecosystem
Term
ความหมาย
บทเรียน
class:list
attribute directive ที่รับ array ของ string, object และ array ซ้อนกันได้ (class:list={['box', { red: isRed }]}) แล้ว merge ออกมาเป็น string class เดียว — เป็น helper แบบ built-in ของ Astro ที่เทียบเท่า clsx ยอดนิยม
Styles & Scripts
client directive
กลุ่ม attribute client:* (client:load, client:idle, client:visible, client:media, client:only) ที่เลือกให้ component ของ framework ส่ง JavaScript และ hydrate ในเบราว์เซอร์ — ถ้าไม่ใส่ component นั้นจะ render เป็น static HTML เฉย ๆ
Client Directives
client:load
hydrate JavaScript ของ component ทันทีที่หน้าโหลดเสร็จ — directive สำหรับสิ่งที่ต้อง interactive ทันที (nav menu, ปุ่มเปิด modal)
Client Directives
client:idle
hydrate หลังจากหน้าโหลดครั้งแรกเสร็จและ requestIdleCallback ของเบราว์เซอร์ทำงานแล้ว ถ้าเบราว์เซอร์ไม่มี requestIdleCallback ก็จะ fallback ไปใช้ event load แทน — เหมาะกับสิ่งที่ interactive ได้แต่ไม่เร่งด่วน
Client Directives
client:visible
hydrate ทันทีที่ component เลื่อนเข้ามาอยู่ใน viewport (ผ่าน IntersectionObserver) — ตัวเลือก default สำหรับอะไรก็ตามที่อยู่ใต้ fold ที่ไม่จำเป็นต้อง interactive ก่อนที่ผู้ชมจะเห็นมัน
Client Directives
client:media
hydrate ก็ต่อเมื่อ CSS media query ที่กำหนดตรงกัน (client:media="(max-width: 640px)") — สำหรับ component ที่ interactive หรือมีอยู่จริง เฉพาะบางขนาด viewport เท่านั้น
Client Directives
client:only
ข้าม server render ไปเลย แล้ว render เฉพาะฝั่งเบราว์เซอร์เท่านั้น ต้องระบุชื่อ framework เป็น string ด้วย (client:only="svelte") เพราะ Astro ไม่มี markup ที่ render จาก server ให้รู้ว่าต้อง hydrate ด้วย renderer ตัวไหน
Client Directives
ClientRouter
component จาก astro:transitions (<ClientRouter /> วางใน <head>) ที่ดักการ navigate ไปหน้าเดิม (same-origin) สลับ DOM ให้ แล้วขับเคลื่อน animation ของ transition — เป็นชื่อ export ปัจจุบันของ router สำหรับ view transitions ของ Astro
View Transitions
component
ไฟล์ .astro: component script (ส่วน frontmatter ที่ล้อมด้วย fence) ตามด้วย template — หน่วยพื้นฐานของ Astro ใช้เดี่ยว ๆ ได้หรือประกอบเป็นหน้าก็ได้
The Component Model
content collection
ชุดข้อมูล content แบบ type-safe ที่ config ไว้ใน src/content.config.ts ด้วย loader และ schema ทางเลือก แล้ว query ผ่าน getCollection()/getEntry() ของ astro:content ได้ผลลัพธ์มี type ครบ
Content Collections
content layer
สถาปัตยกรรมเบื้องหลัง content collection ตั้งแต่ Astro v5: collection ถูกกำหนดด้วย loader แทนที่จะเป็น directory ตายตัวอย่าง src/content/<name>/ รวม Markdown/MDX/JSON ในเครื่องกับข้อมูลจากระยะไกลหรือแบบ live ให้อยู่ใต้ API getCollection() เดียวกัน
Content Collections
Container API
experimental_AstroContainer (จาก astro/container) — render component ของ Astro หรือ framework ตัวเดียวออกมาเป็น string HTML นอกกระบวนการ build หน้าทั้งหน้า เป็นเครื่องมือที่ test fence ของคอร์สนี้เองใช้ตรวจสอบ markup ที่ render ออกมา
Testing & Tooling
context.locals
object ต่อ request ที่ middleware เติมค่าให้ (context.locals.user = ...) ให้โค้ดที่เทียบเท่า load, action และ endpoint ที่อยู่ถัดไปอ่านได้ ตั้งแต่ Astro v5 การเพิ่มค่าเข้าไปต้องใช้ Object.assign(context.locals, {...}) แทนที่จะเขียนทับทั้ง object
Middleware & Sessions
Term
ความหมาย
บทเรียน
define:vars
ส่งตัวแปรจาก frontmatter ที่ serialize เป็น JSON ได้เข้าไปในแท็ก <style> หรือ <script> (<style define:vars={{ color }}> อ่านค่าด้วย var(--color)) บนแท็ก <script> การใช้ define:vars จะบังคับให้เป็น is:inline อัตโนมัติ
Styles & Scripts
defineCollection()
function ของ astro:content ที่จับคู่ loader กับ schema ทางเลือกใน src/content.config.ts เพื่อลงทะเบียน collection แบบ build-time หนึ่งตัว export ออกมาผ่าน object collections ของไฟล์นั้น
Content Collections
defineLiveCollection()
เทียบเท่า defineCollection() สำหรับไฟล์ src/live.config.ts ของ live collection: จับคู่ LiveLoader กับ schema ทางเลือกสำหรับ query แบบ runtime ผ่าน getLiveCollection() เปิดตัวใน Astro 7.0
Data Fetching
dynamic route
route ที่ชื่อไฟล์มี segment ในวงเล็บเหลี่ยม อย่าง [slug].astro โดย parameter จะถูกเติมเข้าไป ไม่ว่าจะเป็นแบบต่อ path ตอน build time (ผ่าน getStaticPaths()) หรือแบบต่อ request ตอน runtime ภายใต้ on-demand rendering
Dynamic Routes
endpoint / API route
ไฟล์ src/pages/*.ts ที่ export function ตาม HTTP method (GET, POST, …) แล้วคืน Response ตรง ๆ — เป็นทางเลือกระดับล่างกว่าที่ไม่ผูกกับ framework ใดโดยเฉพาะ สำหรับสร้าง API ที่ client ที่ไม่ใช่ Astro ก็เรียกได้ แทนที่จะใช้ Actions
Endpoints & API Routes
envField()
helper ที่ import จาก astro/config ใช้ข้างใน env.schema เพื่อประกาศ type, context ('client'/'server') และระดับการเข้าถึง ('public'/'secret') ของตัวแปร environment แต่ละตัว เช่น envField.string({ context: 'server', access: 'secret' })
Config & Integrations
Term
ความหมาย
บทเรียน
frontmatter
block ที่ล้อมด้วย ---…--- อยู่บนสุดของไฟล์ .astro: เป็น JavaScript/TypeScript ธรรมดาที่รันตอน build หรือ request บนฝั่ง server เท่านั้น ไม่ถูกส่งไปให้ client เลย
The Component Model
getStaticPaths()
export ออกมาจาก dynamic route ใน output ที่ prerender ไว้ คืน list ของ { params, props } ที่ Astro ต้อง pre-render — จำเป็นสำหรับ dynamic route แบบ static (ไม่ใช่ on-demand) ทุกตัว เพราะไม่งั้น Astro จะไม่รู้ว่าต้อง build path ไหนบ้าง
Dynamic Routes
hybrid (legacy)
output mode ก่อน v5 ที่ให้แต่ละหน้าเลือก SSR ได้เองในขณะที่ที่เหลือของเว็บยังเป็น static ถูกเอาออกในฐานะ setting แยกใน Astro v5 — พฤติกรรมของมันถูกรวมเข้ากับ output: 'static' เป็นค่า default แล้ว ดังนั้น output: 'hybrid' วันนี้เป็นค่าที่ deprecate และไม่ถูกรู้จักอีกต่อไป
Rendering & Output Modes
hydration
ขั้นตอนที่ client ผูก event handler และความ interactive เข้ากับ HTML ที่ server render มาแล้วสำหรับ island หนึ่งตัว แทนที่จะ render มันใหม่ตั้งแต่ต้น — ทุกอย่างนอก island ที่ hydrate แล้วยังคงเป็น static markup ธรรมดา
Client Directives
Term
ความหมาย
บทเรียน
<Image>
component ของ astro:assets ที่ output <img> ที่ optimize แล้ว มี width/height จริง แปลง format ได้ และ (ถ้าใส่ widths/layout) สร้าง srcset แบบ responsive ให้ — ใช้ได้ทั้งไฟล์ในเครื่องหรือแหล่งข้อมูล remote ที่ config ไว้
Images & Assets
image() (schema helper)
function ที่ schema callback ของ content collection ได้รับ (schema: ({ image }) => z.object({ cover: image() })) เพื่อ validate field ใน frontmatter ว่าเป็น image reference ที่ประมวลผลได้จริง มาแทนที่ export image ของ astro:content ที่ถูกเอาออกใน Astro 3.0
Schemas & References
integration
plugin ที่ใส่ไว้ใน integrations: [...] ของ astro.config.mjs เกี่ยวเข้ากับ lifecycle ตอน build/dev ของ Astro เพื่อเพิ่ม UI framework (@astrojs/preact), feature (@astrojs/sitemap) หรือพฤติกรรมตอน build อื่น ๆ
Config & Integrations
is:global
ทำให้ block <style> หลุดออกจากการ scope อัตโนมัติของ Astro แล้ว apply กฎ CSS ของมันแบบ global ให้ทั้งหน้าแทนที่จะจำกัดแค่ markup ของ component นั้น
Styles & Scripts
is:inline
บอกให้ Astro ข้ามการประมวลผลและ bundle แท็ก <script> หรือ <style> นั้นไปเลย output ออกมาแบบ inline ตรง ๆ ใน HTML ทีละ byte — ไม่มีการ resolve import, ไม่แปลง TypeScript, ไม่ deduplicate
Styles & Scripts
island
component ที่ interactive ตัวเดียวฝังอยู่ในหน้าที่ส่วนใหญ่เป็น static — หน่วยของ islands architecture ของ Astro ที่ JavaScript จะถูกส่งและ hydrate เฉพาะ component ที่ระบุไว้ว่า interactive เท่านั้น ไม่ใช่ทั้งหน้า
Why Astro & Islands
Term
ความหมาย
บทเรียน
layout prop
prop ของ <Image>/<Picture> (constrained, fixed, full-width, …) ที่สร้าง widths, sizes และ srcset ที่พฤติกรรม responsive นั้นต้องการให้อัตโนมัติ แทนที่จะกำหนดเองทีละตัว
Images & Assets
loader (glob)
loader แบบ built-in ชื่อ glob() (จาก astro/loaders) ที่ match pattern ของไฟล์ใต้ base directory ที่กำหนด (glob({ pattern: '**/*.md', base: './src/data/blog' })) — ตัวเลือกปกติสำหรับ collection แบบ Markdown/MDX
Content Collections
loader (file)
loader แบบ built-in ชื่อ file() ที่โหลดไฟล์ในเครื่องทั้งไฟล์ — ปกติเป็นไฟล์ JSON หรือ YAML ไฟล์เดียวที่มี array ของ entry อยู่ข้างใน — ให้กลายเป็น collection ทั้งก้อนในครั้งเดียว
Content Collections
loader (live)
LiveLoader ที่ใช้คู่กับ defineLiveCollection() เพื่อ query ข้อมูลสด ๆ จากแหล่งข้อมูล remote ตอน runtime แทนที่จะอบข้อมูลเข้าไปตอน build time แบบที่ glob()/file() ทำ
Data Fetching
middleware
โค้ดที่ export เป็น onRequest จาก src/middleware.ts รันทุก request ที่ match ก่อนถึง route handler อ่าน/แก้ context.locals และ response ได้ และ middleware หลายตัวจะประกอบเข้าด้วยกันผ่าน sequence()
Middleware & Sessions
Term
ความหมาย
บทเรียน
on-demand rendering
การ render route ต่อ request ตอน runtime แทนที่จะ render ตอน build time — เป็นค่า default ของทุก route ภายใต้ output: 'server' และเลือกใช้เฉพาะ route ได้ภายใต้ output: 'static' ผ่าน export const prerender = false (ซึ่งต้องมี adapter ตามมาด้วย)
Rendering & Output Modes
output: static
output mode แบบ default: ทุก route ที่ไม่ได้ตั้ง prerender = false จะถูก build เป็นไฟล์ static HTML ตอน build time deploy ไปที่ static host ไหนก็ได้โดยไม่ต้องมี server runtime
Rendering & Output Modes
output: server
ทุก route render แบบ on-demand ตอน request เป็นค่า default (แต่ละ route ก็ยังเลือกกลับไปเป็น prerender = true ได้) ต้องมี adapter ของ platform ที่ server จะรันจริง ๆ
Rendering & Output Modes
paginate()
helper ที่ส่งเข้าไปใน context ของ getStaticPaths() แบ่งข้อมูลใน array ออกเป็นหน้า ๆ คืน entry แบบ { params, props: { page } } ต่อหนึ่งหน้า — page.data, page.currentPage, page.url.next และค่าคล้ายกันอ่านได้จาก prop page ที่ได้กลับมา
Dynamic Routes
<Picture>
component ของ astro:assets ที่ output element <picture> พร้อม <source> หลายแบบทั้ง format และขนาด สำหรับความต้องการแบบ art-direction หรือ format-fallback ที่มากกว่าที่ <Image> เดี่ยว ๆ ครอบคลุมได้
Images & Assets
prefetch
การ prefetch link แบบ built-in ของ Astro (config ผ่าน key prefetch ระดับบนสุด กลยุทธ์ default คือ hover) ที่ดึง HTML ของหน้าที่ link ไว้มาล่วงหน้าก่อนจะ navigate จริง ให้รู้สึกเหมือนโหลดทันที
View Transitions
prerender
export const prerender = true (ใน output: 'server') หรือ = false (ใน output: 'static') พลิกโหมด render ของ route นั้นให้ตรงข้ามกับค่า default ระดับ output — เป็น override รายตัวสำหรับตอนที่เว็บส่วนใหญ่เป็น static (หรือ on-demand) แต่มี route เดียวที่ต้องการตรงข้าม
Rendering & Output Modes
Term
ความหมาย
บทเรียน
reference()
schema helper ที่ประกาศว่า field หนึ่งชี้ไปยัง entry ใน collection อื่น (เก็บเป็น pointer แบบ id/collection แทนที่จะเป็นข้อมูล inline) resolve ทีหลังด้วย getEntry() บน reference นั้น
Schemas & References
render()
function ของ astro:content ที่ render เนื้อหา Markdown/MDX ของ entry ใน collection ออกมาเป็น component <Content /> พร้อม array headings และ frontmatter จาก remark plugin ใด ๆ สำหรับเอาไปแสดงเนื้อหาของ entry ในหน้าจริง ๆ
Schemas & References
rest param ([...slug])
segment ของ route ที่ match จำนวน segment ของ path ได้หลายแบบ รวมถึงศูนย์ตัวด้วย — src/pages/[...slug].astro match ได้ทั้ง /a, /a/b ไปจนถึง / เอง โดย params.slug จะได้ค่า undefined กลับมาสำหรับกรณีว่างนั้นใน getStaticPaths()
Dynamic Routes
Rolldown
bundler ที่เขียนด้วย Rust ที่ Vite ของ Astro 7 (Vite 8) ใช้สำหรับ bundle ตอน production แทน esbuild/Rollup — เป็นส่วนหนึ่งของการย้ายไป Vite/Rolldown ครั้งใหญ่ เพื่อให้ build เร็วขึ้น
Testing & Tooling
routeRules / cache
key ระดับบนสุดใน astro.config.mjs ที่ถูกเลื่อนสถานะจาก experimental มาเป็น stable ใน Astro 7.0 ใช้ config cache provider สำหรับ response (cache.provider) และกฎ cache รายเส้นทาง (routeRules เช่น maxAge/swr) สำหรับ route ที่ render แบบ on-demand
Caching & Edge
Rust compiler
Astro 7.0 เปลี่ยน compiler ของ .astro จากที่เขียนด้วย Go ตัวเดิม มาเป็นตัวใหม่ที่เขียนด้วย Rust: เร็วขึ้น แต่ก็เข้มงวดขึ้นด้วย — แท็กที่ไม่ปิดกลายเป็น compile error จริง ๆ แล้ว และ HTML ที่ผิดจะไม่ถูกแก้ให้เงียบ ๆ แบบที่ compiler ตัวเก่าเคยทำ
Testing & Tooling
Term
ความหมาย
บทเรียน
schema / Zod
รูปร่างข้อมูลของ content collection ประกาศด้วย object ของ Zod (z.object({...}) จาก astro/zod) ส่งเข้า defineCollection() — entry ที่ไม่ตรงกับมันจะพัง validate แบบมี type error ตอน build หรือ dev ก่อนที่จะไปถึงหน้าเว็บเสียอีก
Schemas & References
scoped styles
block <style> ข้างในไฟล์ .astro ถูก scope ให้ component นั้นเป็น default (ใส่ hash แบบ attribute ให้อัตโนมัติ) เว้นแต่จะติด is:global ไว้
Styles & Scripts
security.csp
config option ระดับบนสุดชื่อ security.csp ที่สร้าง Content-Security-Policy พร้อม nonce จริง ๆ ต่อ request ให้ inline script/style ของ Astro เองอัตโนมัติ stable ตั้งแต่ Astro 6.0
SSR & Adapters
sequence()
helper ของ astro:middleware ที่ประกอบ middleware แบบ onRequest หลายตัวเข้าด้วยกัน รันตามลำดับที่ให้มา และแต่ละตัวต้องเรียก next() เพื่อส่งต่อให้ตัวถัดไป
Middleware & Sessions
server island
component ตัวเดียวที่ถูกเลือกให้ render บน server แบบ on-demand (ผ่าน server:defer) ในขณะที่ส่วนที่เหลือของหน้ารอบ ๆ มันยังเป็น static และ cache ได้ — เป็นกลไกสำหรับเนื้อหาที่ personalize หรือต้องมาจาก server เท่านั้น ในหน้าที่ prerender ไว้ส่วนใหญ่
Server Islands
server:defer
directive ที่เปลี่ยน component ให้กลายเป็น server island: แทนที่จะ render รวมไปกับส่วนอื่นของหน้า มันจะถูก stream เข้ามาแบบ on-demand หลังจาก static HTML รอบ ๆ ถูกส่งออกไปแล้ว
Server Islands
sessions
astro:session — ที่เก็บ session ฝั่ง server หนุนหลังด้วย cookie บวก session driver อ่านและเขียนผ่าน context.session ใน page, endpoint, action และ middleware stable ตั้งแต่ Astro 5.7
Middleware & Sessions
set:html
directive ที่ฉีด string HTML ดิบเข้าไปใน element โดยไม่ escape (<div set:html={rawHtml} />) — เสี่ยง XSS เหมือน innerHTML ทุกประการ ถ้า string นั้นไม่ได้ผ่านการเชื่อถือหรือ sanitize มาก่อน
Astro Syntax Deep Dive
slot
กลไกส่ง markup เข้า component ของ Astro: <slot /> เฉย ๆ render markup อะไรก็ตามที่ parent วางซ้อนไว้ข้างในแท็กของ component ตรง ๆ, <slot name="x"> render เนื้อหาที่ติด slot="x" ไว้ชัดเจน ส่วน markup ที่วางไว้ข้างใน <slot>…</slot> คือ fallback ที่โชว์เฉพาะตอนที่ parent ไม่ได้ส่งอะไรมาให้ slot นั้นเลย
Slots & Composition
src/fetch.ts
path ของไฟล์ที่ Astro กันไว้ใช้ในเวอร์ชันอนาคตสำหรับ override fetch แบบ global เอง — เป็นชื่อที่ควรเลี่ยงไม่ให้ module อื่นใช้วันนี้
Config & Integrations
Starlight
framework สำหรับทำเว็บเอกสารอย่างเป็นทางการของ Astro (@astrojs/starlight) — เว็บของคอร์สนี้เองก็ build ด้วยตัวนี้ ให้ sidebar, locale หลายภาษา และ search มาให้พร้อมใช้
Deployment & Ecosystem
Sätteri
pipeline ประมวลผล Markdown แบบ native ของ Astro 7 เป็น renderer default สำหรับไฟล์ .md/.mdx มาแทน pipeline remark/rehype เดิม — @astrojs/markdown-remark ไม่ได้ถูกลงมาให้เป็น default อีกต่อไป
Markdown & MDX
Term
ความหมาย
บทเรียน
template
ทุกอย่างที่อยู่ใต้ fence ของ frontmatter ในไฟล์ .astro: markup แบบ HTML ที่มี expression ฝังอยู่ ซึ่ง compiler ของ Astro แปลงให้กลายเป็นผลลัพธ์ที่ render ออกมาของ component
The Component Model
transition:persist
directive ที่ใส่บน element หรือ island เพื่อรักษา DOM node ตัวจริงของมัน — และถ้าเป็น island ของ framework ก็รวมถึง state ข้างในด้วย — ให้อยู่รอดข้าม navigate ของ <ClientRouter /> แทนที่จะ unmount แล้วสร้าง instance ใหม่
View Transitions
view transitions
feature ที่ทำ animation ระหว่างการ navigate เต็มหน้าในแอปที่โดยพื้นฐานเป็นแบบหลายหน้า (multi-page) build อยู่บน View Transitions API ของเบราว์เซอร์เมื่อรองรับ (และ degrade แบบสง่างามเมื่อไม่รองรับ) ควบคุมโดย <ClientRouter />
View Transitions
ViewTransitions (renamed)
ชื่อเดิมของ component ตัวเดียวกับที่ตอนนี้ export เป็น ClientRouter จาก astro:transitions — เปลี่ยนชื่อใน Astro v5 — โค้ดหรือ tutorial ที่ยัง import ViewTransitions อยู่ กำลังอ้างถึง API ชื่อเก่าก่อนเปลี่ยนชื่อ
View Transitions
Vite
dev server และ bundler ที่ Astro สร้างอยู่บนนั้น — dev server ของ Astro เอง, hot module replacement และการ build production ทั้งหมดส่งต่อให้ Vite ทำงานเบื้องหลัง
Testing & Tooling
Mark as complete