I've created a video explaining whether using Provider on top makes every component a client component. ruclips.net/video/yU34dN0dPxY/видео.html&ab_channel=OskarPuchalski
I am happy to say that i am using the latest version of next js and with some minor tweaks this has managed to help me so so much My thanks kind gentleman
It there any way to use client state at server component (on server side)? For example, I have user in my store and I need some user's data to make fetch from server component to API endpoint like /api/users/userIdFromStore. Because I don't want to use stuff like RTK query to make fetch from client side. I want to make that at server and give my client ready to use page
I am not able to use useSelector in different file. It is working on the file where I used dispatch but in other file e.g route '/cart' it shows initial state and not the new data. I don't know why this is happening but I am stuck from 3 days.
Good job but when I refresh the page the counter goes to zero. Do you have the same behavior? if so is there a way to persist the store content in an app-router app ?
Redux state is being kept on the client side so it's normal that if you reload a webpage you lose your local state. To persist that state, you can use either localStotrage or backend with database and store your data there.
redux-toolkit.js.org/usage/nextjs#introduction This article suggests that we create redux store per request. I'm unable to understand what the actual reason behind it. The article doesn't explain it well (or am I too dumb to get it?), whatever the reason, could you illustrate few examples to make me understand when and when not the store be made global (or per request)
Not only RTK query, but also almost all state management for next app router based suggests we should have it per request not global. I think because of the presence of React Server Component that if we use an old paradigm (to just dump all stores to become global) it will behave weirdly.
You are welcome! Well, the nature of Server Component is they are not intractable, so they don't use javascript, and you can't use Redux inside of them. But usually you can just use client component inside server component.
Hey Oskar, nice video! I'm new to Next 13 and this was very helpful. On other things, I'm starting an admin dashboard app for a e-commerce and community hub. What do you recommend as state manager, Context, Redux or Zustand? Thank you
I'm really glad that you found it helpful! Always start of thinking if you really need state manager. What data would you keep there? If most of them came from your API, then I really suggest using react-query. But if you really need state manager I would go with Zustand, I use it in one of my application and it's great! If you have some other questions, feel free to ask!
Why you think so? You can use both SSR and client side store for example for complex client side user interactions and logic and avoiding prop drilling.
I've created a video explaining whether using Provider on top makes every component a client component. ruclips.net/video/yU34dN0dPxY/видео.html&ab_channel=OskarPuchalski
I had a bug which took me a day and finally it's solved by by watching this video :,))). I'm so happy. thank you.
I'm happy to hear that!
Thx...this helped me a lot...
I am happy to say that i am using the latest version of next js and with some minor tweaks this has managed to help me so so much
My thanks kind gentleman
It there any way to use client state at server component (on server side)? For example, I have user in my store and I need some user's data to make fetch from server component to API endpoint like /api/users/userIdFromStore. Because I don't want to use stuff like RTK query to make fetch from client side. I want to make that at server and give my client ready to use page
Hello, im viewer in korea. Thanks for posting this video. it was helpful
I'm glad it helped you!
nice video, it works for me. Thanks! :)
Thank you, it helped me.
Thanks man appreciate it. It was so easy after watching your video
I am not able to use useSelector in different file. It is working on the file where I used dispatch but in other file e.g route '/cart' it shows initial state and not the new data. I don't know why this is happening but I am stuck from 3 days.
Are you sure this is a client component? You can use hooks only in client components
@@oskarpuchalski Yes, I've added "use client" and its only a rfce with useSelector but its not working. I think redux persist could be the solution
@@ShuklaAbhijeet if you solved the issue.. please let me know how to do it.. or share any working resource
I have exactly the same problem :(
Did using redux-persist work for you?
@@juliesultanova6212 I wasted 2 weeks then removed redux from next js because they have compatibility issues
parent component is client-side render if wrap the whole page are also render client-side render ???
No. Check out another video on that topic on my channel where I explain it. It's called "Can You Use Server Component Inside Client Component"
Thanks for helping me set up everything the way I wanted ^^
can You show version of next? can you show this complite source?
well I have a bug.. I cannot use redux devtools (it couldnt detect the redux) when first render it occured (next.js 14 app router)
i was trying on my code, but the provider shows an error all time, can you help me?
Sure, what error does it shows to you? Maybe you forgot to use 'use client' in component that uses redux iteself?
Thanks a lot man, I was stuck for so long ❤.
Glad it helped you!
What is your vscode theme, can u share pls?
Good job but when I refresh the page the counter goes to zero. Do you have the same behavior? if so is there a way to persist the store content in an app-router app ?
Redux state is being kept on the client side so it's normal that if you reload a webpage you lose your local state. To persist that state, you can use either localStotrage or backend with database and store your data there.
redux-toolkit.js.org/usage/nextjs#introduction This article suggests that we create redux store per request. I'm unable to understand what the actual reason behind it. The article doesn't explain it well (or am I too dumb to get it?), whatever the reason, could you illustrate few examples to make me understand when and when not the store be made global (or per request)
Not only RTK query, but also almost all state management for next app router based suggests we should have it per request not global. I think because of the presence of React Server Component that if we use an old paradigm (to just dump all stores to become global) it will behave weirdly.
this is nice! Could you make a video explaining createAsyncThunk when trying to dispatch async functions?
Thank you for the video. Do you know how to use redux with server components in Next.js with App Router?
You are welcome! Well, the nature of Server Component is they are not intractable, so they don't use javascript, and you can't use Redux inside of them. But usually you can just use client component inside server component.
thank you@@oskarpuchalski
perfect, thanks guy ❤
Very nice video - wanted to check whats the utility you are using like the spotlight search to open browser and code editor please
It's Raycast App. It's available only for MacOS at this time.
Hey Oskar, nice video! I'm new to Next 13 and this was very helpful. On other things, I'm starting an admin dashboard app for a e-commerce and community hub. What do you recommend as state manager, Context, Redux or Zustand? Thank you
I'm really glad that you found it helpful!
Always start of thinking if you really need state manager. What data would you keep there? If most of them came from your API, then I really suggest using react-query. But if you really need state manager I would go with Zustand, I use it in one of my application and it's great!
If you have some other questions, feel free to ask!
Hi, do you have a plan to do one video about how to authorization? if you use jwt, how to get refresh token smoothly?
Great work! 🔥
it was helpful!
Happy to hear that!
thank you so much
thanks bro
Thanks!
King
of corse vrey important is to make store and work with it on client side on Next app with SSR????? Rename video
Why you think so? You can use both SSR and client side store for example for complex client side user interactions and logic and avoiding prop drilling.
You are too slow, not expressive. Just bored the hell out of me throughout the video
Bruuuh! You do realise you can speed up the video right?