// src/routes/posts/+page.js
export async function load({ fetch }) {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();
  return { posts }; // becomes the page's `data` prop
}


<!-- src/routes/posts/+page.svelte -->
<script>
  let { data } = $props(); // data.posts comes from load()
</script>

<h1>Posts</h1>
<ul>
  {#each data.posts as post (post.id)}
    <li><a href="/posts/{post.id}">{post.title}</a></li>
  {/each}
</ul>

<!--
  Notes:
  - load() runs BEFORE the page renders (on the server for the first
    load), so the page arrives with its data already present — no
    onMount, no loading state, no flash, and it's SEO-friendly.
  - Whatever load returns becomes the `data` prop, read with $props.
  - Use SvelteKit's provided `fetch` (destructured from the load arg) so
    it works correctly during server-side rendering.
-->