🗺️ Split Route Modules (client loaders/actions/HydrateFallback)

[ryanflorence]

Planning Notes

• Mark thinks we'll have something to play with this week (JAN 13th)
• Lots of opportunities for bugs so we'd love a lot of people trying it out when it's unstable in real apps (though not in production, ofc)
• Ryan to goof around with it
• Matt to check out the runtime code

PR: #11871

When a link to a route with a client loader is clicked the browser has to first fetch the JS module for the route before it can call the client loader.

If a client loader is small, and the component is large, this slows down the transition because the loader is blocked by the size of the component.

get module:      |---------------|
call loader:                     |--------|
                                   render ^

By splitting out the clientLoader to its own bundle we can do these in parallel:

get component:   |-----------|
get loader:      |----|
call loader:          |--------|
                        render ^

Also, HydrateFallback is only used for the route that was rendered on initial page load. If we're splitting route modules into chunks, we can also create a separate HydrateFallback chunk which is only used on the initial page load and then skipped for any client-side navigations.

[mbsyaswanth]

This is one that that makes remix remix. Why do we want to split them out ?

[sergiodxa]

@mbsyaswanth the idea is to split the clientLoader and clientAction code from the route code, no to remove them from Remix itself

This is the Roadmap Planning video where it was discussed and explained https://www.youtube.com/live/7kdulqXtPII?t=2570&si=v8Xhz62QJFSVF0Rg.

[bluefire2121]

@mbsyaswanth like @sergiodxa said. It's not going anywhere. Today they run in series. Tomorrow they'll run in parallel. Faster renders.