Loading SvelteCosmos...
“SvelteKit is the official fullstack application framework for Svelte. It uses directory-based routing with special filename conventions (+page.svelte, +page.server.ts, +layout.svelte, +server.ts) to handle SSR, static generation, API endpoints, and data loading.”
Filesystem directory routing, +page.server.ts load functions, and hydration architecture.
// src/routes/blog/[slug]/+page.server.ts
import type { PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ params, fetch }) => {
const post = await db.getPost(params.slug);
return { post };
};
// src/routes/blog/[slug]/+page.svelte
<script>
let { data } = $props();
</script>
<h1>{data.post.title}</h1>
<p>{data.post.content}</p>Modify the state variable below to watch the signal update the output without VDOM diffing:
Pre-fetching on link hover (`data-sveltekit-preload-data="hover"`) loads server data in under 50ms before the user even clicks.