sensitive-blue

How do I access cookies from an SSR-rendered component?

I'd really love for the first paint to arrive with the user's correct dark mode theme set. I have a very simple serverFn to grab the cookies, but it's naturally async.

export const getCookieFromRequest = createServerFn().handler(() => {
    return getRequestHeader('cookie');
});

export const getCookieFromRequest = createServerFn().handler(() => {
    return getRequestHeader('cookie');
});

Should I be wrapping the whole site in a Suspense and Await, or is there a better way to synchronously grab the server-side cookie value?

7 Replies

absent-sapphire•9mo ago

what do you mean by "whole site"?

sensitive-blueOP•9mo ago

In __root.tsx, wrapping the route Component in a DarkModeProvider. ( which would call the serverFn, and contain the Suspense/Await )

absent-sapphire•9mo ago

not necessary checkout how we do it on tanstack.com

absent-sapphire•9mo ago

https://github.com/TanStack/tanstack.com/blob/main/app%2Fcomponents%2FThemeToggle.tsx

GitHub

tanstack.com/app/components/ThemeToggle.tsx at main · TanStack/tans...

The marketing and docs site for all TanStack projects - TanStack/tanstack.com

absent-sapphire•9mo ago

https://github.com/TanStack/tanstack.com/blob/main/app%2Froutes%2F__root.tsx

GitHub

tanstack.com/app/routes/__root.tsx at main · TanStack/tanstack.com

The marketing and docs site for all TanStack projects - TanStack/tanstack.com

absent-sapphire•9mo ago

TLDR: put it in a loader

sensitive-blueOP•9mo ago

Thanks, I'll take a look! Awesome, that did the trick! Much appreciated.

Gaming

Programming

How do I access cookies from an SSR-rendered component?

Did you find this page helpful?