Redux in Next js 13.4

[cobalt snow]

you can wrap the layout in client-side context providers perfectly well, see e.g. https://nextjs.org/docs/getting-started/react-essentials#rendering-third-party-context-providers-in-server-components. your pages are still server components

that said, server components cannot consume these client-side state providers

[sterile pilot]

after wrapping up layout with provider, still pages are rendered on client side

[sterile pilot]

@cobalt snow is there any other way?

[warped cobalt]

how do you know? That should not ahppen

[rapid charm]

The big problem here is causing for client global redux state to be on the server. Usually this is accomplished by loading some amount of defaut or database data server side, applying it to a redux store, then shipping the store state to the client as serverside/initial props. Then client side code MUST hydrate first with the redux state sent by the server. After to reconcile client side stuff, in useEffect, you add a redux action that takes saved/inferred client side state.

There will be a flash of info change for anything the server didnt have.

Serializing client state hints to query parameters or cookies can help too.

[sterile pilot]

@rapid charm any example or repo for this?

[rapid charm]

It really depends on what you are trying to do, there is not a one size fits all thing.

This is a major weakness of redux

[sterile pilot]

I want to manage the global state with redux without client side rendering

[rapid charm]

You will need to describe what you are actually trying to accomplish because, from the things you have said so far, Redux doesn't make that much sense.

Are you trying to manage state that is not per-user but is global to the entire application for all users to share?

[cobalt snow]

I want to manage the global state with redux without client side rendering
redux handles client-side states, which are not applicable to the server. Hence it is not applicable to server components. What you are trying to do is impossible. For details on how to do data-fetching in server components, read https://nextjs.org/docs/app/building-your-application/data-fetching

[rapid charm]

You are replying to the wrong person 👍