search

kiliman / remix-component-data

This is a proof of concept for showing how you can expose loader functions from your components to use in your routes.
MIT License
85 stars 4 forks source link

Loader for one component blocks resolution for all other components #1

Open JustMaier opened 2 years ago

JustMaier commented 2 years ago

First of thank you for putting this together. Since Remix is still relatively new, examples are always appreciated. Your component data approach here is interesting, but there's a sort of critical issue that I'm hoping there is a good way to solve.

I've put together a brief example of the issue here on my fork here. Basically, I just added a 5 second blocking timeout to one of the Component loaders. Since the index loader requires all of the Component loaders to run, it can't complete the resolution for any of the components until the one with the 5 second delay finishes.

My initial thought is that the components need to be treated as child views so they can resolve their own data, but that seems like that could get messy really quick. Any ideas about the best way to approach this?

kiliman commented 2 years ago

Sorry, I missed this. Yeah, that's just the nature of how loaders work. Remix will call ALL loaders in parallel. It's treating all the nested loaders for the route as a single logical "request", since you're saying I need all this data to render my page.

If you have a loader that takes a long time, then I would try to cache that (if possible), or simply skip it and fetch it from the client.

Loaders don't magically solve your app needs. You need to weight the tradeoffs and solve the problem with the tools provided (not you specifically).

braxtonstuart commented 1 year ago

I'm new to Remix, and this repo has been really helpful in piecing together my logical understanding for supporting paradigms in-which component logic needs to be encapsulated because components on the page might not be known until runtime (CMS integration, for example). My first question after looking through the code was whether data retrieval of components was truly consecutive & blocking... so thanks to both of you for putting this in the public domain.

At the risk of sounding like a complete amateur, I'm curious if this problem could be solved by Remix Streaming, now that Remix supports that feature of React 18 in v1.11?

kiliman commented 1 year ago

Yes. I plan to update the POC to support the new defer streaming feature.