ข้ามไปยังเนื้อหา
Svelte for React Developers

Load Functions

ใน SvelteKit การดึงข้อมูลแยกออกจาก component อย่างชัดเจน คุณ export ฟังก์ชัน load() จากไฟล์ +page.js (รันทั้งบน server และ client) หรือ +page.server.js (รันบน server เท่านั้น) จากนั้น SvelteKit จะส่งผลลัพธ์ที่ได้ไปให้ component ในรูปแบบ data prop โดยอัตโนมัติ แนวคิดนี้คล้ายกับ loader ของ react-router v6 และ getServerSideProps ของ Next.js Pages Router แต่มีข้อแตกต่างที่สำคัญ

+page.js — load ทั้งบน server และ client

หัวข้อที่มีชื่อว่า “+page.js — load ทั้งบน server และ client”

ใช้ +page.js เมื่อข้อมูลที่ต้องการดึงเป็น public API ที่เรียกได้จาก browser ได้โดยตรง:

React
// react-router v6 loader
export async function loader({ params }) {
  const res = await fetch('/api/posts/' + params.slug);
  if (!res.ok) throw new Response('Not Found', { status: 404 });
  return res.json();
}


// BlogPost.jsx
import { useLoaderData } from 'react-router-dom';
export default function BlogPost() {
  const post = useLoaderData();
  return <h1>{post.title}</h1>;
}
Svelte
// src/routes/blog/[slug]/+page.js
export async function load({ params, fetch }) {
  const res = await fetch('/api/posts/' + params.slug);
  if (!res.ok) throw { status: 404 };
  const post = await res.json();
  return { post };
}


<!-- src/routes/blog/[slug]/+page.svelte -->
<script>
  let { data } = $props();
</script>


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

ฟังก์ชัน load() รับ params, fetch ที่ SvelteKit ปรับแต่งไว้แล้ว (ใช้ cookie session อัตโนมัติ) และอีกหลาย utility ค่าที่ return จาก load() จะกลายเป็น data prop ที่คุณ destructure ออกมาใน component ด้วย $props()

+page.server.js — load บน server เท่านั้น

หัวข้อที่มีชื่อว่า “+page.server.js — load บน server เท่านั้น”

ใช้ +page.server.js เมื่อต้องการเข้าถึงฐานข้อมูล, secret key, หรือ cookie โดยตรง — โค้ดนี้จะไม่ถูกส่งไปยัง browser เลย:

React
// Next.js Pages Router
export async function getServerSideProps({ params }) {
  const post = await db.post.findUnique({
    where: { slug: params.slug },
  });
  if (!post) return { notFound: true };
  return { props: { post } };
}


export default function BlogPost({ post }) {
  return <h1>{post.title}</h1>;
}
Svelte
// src/routes/blog/[slug]/+page.server.js
import { db } from '$lib/db';
import { error } from '@sveltejs/kit';


export async function load({ params }) {
  const post = await db.post.findUnique({
    where: { slug: params.slug },
  });
  if (!post) error(404, 'Not found');
  return { post };
}


<!-- src/routes/blog/[slug]/+page.svelte -->
<script>
  let { data } = $props();
</script>


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

Pattern เหมือนกันทุกอย่าง — แค่เปลี่ยนชื่อไฟล์จาก +page.js เป็น +page.server.js SvelteKit จะรู้ว่าโค้ดนี้ต้องรันบน server เท่านั้น

เลือก +page.js หรือ +page.server.js?

หัวข้อที่มีชื่อว่า “เลือก +page.js หรือ +page.server.js?”
สถานการณ์ไฟล์ที่ควรใช้
เรียก public REST API+page.js
ต้องการ fetch ทั้งบน server (SSR) และ client (navigation)+page.js
Query ฐานข้อมูลโดยตรง+page.server.js
อ่าน cookie หรือ session+page.server.js
ใช้ API key ที่เป็น secret+page.server.js

หลักคิดง่าย ๆ: ถ้าไม่อยากให้โค้ดดังกล่าวปรากฏใน browser bundle ให้ใช้ +page.server.js

+page.js และ +page.server.js ใน SvelteKit ต่างกันอย่างไร?
SvelteKit page component รับข้อมูลที่ load() return กลับมาได้อย่างไร?
argument ของ load() ตัวไหนที่มีเฉพาะใน +page.server.js ไม่มีใน +page.js?