TanStack Start: Metadata, Data Loading and Loading Skeletons in One Route File

TanStack Start has become my go-to for full stack React apps. One of the things I enjoy most about it is how cleanly it handles three things that are usually spread across multiple files and libraries — metadata, data fetching, and loading UI — all colocated in a single route. Here's how I use head , loader , and pendingComponent together. head — Per-Route Metadata head lets you define document-level metadata per route. Page title, meta description, open graph tags — all scoped to that route without a global workaround or a third party head manager. head : () => ({ meta : [ { title : ' All Articles — Big Cats ' }, { name : ' description ' , content : ' Every story, every species. ' }, ], }), Each route owns its own SEO info. No context providers, no helmet libraries, no prop drilling. loader — Data Fetching Before Render loader is where you fetch everything your route needs. It runs on the server or client depending on your SSR config, and the data it returns is available in your compo