Subchapter 7.13
references/playbooks/sveltekit.mdMarkdown4 KBView on GitHub
Framework-specific playbook for SvelteKit projects on Vercel. Applies in
addition to whichever application-profile playbook fits (saas, ecommerce,
content-site, etc.). SvelteKit-on-Vercel ships through
@sveltejs/adapter-vercel, so most platform-level recs map to adapter
config rather than per-route framework APIs.
Function Duration dominates server-rendered routes (every +page.server.ts
load + +server.ts POST handler runs as a function). Edge Requests grow
with API surface (+server.ts and form actions). ISR is supported via the
adapter; when enabled, it converts to a cache_result HIT after first render.
Image Optimization is rarely a SvelteKit-specific lever (it’s the same
Vercel image service Next.js uses).
isr: { expiration: 60 } option per route (set
in +page.server.ts via export const config). This converts
function invocations to cache hits. Cite
https://kit.svelte.dev/docs/adapter-vercel +
https://vercel.com/docs/incremental-static-regeneration.export const prerender = true in
+page.server.ts or +page.ts moves a route from function to CDN.
Cite https://kit.svelte.dev/docs/page-options.load fetches. A load function with multiple
sequential await fetch(...) calls leaves wall-clock time on the
table — wrap them in Promise.all (or return promises directly
from load, which SvelteKit streams). Cite
https://kit.svelte.dev/docs/load.+server.ts action handlers and run
them via fetch from the client. Reduces SSR cost when only a
slice of the page actually needs server data on every request.hooks.server.ts matcher hygiene. Like Next.js middleware, the
handle hook intercepts every request unless filtered. Heavy
handle code multiplies cost by request volume. Move work into the
specific route’s load when only that route needs it.regions: [...] on
the adapter to reduce TTFB by 100-300ms.prerender = true. The scanner flags these.+layout.server.ts data fetches blocking every child route.
Auth-check + user-load in a layout makes EVERY function invocation
wait on those queries — even routes that don’t read user. Push
user-load into the routes that need it.adapter-vercel@5 adds new options (ISR,
split). adapter-vercel@3 doesn’t. The recommender must check the
installed version before suggesting isr: ....fetch calls in load to your own SvelteKit routes. SvelteKit
optimizes these into direct module calls during SSR, but only if
the URL is relative. A hardcoded https://your-domain.tld/api/...
defeats this optimization.https://kit.svelte.dev/docs/adapter-vercel — adapter config (ISR, regions, runtime)https://kit.svelte.dev/docs/page-options — prerender, ssr, csrhttps://kit.svelte.dev/docs/load — parallel fetches in loadhttps://kit.svelte.dev/docs/routing — file conventionshttps://kit.svelte.dev/docs/hooks — handle / handleFetchhttps://kit.svelte.dev/docs/form-actions — server-side form handlinghttps://kit.svelte.dev/docs/state-management — request-scoped statehttps://vercel.com/docs/incremental-static-regeneration — ISR on Vercelhttps://vercel.com/docs/fluid-compute — Fluid Compute (framework-agnostic)