Handle persisted state
Hey everyone! 👋
I'm trying to implement persistent sidebar state
using cookies in Tanstack Start to avoid hydration
flashes. I need to read a cookie value during SSR
so the initial render matches the client state.
I tried using a loader like this:
```js
loader: async ({ request }) => {
const cookieHeader =
request?.headers?.get("cookie") || "";
// parse cookie...
}
But request is undefined in the loader context.
What's the correct way to access cookies during SSR
in Tanstack Start loaders? I want to read a
sidebar_state cookie on the server so I can pass
the correct initial state to avoid the open/close
flash on hydration.
Any guidance would be appreciated! 🙏
This gives them the context of what you're trying
to achieve and shows what you've already tried.
3 Replies
automatic-azure•2mo ago
import { getCookie } from '@tanstack/react-start/server';
make sure to wrap this in a serverFunction OR implement cookie reading isomorphically using createIsomorphicFn
eastern-cyanOP•2mo ago
thanks I found this on github: https://github.com/TanStack/tanstack.com/blob/ba7a9e84786d53fa83f0f378054875121fbb8b8c/src/components/ThemeToggle.tsx#L2
GitHub
tanstack.com/src/components/ThemeToggle.tsx at ba7a9e84786d53fa83f0...
The marketing and docs site for all TanStack projects - TanStack/tanstack.com
eastern-cyanOP•2mo ago
and managed to get it working by adjusting it for my specific case