load cookies to global store (on start)?

[trail sluice]

in Getserversideprops there is Context props use it to get cookies

[sweet glen]

I am using nextjs 13

load cookies to global store (on start)?

in next js 2023 I need to get cookie 'theme' during SSR and when I get this cookie value (let's say 'dark') I load it into zustand as a default value for store. However zustand is a client component and it cannot be accessed during ssr. So what do i do?

it cannot be done with a "route handler" or "middleware.ts". I can get cookie with cookies() function in root layout. That is where I advanced so far, in other words I am stuck

export default function RootLayout({children}: {children: React.ReactNode}) {
  ...
  console.log(cookies().get('store')?.value) // {"words":[]}
  ...

[odd folio]

zustand doesnt use that kind of cookie

and you need to persist for it to even do that

[sweet glen]

Wait I am going to explain. Forget about zustand

imagine a simple 'use client' component

[odd folio]

i would suggest getting and setting your theme via an actual cookie

i dont need to imagine, i know what you are trying to do haha

[sweet glen]

ah ok

[odd folio]

you are fighting hydration errors from layout shift

if you set it in a true cookie you can handle that

[sweet glen]

yes

[odd folio]

i have an example snippet i can give you. sec

[sweet glen]

oh great, bcs I do not understand with just words

skill issue

[odd folio]

const theme = cookies().get("ts-theme")?.value || 'blue'

i have color schemes

so this is in root layout

[sweet glen]

same thing

[odd folio]

and lemme get the set part

const setTheme = async (formData: FormData) => {
    'use server';
    cookies().set({
      name: 'ts-theme',
      value: formData.get('theme') as string,
      // @ts-ignore fixed in next.js v13.4.4
      httpOnly: true,
      maxAge: 315360000,
    });
  }

keep in mind im fully leaned into server actions

but you can do similar as a client component

[indigo fulcrum]

next.js 13 using set or get cookies in server component and server action, maybe you imported wrong cookie package

[odd folio]

bit late

[indigo fulcrum]

It's better to use localStorage to set theme for avoiding server request

[sweet glen]

what is this function? I do not understand. After I get cookie in root layout I need to go to client component store.ts and use the cookie as initial value for store (otherwise default)

[odd folio]

no you dont

[sweet glen]

🤨

[odd folio]

move away from zustand

[sweet glen]

jeeez

but why? how do I handle state

[odd folio]

no you dont need to use it as default, not no you dont understand hahaha

i see how that coulda been misinterpreted

why do you THINK you need it in zustand

[odd folio]

and this is terrible advice

[sweet glen]

because I need to store theme variable somewhere

[odd folio]

you did. in cookies.

[indigo fulcrum]

using useContext() react and wrap your page with <ThemeContext /> in layout

[odd folio]

if you want fully client rendered content shifting nonsense… go ahead and do what fiqih is saying lol

[sweet glen]

can I pass this cookie to this component?

[odd folio]

are you just refusing to do anything other than move it client side?

if you do what you are doing, you will STILL HAVE HYDRATION ERRORS my dude

[odd folio]

answer this

[sweet glen]

cookie loaded to zustand?

[odd folio]

why

what is calling it from zustand

where is the END RESULT of the variable

[indigo fulcrum]

Your method is good but causing more cost in real project. Always requesting cookie in every page request is not effecient especially for requesting theme variable, kinda bad

[odd folio]

you dont request cookies. They are part of the payload. There is no additional network call. Wtf are you talking about

[sweet glen]

there is a list of words. these are stored in zustand. with each update in store I set new cookie so that fresh state is always in the cookie. When I reload page I want to use this cookie as initialization value for Zustand to continue working with saved values

[brazen scarab]

don't use cookies for this, use localstorage, session storage, or the document DB

[sweet glen]

with local storage there is a nasty flickering. When I update the page it goes blank for 0.1 seconds.

I would totally like to use local storage, but I remember using cookie to store context data in Qwik and the page did not flicker at all

[brazen scarab]

Cookies were once used for general client-side storage. While this made sense when they were the only way to store data on the client, modern storage APIs are now recommended. Cookies are sent with every request, so they can worsen performance (especially for mobile data connections). Modern APIs for client storage are the Web Storage API (localStorage and sessionStorage) and IndexedDB.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

[sweet glen]

hm, local storage is a modern approach

[brazen scarab]

You'll just need a loading state, because it's rendering client-side

[sweet glen]

loading state for local storage?

it is immediate as I know

[brazen scarab]

It's almost immediate, but with react you'll have to use it in a useEffect which runs after component mount (the flash)