Server & API

API endpoint ด้วย +server.js

ไฟล์ +server.js คือ route ที่ ไม่มี UI — เป็น HTTP endpoint เดี่ยว ๆ export function ที่ตั้งชื่อตาม HTTP method แต่ละตัว return Response ใช้กับ JSON API, webhook, การดาวน์โหลดไฟล์ หรืออะไรก็ตามที่ client ที่ไม่ใช่ browser เรียก

import { json, error } from '@sveltejs/kit';

export async function GET({ url }) {
  const page = Number(url.searchParams.get('page') ?? '1');
  return json(await getPosts(page));      // json() sets the header + serializes
}

export async function POST({ request }) {
  const body = await request.json();
  if (!body.title) error(400, 'title required');   // throw a typed HTTP error
  return json(await createPost(body), { status: 201 });
}

endpoint กับ form action ต่างกันยังไง: ใช้ form action เมื่อ form ของเพจนั้น submit ไป server (integrate กับ use:enhance และ form prop ได้เลย) ใช้ +server.js endpoint สำหรับ API ที่ใช้ซ้ำได้ ที่ถูกเรียกผ่าน fetch, mobile app หรือ third party

hooks: middleware สำหรับทุก request

src/hooks.server.js export handle ซึ่งรันกับ ทุก request ก่อนถึง route — เป็นที่ทำ authentication, logging และเติมค่า locals

export async function handle({ event, resolve }) {
  const token = event.cookies.get('session');
  event.locals.user = token ? await getUser(token) : null;  // available to load/actions
  return resolve(event);   // continue to the route
}

อะไรก็ตามที่คุณ set บน event.locals จะใช้ได้ในทุก server load และ action ของ request นั้น (ผ่าน locals) — นี่คือวิธีที่ current user ไหลผ่านทั้งแอป

flowchart LR
  req["request เข้ามา"] --> handle["hooks: handle()
set locals.user"]
  handle --> route["route: load / action / +server"]
  route --> resp["response"]

request ผ่าน handle แล้วจึงถึง route

render mode ราย route และ adapters

แต่ละ route เลือกวิธี render ของตัวเองได้ด้วย page option ที่ export จาก +page.js/+page.server.js:

export const prerender = true — render เป็นไฟล์ static ตอน build time (เหมาะกับเพจที่เหมือนกันสำหรับทุกคน)
export const ssr = false — ข้าม server rendering (เพจแบบ client-only)
export const csr = false — ไม่ส่ง client JS เลย (output static ล้วนสำหรับเพจนั้น)

สุดท้าย adapter (ตั้งใน svelte.config.js) แพ็กแอปที่ build แล้วให้เข้ากับ platform เป้าหมาย:

adapter-auto — ตรวจจับ platform ทั่วไป (ค่า default ในโปรเจกต์ใหม่)
adapter-node — Node server เดี่ยว ๆ
adapter-cloudflare — Cloudflare Worker/Pages
adapter-static — static site ที่ prerender ทั้งหมด (ไม่ต้องมี server)

คุณเลือก adapter ตามที่จะ deploy; โค้ดแอปเดียวกันรันได้ข้าม platform