4 ms·

I hadn't heard of route loaders till all this. What are they, in plain terms? Is it just manually hoisting what you know a route needs all the way to the top

by diob 2y ago

I hadn't heard of route loaders till all this. What are they, in plain terms? Is it just manually hoisting what you know a route needs all the way to the top of the tree? Or is it some compile time magic that analyzes your components used, making the decision for you on what to fetch for a route?

fabian2k 2y ago
Haven't used them myself yet. As far as I understand it's essentially moving the data loading into the router. The router has an API for the loaders so the rest will work automatically like loading states. So yes, this means you have to define what to load at the top where you define the routes. Though I think this also works with nested routes, but I don't have any experience with them.
- marcins 2y ago
  > So yes, this means you have to define what to load at the top where you define the routes. And Meta's way of doing this is with Relay, so you are still defining component data requirements with the components and query fragments, but there's a compile step that produces those route level queries.. so you still get "co-location of a component's data requirements with the component", and "top level early data fetch" for the render-as-you-fetch pattern. This change breaks the fetch-as-you-render pattern where components make individual data requests for their data, because that pattern is considered bad for performance (for Meta's use case).
svieira 2y ago
It's either/both - the "simple" method is to manually host. The more complex methods use runtime or compile-time reflection on the code to determine what gets loaded when (a la https://engineering.fb.com/2020/05/08/web/facebook-redesign/#:~:text=Delivering%20data%2Ddriven%20dependencies https://engineering.fb.com/2020/05/08/web/facebook-redesign/...)
eddd-ddde 2y ago
I'm familiar with route loaders from Qwik, I imagine they are similar. Essentially data fetching starts as soon as possible. Right after routing, right before rendering.

by diob 2y ago

fabian2k 2y ago

Haven't used them myself yet. As far as I understand it's essentially moving the data loading into the router. The router has an API for the loaders so the rest will work automatically like loading states. So yes, this means you have to define what to load at the top where you define the routes. Though I think this also works with nested routes, but I don't have any experience with them.

marcins 2y ago
> So yes, this means you have to define what to load at the top where you define the routes. And Meta's way of doing this is with Relay, so you are still defining component data requirements with the components and query fragments, but there's a compile step that produces those route level queries.. so you still get "co-location of a component's data requirements with the component", and "top level early data fetch" for the render-as-you-fetch pattern. This change breaks the fetch-as-you-render pattern where components make individual data requests for their data, because that pattern is considered bad for performance (for Meta's use case).

svieira 2y ago

It's either/both - the "simple" method is to manually host. The more complex methods use runtime or compile-time reflection on the code to determine what gets loaded when (a la https://engineering.fb.com/2020/05/08/web/facebook-redesign/#:~:text=Delivering%20data%2Ddriven%20dependencies https://engineering.fb.com/2020/05/08/web/facebook-redesign/...)

eddd-ddde 2y ago

I'm familiar with route loaders from Qwik, I imagine they are similar. Essentially data fetching starts as soon as possible. Right after routing, right before rendering.