tanstack-router-preload

Define and enforce TanStack Router preload policies with defaultPreload and per-link overrides.

1|Updated Apr 26, 2026

Search Tags:#spa #preload #tanstack-router #route-loader #modulepreload

Ready to run

npx skills add https://github.com/matthewharwood/dean-stack --skill tanstack-router-preload

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-router-preload
Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/tanstack-router-preload
Command: npx skills add https://github.com/matthewharwood/dean-stack --skill tanstack-router-preload

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes and enforces the TanStack Router preload policy for dean-stack, ensuring consistent defaultPreload and per-link preload behavior across the SPA and prerendered outputs.

Core Features & Use Cases

Defines defaultPreload: "intent" and the per-link preload override policy to optimize initial navigation and loader execution.
Documents relationships with Workbox precaching and the router API for coherent preload semantics.
Use Case: Aligns route preload behavior across all apps/web routes to improve perceived performance and offline readiness.

Quick Start

Configure the defaultPreload policy in getRouter() and apply per-link preload overrides for critical links.

Frequently Asked Questions about tanstack-router-preload

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I configure TanStack Router defaultPreload behavior for an SPA?▼

Configure TanStack Router defaultPreload behavior by setting the defaultPreload policy to "intent" within your getRouter() function, ensuring consistent route preloading and optimized loader execution across your SPA.

Can I override TanStack Router preload settings on a per-link basis?▼

Yes, you can apply per-link preload overrides in TanStack Router to customize preload behavior for critical links, allowing individual link configurations to take precedence over the centralized defaultPreload policy.

Does TanStack Router preload policy work with Workbox precaching?▼

TanStack Router preload policy coordinates with Workbox precaching to maintain coherent preload semantics, ensuring route preloading aligns with service worker caching to improve perceived performance and offline readiness.

Why does route preloading behave differently on iPad touchstart events?▼

Route preloading accounts for iPad touchstart behavior by adapting the defaultPreload "intent" policy to touch interactions, ensuring navigation and loader execution trigger appropriately for mobile device events.

What is the best way to centralize TanStack Router preload configuration across multiple routes?▼

The best way to centralize TanStack Router preload configuration is to define a single preload policy in router.tsx that governs defaultPreload settings and per-link overrides, ensuring consistent preload behavior across all routes.

Does route preloading affect prerendered output in TanStack Router?▼

Yes, TanStack Router preloading applies to prerendered output, ensuring that the defaultPreload policy and per-link overrides maintain consistent preload semantics across both runtime SPA navigation and statically prerendered routes.