// +page.server.js - Server-side data loading
export async function load({ params }) {
  const post = await getPost(params.slug);
  return { post };
}

// +page.js - Universal (runs on server & client)
export async function load({ fetch }) {
  const res = await fetch('/api/data');
  return { data: await res.json() };
}

export const prerender = true;  // SSG
export const ssr = true;        // SSR (default)
export const csr = true;        // CSR (default)

// App Router - Server Component (default)
async function Page({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

// Client Component
'use client';
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

src/routes/
├── +page.svelte           → /
├── about/
│   └── +page.svelte       → /about
├── blog/
│   ├── +page.svelte       → /blog
│   └── [slug]/
│       └── +page.svelte   → /blog/:slug
└── api/
    └── posts/
        └── +server.js     → /api/posts

app/
├── page.tsx               → /
├── about/
│   └── page.tsx           → /about
├── blog/
│   ├── page.tsx           → /blog
│   └── [slug]/
│       └── page.tsx       → /blog/:slug
└── api/
    └── posts/
        └── route.ts       → /api/posts

import { writable, derived } from 'svelte/store';

const count = writable(0);
const doubled = derived(count, $count => $count * 2);

// In component
$count = 5;  // Direct assignment

// Using Zustand
import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// In component
const { count, increment } = useStore();