Loading Data

data มาจาก load function

เพจไม่ได้ fetch ข้อมูลของตัวเองใน component แต่ load function ที่อยู่ข้าง ๆ เพจจะ return ข้อมูล แล้ว SvelteKit ส่งให้เพจเป็น data prop เพราะ load รันก่อนเพจ render (บน server สำหรับ request แรก) ข้อมูลจึงอยู่ใน HTML ตั้งแต่แรก — ไม่มีอาการกระพริบตอนโหลด และดีต่อ SEO

export async function load({ params, fetch }) {
  const res = await fetch(`/api/posts/${params.slug}`);
  return { post: await res.json() };   // becomes the `data` prop
}

<script>
  let { data } = $props();     // data.post is here
</script>

<h1>{data.post.title}</h1>

flowchart LR
  req["request /blog/hello"] --> load["load({ params, fetch })"]
  load --> data["return { post }"]
  data --> page["+page.svelte ได้ data prop"]
  page --> html["rendered HTML"]

load รันก่อน แล้วเพจ render พร้อมข้อมูล

universal vs server-only load

load มีสองแบบ และการเลือกให้ถูกคือการตัดสินใจสำคัญ:

+page.js — universal load รันบน server สำหรับ render แรก แล้วรันใน browser สำหรับ client-side navigation ครั้งต่อ ๆ ไป ใช้กับข้อมูลที่ fetch ที่ไหนก็ปลอดภัย (public API ผ่าน fetch ที่ได้มาให้)
+page.server.js — server-only load รันบน server เสมอ ไม่เคยรันใน browser ใช้เมื่อโค้ดต้องอยู่ฝั่ง server: query database ตรง ๆ, secret, private environment variable, อ่าน cookie สำหรับ auth ข้อมูลที่ return ต้อง serializable (เพราะถูกส่งไป client)

// src/routes/dashboard/+page.server.js — server-only
import { db } from '$lib/server/db';

export async function load({ locals }) {
  // locals.user was set by a hook; db + secrets never reach the browser.
  return { projects: await db.projectsFor(locals.user.id) };
}

กฎง่าย ๆ: ถ้าแตะ database, secret หรือ private env ให้ไว้ใน +page.server.js นอกนั้น +page.js ก็พอ และยังให้ client navigation refetch ได้โดยไม่ต้องวิ่งไป server

load event และ layout data

load function รับ event object ที่มี field ที่มีประโยชน์: params (route params), fetch (fetch พิเศษที่จัดการ relative URL และ forward cookie ตอน SSR), url (URL ที่ร้องขอ), setHeaders, cookies (server load เท่านั้น), locals (server load เท่านั้น) และ parent (เพื่อ await ข้อมูลจาก parent layout)

load ใน +layout.js / +layout.server.js ให้ข้อมูลกับ layout และ ทุก child page — เหมาะกับสิ่งที่ทุกเพจต้องใช้ (current user, site settings) child page จะ merge ข้อมูลจาก layout กับของตัวเอง