SvelteKit: Full-Stack Svelte

Svelte สร้าง component; SvelteKit สร้างแอป

Svelte ให้ component กับคุณ ส่วน SvelteKit คือ application framework อย่างเป็นทางการที่สร้างต่อยอดขึ้นไป (และอยู่บน Vite) SvelteKit เพิ่มทุกอย่างที่แอปจริงต้องใช้ — router, server-side rendering, data loading, form handling, API endpoints และ deployment — คุณจึงไม่ต้องประกอบเองทีละชิ้น

ความสัมพันธ์นี้เหมือน React กับ Next.js หรือ Vue กับ Nuxt: view library ดูแล UI ส่วน meta-framework ดูแลตัวแอป

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

บทเรียน	สิ่งที่คุณจะได้เรียน
Routing & pages	file-based routing, `+page.svelte`, layout, dynamic route
Loading data	`load` function, universal vs server-only, `data` prop
Forms & actions	form `actions` และ progressive enhancement ด้วย `use:enhance`
Server & API	`+server.js` endpoint, hooks, render mode และ adapters

หน้าตาของแอป SvelteKit

route คือไฟล์ใน src/routes/ และชื่อไฟล์พิเศษแต่ละแบบมีบทบาทเฉพาะ

flowchart TB
  route["route folder ใน src/routes/"] --> page["+page.svelte — ตัว UI"]
  route --> pjs["+page.js / +page.server.js — load data + actions"]
  route --> layout["+layout.svelte — shared shell"]
  route --> server["+server.js — API endpoint"]
  page --> ssr["render บน server (SSR) โดย default
แล้ว hydrate บน client"]

ไฟล์ที่ประกอบกันเป็น route

+page.svelte คือหน้าเพจของ route — เป็น Svelte component ปกติ
+page.js / +page.server.js ให้ข้อมูลของเพจ (ผ่าน load) และ form actions
+layout.svelte ครอบ child route ด้วย shell ที่ใช้ร่วมกัน (nav, footer)
+server.js คือ API endpoint เดี่ยว ๆ (JSON, webhook) ที่ไม่มี UI

โดย default SvelteKit จะ render เพจบน server ก่อน (first paint เร็ว, ดีต่อ SEO) แล้วค่อย hydrate บน client เพื่อความ interactive — ได้ข้อดีทั้งสองฝั่ง และปรับได้ราย route