How can I use loader inside simple component in Remix?

Question

How I can fetch the data in other components than routes? Do Remix developers fetch ALL datas in routes and distribute them in component props??

Answer 1

Yes, routes are the boundaries for fetching data on the server via loaders. If your component needs data, it should be fetched by the route loader. You can either pass them as props, or you can use useLoaderData directly from the component. The other option is to just fetch the data in your component from the client, but that can result in waterfalls.

There has been some discussion about adding component-level loaders.

https://twitter.com/mjackson/status/1720215617750622629

I also have a POC that adds support for component loaders and actions. NOTE: You still have to call the loaders from the route, but it does manage the data handling and even supports component ErrorBoundary.

https://github.com/kiliman/remix-component-data