When does client loader load in the page lifecycle?

[sgrund14]

I'm trying to figure out the order of operations with loader and client loader as it relates to page navigation

Does client loader fire after initial page load after the server side fetch?

Does it fire before page navigation when the app has been loaded up already and block navigation until it's finished?

Thanks!

[sergiodxa]

On the document request, when the server sends the HTML, first it runs the loaders, then it renders the app server-side to HTML and send a response, once your JS loads the app is hydrated.

If you added clientLoader.hydrate = true, then the clientLoader will run once the app is hydrated.

If you don't add that, it will never run in this case.

---

When the user does a client-side navigation (it clicks a link or submits form) the router will check what routes has clientLoaders. Then it will do a single HTTP request for every route that doesn't have a clientLoader, and it will call every clientLoader.

Inside the clientLoader, is your responsibility to call the serverLoader function received as an argument, if you don't the server loader will never run on a navigation.

If you added clientLoader.hydrate = true, and your clientLoader calls serverLoader, then on a document request it will return the data returned by the server loader on SSR, without doing an extra request to the server.

---

Once all loader and clientLoader resolved, then the router does the actual navigation and show the new UI.