search

remix-run / react-router

Declarative routing for React
https://reactrouter.com
MIT License
52.77k stars 10.21k forks source link

🗺️ Split out client loaders/actions #11571

Open ryanflorence opened 7 months ago

ryanflorence commented 7 months ago

PR: https://github.com/remix-run/react-router/pull/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 ^
mbsyaswanth commented 4 months ago

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

sergiodxa commented 4 months ago

@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 commented 3 months ago

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