SvelteKit for SSG and SSR

1. Scaffold — npm create svelte@latest myapp, choose "SvelteKit minimal" 2. Svelte 5 runes — $state, $derived, $effect replace let/export let 3. Load functions — +page.ts export async function load({ fetch }) for data 4. Adaptive rendering — export const prerender = true in +page.ts for SSG 5. Layouts — +layout.svelte for shared nav, +layout.ts for shared load 6. Forms — form actions in +page.server.ts, use:enhance for progressive enhancement 7. Static export — adapter-static with prerender entries, fallback: 'spa' option 8. Deploy — npm run build, output to Netlify/Vercel/Cloudflare/GitHub Pages

// src/routes/blog/[slug]/+page.ts — load function (SSG) import type { PageLoad } from "./$types"; export const prerender = true; // generate at build time export const load: PageLoad = async ({ params, fetch }) => { const post = await fetch(`/api/posts/${params.slug}`).then((r) => r.json()); return { post }; }; // src/routes/blog/[slug]/+page.svelte — Svelte 5 runes <script lang="ts"> let { data } = $props(); let liked = $state(false); let label = $derived(liked ? "Liked ❤" : "Like"); </script> <h1>{data.post.title}</h1> <article>{@html data.post.content}</article> <button onclick={() => (liked = !liked)}>{label}</button> <style> /* Scoped CSS — zero runtime, compiled to single class */ h1 { color: #1a1a1a; } button { padding: 0.5rem 1rem; border-radius: 0.5rem; } </style> // src/routes/admin/+page.ts — SPA (client-only) export const prerender = false; export const ssr = false; // pure SPA page // svelte.config.js — adaptive static export import adapter from "@sveltejs/adapter-static"; export default { kit: { adapter: adapter({ fallback: "index.html" }), // SPA fallback prerender: { entries: ["*"] }, }, };