How to combine client and server side data before page is rendered?

[zealous river]

In a TanStack application, I have a SSR'd page where in the loader I'm gathering some records form a database (calling a server function, etc).

When this page is called, let's say, with a curl (or a browser without JS, or a web crawler, etc) that's all the information that I need for this page, so everything works great.

But when this page is first loaded in a web browser, I also need to load some data on the client (from a previously cached indexeddb database).

The issue, is that I need all of this data combined together before the page loads, so that I don't have to show any spinners, etc. Same thing when you navigate client side across pages. Each time you enter this page, both the loader plus the client-side data should be available for the page rendering before the route transition happens.

What's the recommended approach for doing this?

Thanks! 🙏

[scenic summit]

not totally clear. how can you server render without the client data? is there a fallback?

[zealous river]

Yes, an empty array is the fallback when there's no client side data.

Let me put a more specific example:

This page has a list of audio files. Users can sync these audio files for offline listening (using indexeddb, localstorage, or whatever).

When this page loads without client side rendering (i.e. SEO, a social network sharing bot, etc) It's fine to just render the list of audios.

When this page loads on a client that has already synced some songs, I want to show an "Already synced" message next to it, an "unsync" button, etc.

Right now, given I have to fetch the client side "asynchronously" there's either a blink from the SSR'd content, or I have to put spinners.

I think my problem is similar to what's been discussed in this issue

But I suppose this is not even possible, as it would cause hydration issues, right? 🤔

I recognize this is a pretty crazy use case...

[scenic summit]

server definitely needs to render some kind of fallback