Using Skrip with SvelteKit

Setup

Install the package in your SvelteKit project.

Loading a Collection

// src/routes/blog/+page.server.ts
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async ({ fetch }) => {
  const res = await fetch('/api/collections/blog')
  const { collection } = await res.json()
  return { posts: collection.items }
}

<!-- src/routes/blog/+page.svelte -->
<script lang="ts">
  export let data
</script>

<ul>
  {#each data.posts as post}
    <li><a href="/blog/{post.slug}">{post.data.title}</a></li>
  {/each}
</ul>

Loading a Single Item

// src/routes/blog/[slug]/+page.server.ts
export const load: PageServerLoad = async ({ fetch, params }) => {
  const res = await fetch(`/api/collections/blog/${params.slug}`)
  if (!res.ok) return { status: 404 }
  const { item } = await res.json()
  return { item }
}

SvelteKit's fetch is isomorphic — this works identically during SSR and in the browser.