```
### Load Function with Params
```ts theme={null}
// src/routes/blog/[slug]/+page.ts
export async function load({ params, fetch }) {
const response = await fetch(`/api/posts/${params.slug}`)
if (!response.ok) {
return {
status: 404,
error: new Error('Post not found')
}
}
const post = await response.json()
return {
post
}
}
```
### Parallel Loading
Load multiple resources in parallel:
```ts theme={null}
// src/routes/dashboard/+page.ts
export async function load({ fetch }) {
const [usersRes, statsRes, postsRes] = await Promise.all([
fetch('/api/users'),
fetch('/api/stats'),
fetch('/api/posts')
])
const [users, stats, posts] = await Promise.all([
usersRes.json(),
statsRes.json(),
postsRes.json()
])
return {
users,
stats,
posts
}
}
```
### Dependent Loads
When data depends on other data:
```ts theme={null}
// src/routes/user/[id]/+page.ts
export async function load({ params, fetch }) {
// First, fetch the user
const userRes = await fetch(`/api/users/${params.id}`)
const user = await userRes.json()
// Then, fetch posts by this user
const postsRes = await fetch(`/api/posts?authorId=${user.id}`)
const posts = await postsRes.json()
return {
user,
posts
}
}
```
### Streaming with Promises
Return promises to stream data:
```ts theme={null}
// src/routes/dashboard/+page.ts
export async function load({ fetch }) {
return {
// This loads immediately
user: await fetch('/api/user').then(r => r.json()),
// These stream in when ready
stats: fetch('/api/stats').then(r => r.json()),
posts: fetch('/api/posts').then(r => r.json())
}
}
```
```svelte theme={null}
Welcome {data.user.name}
{#await data.stats}
Loading stats...
{:then stats}
Posts: {stats.postCount}
Views: {stats.viewCount}
{/await}
{#await data.posts}
Loading posts...
{:then posts}
{#each posts as post}
{post.title}
{/each}
{/await}
```
## Navigation
SvelteKit provides programmatic navigation and lifecycle hooks.
### Using `goto`
```svelte theme={null}
```
### Navigation Lifecycle
```svelte theme={null}
```
### Prefetching
SvelteKit can prefetch data before navigation:
```svelte theme={null}
BlogBlogBlogBlog
```
### Disabling Client-Side Routing
For external links or special cases:
```svelte theme={null}
AdminLegacy Page
```
## Page Options
Configure page behavior with `+page.ts`:
```ts theme={null}
// src/routes/blog/+page.ts
export const prerender = true // Prerender at build time
export const ssr = false // Disable server-side rendering
export const csr = true // Enable client-side rendering
export const trailingSlash = 'always' // or 'never' or 'ignore'
export async function load({ fetch }) {
// ...
}
```
**Options:**
* `prerender`: Generate static HTML at build time
* `ssr`: Server-side rendering (not applicable with static adapter)
* `csr`: Client-side rendering
* `trailingSlash`: URL trailing slash handling
## SvelteKit Stores
SvelteKit provides built-in stores for navigation state.
### `$app/stores`
```svelte theme={null}
{#if $navigating}
Loading...
{/if}
Current page: {$page.url.pathname}
```
## Forms and Actions
In static mode, SvelteKit form actions don't work. Use client-side forms instead.
### Client-Side Form Handling
```svelte theme={null}
{#if success}
By {post.author} • {new Date(post.createdAt).toLocaleDateString()}
{post.excerpt}
{#each post.tags as tag}
{tag}
{/each}
{/each}
```
### Blog Post Page
```ts theme={null}
// src/routes/blog/[slug]/+page.ts
import { error } from '@sveltejs/kit'
export async function load({ params, fetch }) {
const response = await fetch(`/api/posts/${params.slug}`)
if (!response.ok) {
throw error(404, {
message: 'Post not found'
})
}
const post = await response.json()
return {
post
}
}
```
```svelte theme={null}
{post.title} - MyBlog
{post.title}
By {post.author} • {new Date(post.createdAt).toLocaleDateString()}
{#each post.tags as tag}
{tag}
{/each}
{@html post.content}
```
## Development Workflow
### Start Development
```bash theme={null}
# Terminal 1: SvelteKit dev server
cd frontend
npm run dev
# Terminal 2: Mizu backend
go run cmd/server/main.go
```
Or use the Makefile:
```bash theme={null}
make dev
```
The Makefile typically runs both servers concurrently.
## Building for Production
```bash theme={null}
make build
```
This:
1. Builds SvelteKit (`npm run build` → creates `build/`)
2. Builds Go binary with embedded `build/`
Run:
```bash theme={null}
MIZU_ENV=production ./bin/server
```
## Troubleshooting
### Build Directory Not Found
**Problem**: Go can't find the `build/` directory.
**Solution**: Make sure you've run `npm run build` in the `frontend/` directory first:
```bash theme={null}
cd frontend
npm run build
cd ..
go build -o bin/server cmd/server/main.go
```
### HMR Not Working
**Problem**: Changes don't hot-reload.
**Solution**: Verify `vite.config.ts`:
```ts theme={null}
server: {
hmr: {
clientPort: 3000 // Must match Mizu port
}
}
```
### 404 on Page Refresh
**Problem**: Refreshing on `/blog` gives 404 in production.
**Solution**: Ensure `fallback: 'index.html'` is set in `svelte.config.js`:
```js theme={null}
adapter: adapter({
fallback: 'index.html' // Enable SPA mode
})
```
### Data Not Loading
**Problem**: `load` functions don't fetch data.
**Solution**: Make sure you're using `fetch` from the load context:
```ts theme={null}
// ❌ Wrong
export async function load() {
const res = await fetch('/api/posts') // Uses global fetch
}
// ✅ Correct
export async function load({ fetch }) {
const res = await fetch('/api/posts') // Uses SvelteKit's fetch
}
```
### Route Params Not Working
**Problem**: `$page.params` is empty.
**Solution**: Make sure you're accessing params in a component under the dynamic route:
```
src/routes/blog/[slug]/+page.svelte ✅ Has access to $page.params.slug
src/routes/blog/+page.svelte ❌ No params here
```
## Limitations with Static Adapter
When using the static adapter with Mizu:
**Works:**
* Client-side routing ✅
* Data loading from APIs ✅
* Forms (client-side) ✅
* Stores and state ✅
* Layouts and nested routes ✅
* Dynamic routes with params ✅
* Prefetching ✅
**Doesn't work:**
* Server-side rendering (SSR) ❌
* SvelteKit API routes (`+server.ts`) ❌
* Server-only load functions (`+page.server.ts`) ❌
* Form actions (`+page.server.ts`) ❌
* Hooks (`hooks.server.ts`) ❌
**Workarounds:**
* Use Mizu API routes instead of SvelteKit endpoints
* Use `+page.ts` (client) instead of `+page.server.ts` (server)
* Handle forms client-side with `fetch()`
## When to Choose SvelteKit
**Choose SvelteKit + Mizu if:**
* You want file-based routing with Svelte
* You like nested layouts
* You want automatic code splitting per route
* You're comfortable with Go for your backend
* You prefer static site generation
**Choose vanilla Svelte + Mizu if:**
* You prefer manual routing (simpler)
* You don't need nested layouts
* Smaller learning curve is important
* You want minimal framework overhead
**Choose full SvelteKit (without Mizu) if:**
* You need SSR (server-side rendering)
* You want Node.js for your backend
* You need SvelteKit API routes and actions
* You want to use `+page.server.ts` files
## Next Steps
Learn vanilla Svelte
Official SvelteKit documentation
Similar approach with React
Build and deploy your app