Fetching Data

นักพัฒนา React ใช้ useEffect + fetch เพื่อดึงข้อมูล client-side หรือใช้ React Query / SWR เพื่อจัดการ caching และ loading state Svelte ใช้ onMount + fetch สำหรับ client-side fetching ด้วย API ที่ตรงไปตรงมากว่า สำหรับ server-side fetching SvelteKit มีฟังก์ชัน load ใน +page.ts ที่รันบน server และส่งข้อมูลให้ component โดยตรง — คล้ายกับ getServerSideProps ของ Next.js แต่ clean กว่ามาก

useEffect + fetch เทียบกับ onMount + fetch

function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    setLoading(true);
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(data => { setUser(data); setLoading(false); })
      .catch(err => { setError(err.message); setLoading(false); });
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;
  return <p>{user?.name}</p>;
}

<script>
  import { onMount } from 'svelte';

  let { userId } = $props();
  let user = $state(null);
  let loading = $state(true);
  let error = $state(null);

  onMount(async () => {
    try {
      const res = await fetch(`/api/users/${userId}`);
      user = await res.json();
    } catch (e) {
      error = e.message;
    } finally {
      loading = false;
    }
  });
</script>

{#if loading}<p>Loading...</p>
{:else if error}<p>Error: {error}</p>
{:else}<p>{user?.name}</p>
{/if}

getServerSideProps เทียบกับ SvelteKit load

// pages/users/[id].tsx (Next.js)
export async function getServerSideProps({ params }) {
  const user = await fetchUser(params.id);
  return { props: { user } };
}

export default function UserPage({ user }) {
  return <p>{user.name}</p>;
}

// +page.ts (SvelteKit)
export async function load({ params, fetch }) {
  const res = await fetch(`/api/users/${params.id}`);
  const user = await res.json();
  return { user };
}

<!-- +page.svelte -->
<script>
  let { data } = $props();
</script>

<p>{data.user.name}</p>

ลองเล่น: simulated async fetch

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  import { onMount } from 'svelte';

  let posts = $state([]);
  let loading = $state(true);
  let error = $state(null);

  onMount(async () => {
    await new Promise(r => setTimeout(r, 800));
    try {
      posts = [
        { id: 1, title: 'Getting Started with Svelte 5' },
        { id: 2, title: 'Runes vs React Hooks' },
        { id: 3, title: 'SvelteKit for Next.js Developers' },
      ];
    } catch (e) {
      error = 'Failed to load posts';
    } finally {
      loading = false;
    }
  });
</script>

{#if loading}
  <p>Loading posts...</p>
{:else if error}
  <p style="color:red">{error}</p>
{:else}
  <ul>
    {#each posts as post}
      <li>{post.title}</li>
    {/each}
  </ul>
{/if}

🔀 React useEffect+fetch vs Svelte onMount+fetch

React useEffect รันหลัง render ทุกครั้งถ้าไม่ระบุ dependency array — ง่ายพลาด
onMount ของ Svelte รันครั้งเดียวหลัง component mount เสมอ — ไม่ต้องกังวล dependency
useEffect cleanup ต้องคืน function — onMount คืน function สำหรับ cleanup ได้เหมือนกัน
SvelteKit load รันบน server (หรือ client สำหรับ client-side navigation) โดยอัตโนมัติ
load ได้รับ fetch wrapper ที่ทำงานได้ทั้ง server และ client โดยไม่ต้องแก้โค้ด
ข้อมูลจาก load เข้าถึงได้ผ่าน $props() เป็น data — ไม่มี getStaticProps/getServerSideProps แยก