Recommended way to fetch APIs for multiple components on 1 page

[ConnorVO]

I am creating a dashboard page that will pull data from multiple different sources to display different charts/graphs. What is the recommended way to do this using remix?

Do I just use useEffect in each component (which would allow each component to get the data on its own)?
Do I load all of the data in the loader function for the route (which I believe would force me to wait for everything to load before showing)?
Am I able to use any of the fancy error handling remix has?

I am probably totally missing something. Thanks for the help!

[sergiodxa]

You can:

1. Fetch everything in parallel (Promise.all) in the loader, the problem here is if you want to revalidate the loader data it will fetch everything not only one widget of the dashboard.
2. Use the useFetcher hook to fetch client-side inside a useEffect, this will give you more control of the data loading but you will lose SSR.

I think for a dashboard SSR may not be that useful so using useFetcher is probably going to be better if the dashboard is too customizable, you could still fetch some things no the route loader tho, like authenticated users, permission, what widgets to show, etc.