Add automatic discriminator boolean to mixed server+client loaderData

[comp615]

As we play around with patterns for our application, we find ourselves wanting to use a mix of loader and clientLoader data. We're following the patterns around using both loaders. But we've noticed that if we augment the loader data with additional clientData, then we start getting types errors since loaderData becomes a union of the two loaders (makes sense).

In order to get around this, we find ourselves adding a isClientData boolean that's const true or false to each return so that we can discriminate the type union and access the values.

This seems like it might be a common scenario, and it would be nice and reduce boilerplate if the boolean and types were automatically added by react-router. Should also be a trivial amount of boilerplate + complexity, since the types are already figuring out and generating the union. If not, open to other suggestions on best ways to address that...maybe it just merits a brief sentence in the docs to help folks out! (Or maybe RR is opinionated and should never be augmenting data in clientLoaders)

[sergiodxa]

If the route has a clientLoader, on a navigation the server loader may never run, as it's your responsibility to call serverLoader function inside your clientLoader.

So the moment you add a clientLoader your type must always be whatever the clientLoader returns.

On SSR, your will get the server loader data on SSR, and after hydration (if you added clientLoader.hydrate = true) that will be replaced with the clientLoader data. In this case the best approach is to ensure the shape of the data returned by the server and client loaders is the same, if you can't get the data server-side return null and replace that null in the clientLoader, then in your UI you can check loaderData.clientOnlyValue is null or not to render something.