Independent widget with its own loader inside a Remix route

[EpsilonOrionis]

I want to create a dashboard in Remix where each widget (component) has its own independent loader that runs separately from the main route loader. Each widget should be able to fetch data and update without affecting other parts of the page.

For example, in my dashboard, I have multiple widgets, such as a ProfileWidget and a StatsWidget. I want each of them to have their own loader while being rendered inside routes/dashboard.tsx.

What I Tried:
Using doesn’t seem like a good solution because I want widgets, not nested pages. Using useFetcher() works for actions, but I need separate loaders for each widget.

How can I make each widget execute its own loader independently? Is there a way to have components in Remix fetch their own data on the server, without having to rely on the parent route’s loader?

[sergiodxa]

Loaders are route features, so for a component to have an associated loader it will need to be a route by itself, you could do that with nested routes but then you will need to nest one route per widget.

I recommend you to fetch all the data in the route loader, or just drop the loaders pattern and fetch in the component with something like React Query, you could use RQ to fetch from resource routes but you won't get any SSR, unless you also fetch in the route loader and use that data to hydrate RQ cache.

[EpsilonOrionis]

Thank you @sergiodxa