Best practice for partial data loading in dashboard with independent chart sections

[matthew-bl]

Hey guys, I need your help!

I'm developing an analytics dashboard in React Router v7 (Framework Mode) and I'm trying to figure out the best way to split queries on the same route - so I can reload only specific parts of the UI without refreshing everything.

Requirements

User Action	What should reload	Skeleton where
Click KPI Card (URL: /key-metrics/:metric)	Only all 3 charts(without KPI cards)	All charts
Change interval in Line Chart	Only Line Chart	Only Line Chart
Change aggregation in Bar Chart	Only Bar Chart	Only Bar Chart
Change date range	Everything	Everything

My approach

1. Nested routes:

   • /key-metrics (layout) - fetches KPI cards, has shouldRevalidate: false for :metric changes
   • /key-metrics/:metric (child) - fetches chart data

2. Separate server functions:

   • kpi.queries.server.ts
   • line-chart.queries.server.ts
   • bar-chart.queries.server.ts
   • map.queries.server.ts

3. Resource routes + useFetcher for chart-specific updates:

   • Change interval → useFetcher.load('/api/line-chart?...') → skeleton only in Line Chart
   • Change aggregation → useFetcher.load('/api/bar-chart?...') → skeleton only in Bar Chart

4. Shared functions: Both the /key-metrics/:metric route loaders and the resource routes (/api/*) would use the same query functions to avoid code duplication.

Questions

1. Is this the correct pattern for React Router v7?

   • Nested routes for layout/child separation
   • shouldRevalidate to prevent parent reload
   • useFetcher + resource routes for granular chart updates

2. Should I consider TanStack Query instead of useFetcher?

3. Is there a simpler/better pattern I'm missing?

Thanks! 🙏