Request ID
Every HTTP request carries a stable correlation id. Read it from any server-side code with getRequestContext().requestId — it's a Bun.randomUUIDv7() by default (time-ordered), can be seeded from an upstream proxy.requestIdHeader, and the same id rides every lifecycle event (request, error, action:*) so observability tooling can stitch a request together.
- This page render
01a14127-6aac-703c-88c3-f8b3d1492bb0
Reload the page to get a fresh id — each request re-runs the resolver.
<script lang="ts">
import Fetcher from './Fetcher.svelte';
let { requestId }: { requestId: string } = $props();
</script>
<div class="card">
<dl>
<dt>This page render</dt>
<dd><code>{requestId}</code></dd>
</dl>
<p class="hint">Reload the page to get a fresh id — each request re-runs the resolver.</p>
<Fetcher mochi:hydrate />
</div>
Styles
<style>
.card {
background: var(--surface);
color: var(--text);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
padding: 1.5rem;
max-width: 560px;
margin: 0 auto;
}
dl {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 1.25rem;
row-gap: 0.75rem;
margin: 0 0 1rem 0;
}
dt {
font-weight: 600;
color: var(--text-muted);
}
dd {
margin: 0;
word-break: break-all;
color: var(--text);
}
code {
font-family: var(--font-mono);
background: var(--code-bg);
color: var(--code-accent);
padding: 0.2rem 0.45rem;
border-radius: var(--radius-sm);
font-size: 0.9em;
}
.hint {
color: var(--text-subtle);
font-size: 0.9rem;
margin: 0 0 1.25rem 0;
}
</style>
More demos
Lazy Islands How lazy hydration works — islands marked mochi:hydrate:visible hydrate and load their CSS only when scrolled into view. Rate Limiting How rate limiting works — a rateLimit config on the route caps requests per IP per minute and serves the 429 error page past the limit. Client-only Islands How client-only islands work — components marked mochi:clientOnly skip SSR and mount in the browser, with a fallback snippet until then.