How to combine client and server side data before page is rendered?
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! 🙏
3 Replies
sunny-green•3mo ago
not totally clear. how can you server render without the client data? is there a fallback?
vicious-goldOP•3mo ago
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...
sunny-green•3mo ago
server definitely needs to render some kind of fallback
using e.g. a
<ClientOnly> component