TanStack Start pendingMs + Suspense lab #

One shared two-column layout keeps the experiment instructions visible on the left while its three child routes render in the right-hand output panel. The / child links to two routes that fetch Bulbasaur from PokéAPI through TanStack Query:

• /await awaits queryClient.query in its loader and uses staleTime: 'static'.
• /suspense starts the same kind of query without awaiting it; useSuspenseQuery consumes the in-flight promise and the query inherits the global 20-second staleTime.

Both routes use pendingMs: 1_000. The fetch helper guarantees a minimum four-second first load so the pending threshold can be observed reliably. The two modes use separate query keys to prevent one route from warming the other route's cache. Because the routes are nested beneath the shared layout, their pending component renders in the output panel without replacing the instructions.

The PokéAPI fetch client and response types are generated by Hey API from PokéAPI's official OpenAPI 3.1 schema. pnpm generate:api refreshes the client and then uses Knip to prune unused generated exports, types, and files.

pnpm install
pnpm generate:api
pnpm dev

Deploy to Netlify #

The included netlify.toml builds the SPA shell with pnpm build and publishes dist/client. Its catch-all rewrite serves /_shell.html for deep links, so client-side routing works on Netlify. Import this repository in Netlify and deploy using the checked-in build settings, or run:

pnpm dlx netlify-cli@latest deploy --prod