skills.rest
jherr
jherrCOMMUNITY
Explore all skills by this author →
Website𝕏@jherrGitHub

tanstack-start-loaders

Manage isomorphic data fetching and route guards with beforeLoad and loader functions.

Updated Mar 3, 2026
Search Tags:#data fetching#tanstack#ssr#react router#isomorphic#route guards
One-click install
npx skills add https://github.com/jherr/jdh-swar-test-saas-1 --skill tanstack-start-loaders
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-start-loaders
Source: https://github.com/jherr/jdh-swar-test-saas-1/tree/main/.claude/skills/tanstack-start-loaders
Command: npx skills add https://github.com/jherr/jdh-swar-test-saas-1 --skill tanstack-start-loaders

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies and standardizes how data is fetched and managed for routes in TanStack Start applications, ensuring efficient and isomorphic data loading.

Core Features & Use Cases

  • Isomorphic Data Loading: beforeLoad and loader functions execute on both server and client.
  • Route Guards & Context: Use beforeLoad for authentication checks and setting up route-specific context.
  • Parallel Data Fetching: loader functions fetch data for routes in parallel, improving performance.
  • Deferred Loading: Stream non-critical data using Promises and Await for a better user experience.
  • Error Handling & Loading States: Configure custom components for error and pending states.
  • Use Case: Securely authenticate users before they access protected routes and fetch all necessary data for a dashboard page, displaying loading states gracefully.

Quick Start

Use the tanstack-start-loaders skill to fetch user data before loading the protected dashboard route.

Frequently Asked Questions about tanstack-start-loaders

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

FAQPage Schema
How do I manage isomorphic data fetching in TanStack Start so loaders run on both server and client?▼

Isomorphic data fetching in TanStack Start is handled by `beforeLoad` and `loader` functions that execute on both server and client, facilitating sequential execution for guards and parallel execution for data.

What is the best way to set up route guards and authentication checks before loading protected routes?▼

Route guards and authentication checks are set up using the `beforeLoad` function to securely authenticate users before they access protected routes, while also allowing route-specific context propagation.

Can I defer non-critical data loading in React Router to improve initial render performance?▼

Non-critical data loading can be deferred using Promises and `Await` to stream data, improving user experience by displaying loading states gracefully while fetching.

How do I dynamically re-run route data loaders based on URL search parameters?▼

Route data loaders can be configured for dynamic re-runs based on search parameters, ensuring that data retrieval updates efficiently when URL query values change during navigation.

Does this data loading approach support custom error handling and pending states for routes?▼

The data loading approach supports custom error handling and pending states by allowing you to configure specific components for error and loading states during the route fetching process.

Related Skills

Explore More Software Engineering Skills→
cill-i-amcill-i-am

react-start

Set up React projects with TanStack Start server functions and routing.

Community
Advanced
jezwebjezweb
961

TanStack Router

Generate typed file-based routes with TanStack Router for React SPAs.

Community
Intermediate
haryelramalhoharyelramalho

tanstack-router-best-practices

Standardize TanStack Router setup, loaders, search validation, and navigation for type-safe React apps.

Community
Advanced
ovachieverovachiever
52

tanstack-start

Build full-stack React apps on Cloudflare Workers with TanStack Start.

Community
Advanced