How to handle client preferences?
I’m currently looking at migrating from React Router to TanStack Start and trying to identify equivalent solutions to problems I’ve run into.
Is there a solution for handling client-side preferences like browser language, timezone, and theme? I have a document describing this problem in more detail here: https://github.com/wrporter/starter-monorepo/blob/main/.github/decisions/7-client-preference-cookies.md
GitHub
starter-monorepo/.github/decisions/7-client-preference-cookies.md a...
Contribute to wrporter/starter-monorepo development by creating an account on GitHub.
17 Replies
flat-fuchsiaOP•18h ago
It looks like there is some prior art from Kent Dodds (where I got this from initially) that can be applied in the same way to TanStack Start as React Router.
https://discord.com/channels/719702312431386674/1324391273582563330/1378769729535213731
I’m curious if there are more idiomatic ways of doing this or if that example could be it.
xenial-black•17h ago
what is your concrete question here?
flat-fuchsiaOP•16h ago
Is there an idiomatic way to share client-side preferences, such as locale, timezone, and theme with server functions?
The way I’ve seen this done in React Router is by saving these values in a cookie. The tradeoff with this approach is that there is a delay in loading the app for the first time or anytime a preference changes. This is due to an extra request to load the values in a cookie and then reloading the app.
The same thing can be done in TanStack Router. I was just curious if there is an approach for this kind of thing already or if TanStack has support for it out-of-the-box.
xenial-black•16h ago
just server functions ? or also SSR?
flat-fuchsiaOP•16h ago
This problem is specific to SSR so that the backend can properly render according to the user’s preferences. Eg localization
xenial-black•16h ago
you mentioned "server functions" though
flat-fuchsiaOP•16h ago
Perhaps due to my lack of understanding of TanStack. My first time looking at it is today
xenial-black•16h ago
ok
no worries
it's just a start specific term in a way
and server functions, (the Start ones), have the concept of client middlewares that can send client context to the server
which can be anything you want
that, however, does not work for the SSR request
some things can be stored in local storage and dont need to be sent to the server at all, e.g. the selected theme
other things that have impact on rendering must be sent to the server, so cookies it is
i dont get the "initial load" delay part though. why would you reload anything?
flat-fuchsiaOP•15h ago
On the first request, the cookie doesn’t exist. Now, the browser has code and creates the cookie. A subsequent request is sent to the server to run SSR with the cookie.
Essentially just reloading the page
xenial-black•15h ago
Now, the browser has code and creates the cookie.what code? why doesnt the server send the cookie with the SSR response
flat-fuchsiaOP•15h ago
Here's how this approach works:
1. A user visits the site for the first time. The server has no way of knowing what their preferences are from the browser GET request.
2. The server SSR renders the page the user visits, while including (in the root route) a script in the <head> of the document that checks for existence of the cookie. If it doesn't exist or if the values are stale, set the cookie and reload the page. This must happen on the client because the server doesn't know about their preferences.
3. The next request, from the reload, now has the cookie set so that SSR can use it to properly render according to the user's preferences. This ensures things like rendered dates are in the user's timezone and not the server's timezone.
xenial-black•15h ago
i still dont get it
if there is no cookie, then no cookie is sent to the server in the SSR request
why would checking for a cookie on the client reveal one?
flat-fuchsiaOP•14h ago
The client controls and sets the cookie, the server only reads it
Say I visit
example.com. The first time I do, the server that services example.com has no way of knowing that my locale is set to es or that my timezone is set to America/Denver. So it cannot properly translate content rendered via SSR. It might fallback to a default of en, giving me content in English instead of Spanish.
The server then sends HTML back, along with a small amount of JavaScript that gets the values from my browser and sets them in a cookie. It reloads the page so that on the next request to example.com, the server can now read that cookie and get my locale of es and timezone of America/Denver. It then properly server-side renders the content and returns it to the client.xenial-black•14h ago
thats a different story than "that checks for existence of the cookie"
btw you can get locale via headers
flat-fuchsiaOP•14h ago
It was an example of the first visit. The code still checks if the cookie exists and if the values are stale, if they are not, there is not page reload.
Locale may not always be sent from all clients. Timezone and theme are not sent via headers.
xenial-black•14h ago
theme does not need to be sent to the browser
we store it in localstorage for tanstack.com
however, the other values (e.g. timezone) need client side handling, i agree. there is no way around that.
doesnt matter the framework you choose, its a restriction of the client server communication
flat-fuchsiaOP•14h ago
That's right. So this question was purely to determine if TanStack already had a solution to this common SSR problem. Otherwise, I will apply the same solution I've used from the React Router community
The theme is useful in this approach for optimistic loading if the theme changes.
If you would like to learn more, this is the package by Kent Dodds that is generic enough that it can be used for TanStack Start. https://www.npmjs.com/package/@epic-web/client-hints
But there is additional work needed to property get optimistic updates