For those left with the question: "Isn't this messing up the whole SSR thing" or "Now that there is a client component wrapping the entire application, isn't it forcing all components to act as client components", read along. This is not actually the case, server components are only handled as client components when they are directly imported and rendered in a client component (that has 'use client'). In this implementation they are not actually imported, but received as children. When you do this, the `{ children }` acts as a "hole", it's not rendered there but in the parent component and then passed (as children) to "fill the hole". This is a bit confusing but is in the docs, look for "Nesting Server Components inside Client Components" in the "React Essentials" section. You can confirm this pretty easily, follow the video and wrap the layout children in the Redux provider. Now, leave the page.tsx file as a server component (no 'use client') and add a console.log to it. Notice that the log only happens in the server, not in the browser console, this is because the component is still handled by the framework as a server component. Or you can just install and add the "server only" directive at the top of page.tsx and confirm that you are not getting any errors ¯\_(ツ)_/¯. Also, you don't have to add "use client" in every redux file, only in the provider. Fun fact: Next.js is already using redux under the hood, if you have the Redux DevTools extension installed you can find a next-router store.
hi , if i remove "use client" in page.tsx i receive issue "Error : (0 , _react.createContext) is not a function". i dont like to install third party "server only" . i just want to know , is it a best practice to use "use client" ?? any way to implement redux tool kit without using "use client" ??
For example, i have asyncThunk "fetchPosts" where i just fetch posts and i want my app to fetch posts on initilization , in CSR we usually just dispatch action by hand in app.js file since we have access to the store. How can we implement this logic in Next with App Router Approach?
@@yannikiforov3405выносишь функцию сервера в отдельную папку и делаешь там файл, где будут храниться твои функции и делаешь сверху "use server" и всё твоя функция будет выполняться на сервере, функцию Redux ты можешь просто экспортировать в твой файл страницы и там сделать "use client"
@@rhinoman86 In case your application parent component is client side then you can use async thunk from redux (remember redux working only on client, it doesn't work on server), if it's server component then you can use built-in upgraded fetch method from Next as one of the options. Depends on how exactly you design the application. I just think if you about to wrap whole app in redux provider (meaning make it render on fully client side) then maybe you no need Next at all but you can still build Next app using only client components and using next features. This is my thoughts
Thanks for explaining this clearly. Most other RUclipsrs tend to assume this knowledge is common so move along without such detail as you have provided. Thanks
Really Bro thanks a lot for explaining this so clearly. This helped me to build the app which i was not able to because of this redux error thanks a lot bro for this help keep making this sort of videos with simplicity and clarity
It works but if I refresh page it shows following error, Unhandled Runtime Error Error: could not find react-redux context value; please ensure the component is wrapped in a
Does wrapping the children with the component make every single child component a client side component? If that's the case, doesn't it destroy the whole point of the app directory?
No it doesn't. You still have to say 'use client'; on the child components that you want to access the Redux store. They're still server side by default.
I am experiencing an issue where I am unable to make progress due to an error. Here is the error message: "Unhandled Runtime Error Error: Could not find the react-redux context value. Please make sure that the component is wrapped in a ."
sorry, i do not get, you are creating GlobalRedux with in the app folder, does not it be part of the route and cause in inefficiency in my app, please correct me if i am wrong.
Very very informative and much needed. I am studying Next13 right now to master it and your info is helping my comprehension on these features and how to use them properly. 🙌 Thought I would pay you back with some engagement and like/ share 😅💯
What's a point of this? If you need SEO your settings is not gonna be work, but if you don't you just could use react+toolkit. The main reason people use nextjs is SSR, for seo, so do you know how to make ssr and toolkit work together?
Is it good to use "use client" in every page.tsx? Otherwise, it is difficult to work with redux and context. I once heard that this is bad practice, and page.tsx should be left to the server. Where is the truth?)
I searched for hours to try to get this to work. The only problem is that I'm not using typescript. I'm not sure how to set up the store without it. Do you have a plain js version?
This is a very great tutorial, I’ve been searching for something like this for a while now. Thanks 🙏🏽 I have a question though, can redux persist work with this? If yes, how?
I have deployed the same code to vercel and state persists. So i look like vercel and netlify publish codebase in diferent way. Can anyone explain that?
Youre just side stepping SSR completely and turning everything into client components. Thats not super helpful. Why not touch on preloading/hydrating the state from the server
Pls create the Rant video on this. Am a bit disappointed with it too. Not supporting hooks & store in server components is bad. Practically all components would be interactive with states. My Next app would be full of CSR components, I would instead prefer going back to React.
For those left with the question: "Isn't this messing up the whole SSR thing" or "Now that there is a client component wrapping the entire application, isn't it forcing all components to act as client components", read along.
This is not actually the case, server components are only handled as client components when they are directly imported and rendered in a client component (that has 'use client'). In this implementation they are not actually imported, but received as children. When you do this, the `{ children }` acts as a "hole", it's not rendered there but in the parent component and then passed (as children) to "fill the hole".
This is a bit confusing but is in the docs, look for "Nesting Server Components inside Client Components" in the "React Essentials" section.
You can confirm this pretty easily, follow the video and wrap the layout children in the Redux provider. Now, leave the page.tsx file as a server component (no 'use client') and add a console.log to it. Notice that the log only happens in the server, not in the browser console, this is because the component is still handled by the framework as a server component. Or you can just install and add the "server only" directive at the top of page.tsx and confirm that you are not getting any errors ¯\_(ツ)_/¯.
Also, you don't have to add "use client" in every redux file, only in the provider.
Fun fact: Next.js is already using redux under the hood, if you have the Redux DevTools extension installed you can find a next-router store.
hi , if i remove "use client" in page.tsx i receive issue "Error : (0 , _react.createContext) is not a function". i dont like to install third party "server only" . i just want to know , is it a best practice to use "use client" ?? any way to implement redux tool kit without using "use client" ??
Bro, much appreciated, shouldn't you be like teaching us more of this stuff,
For example, i have asyncThunk "fetchPosts" where i just fetch posts and i want my app to fetch posts on initilization , in CSR we usually just dispatch action by hand in app.js file since we have access to the store. How can we implement this logic in Next with App Router Approach?
@@yannikiforov3405выносишь функцию сервера в отдельную папку и делаешь там файл, где будут храниться твои функции и делаешь сверху "use server" и всё твоя функция будет выполняться на сервере, функцию Redux ты можешь просто экспортировать в твой файл страницы и там сделать "use client"
@@rhinoman86 In case your application parent component is client side then you can use async thunk from redux (remember redux working only on client, it doesn't work on server), if it's server component then you can use built-in upgraded fetch method from Next as one of the options. Depends on how exactly you design the application. I just think if you about to wrap whole app in redux provider (meaning make it render on fully client side) then maybe you no need Next at all but you can still build Next app using only client components and using next features. This is my thoughts
I love your english, I am a spanish speaker and I can understand any single word you say, that's wonderful. Nice tutorial
Thanks for explaining this clearly. Most other RUclipsrs tend to assume this knowledge is common so move along without such detail as you have provided. Thanks
this is the only resource i have found on the subject that explains it well enough to implement my own logic.
Thanks a lot. It's really helpful. You completed the major thing only in 13 minutes. Good knowledge.
I was upset for 24 hours. Everything felt easy after watching one of your videos...thankuu so much.. 🇮🇳
I'm in the same boat lol
Imo, worst thing with Next13 is that it's a framework that tries to lock you in the Vercel ecosystem.
just use docker and your own server
Really Bro thanks a lot for explaining this so clearly. This helped me to build the app which i was not able to because of this redux error thanks a lot bro for this help keep making this sort of videos with simplicity and clarity
It works but if I refresh page it shows following error, Unhandled Runtime Error
Error: could not find react-redux context value; please ensure the component is wrapped in a
I'm getting this same issue
I can't thank you enough for this - it helped me so much
I'm glad it was so helpful! I was completely lost at first with the new app directory system. I hoped this video would be helpful for others
Does wrapping the children with the component make every single child component a client side component?
If that's the case, doesn't it destroy the whole point of the app directory?
No it doesn't. You still have to say 'use client'; on the child components that you want to access the Redux store. They're still server side by default.
@@NativeNotify Cool!
@@NativeNotify Very cool!
@@NativeNotify are you sure? Because for what I search all the children of a client-side component/provider will be a client-side component...
@@NativeNotify I think the best approach is only wrapping the on those components that will need to be a client-side
oh my, thank you so much. I searched this ptoblem 4 hours
I am experiencing an issue where I am unable to make progress due to an error. Here is the error message:
"Unhandled Runtime Error
Error: Could not find the react-redux context value. Please make sure that the component is wrapped in a ."
Same issue
What if I want to store data coming from the server in the initial state of the redux store?
thanks man , great tutorial , quite helpful
Wrapping clinet-side {children} in the layout.tsx file, isn't convert the whole app into client side?
Thanks a lot. Stucked at error, solved by your video
sorry, i do not get, you are creating GlobalRedux with in the app folder, does not it be part of the route and cause in inefficiency in my app, please correct me if i am wrong.
very informative ❤❤❤❤💻💻
Thank you very much for this great tutorial, this helped me so much! 🥰
Straight forward and simple
This tutorial was awesome. Can you make another video on how to call backend from slices?
Very very informative and much needed. I am studying Next13 right now to master it and your info is helping my comprehension on these features and how to use them properly. 🙌 Thought I would pay you back with some engagement and like/ share 😅💯
Thanks! It's so helpful!
I keep getting an issue when I run the build script. Does anyone else have this issue? I get this error: Error occurred prerendering page "/".
I've encountered the same problem and I didn't find any solution..
What's a point of this? If you need SEO your settings is not gonna be work, but if you don't you just could use react+toolkit. The main reason people use nextjs is SSR, for seo, so do you know how to make ssr and toolkit work together?
Is it good to use "use client" in every page.tsx? Otherwise, it is difficult to work with redux and context. I once heard that this is bad practice, and page.tsx should be left to the server. Where is the truth?)
thank for this toturial, it is help me so much
You're welcome!
Doesn't that make all the segments the client side??
ok but now any component that uses states from redux will be client side, right?
Yes that is correct. They have to be client side to use Redux since Redux lives on the client side
I searched for hours to try to get this to work. The only problem is that I'm not using typescript. I'm not sure how to set up the store without it. Do you have a plain js version?
I think if you ignore adding the typings, js would figure exactly what you're trying to do. But if it doesn't work, you can ask ChatGPT.
It's was very short and helpful video
Thanks, Its too good... need to change file extension .js to tsx
What happens when you move from one page to the other. will the store still be available?
Yes it will if you set it up the way it's set up in the video
Hello, how can we use redux on server side rendering ?
Check this video out for how to use redux on both server and client component: ruclips.net/video/dRLjoT4r-jc/видео.html&ab_channel=JackHerrington
please the video link is private, could you share a public video ? I mean the video showing how to use redux in server components@@bjornallvin3162
This is a very great tutorial, I’ve been searching for something like this for a while now. Thanks 🙏🏽
I have a question though, can redux persist work with this? If yes, how?
Thank you so much. Also make videos on how to integrate API in nextjs 13.
This video talks about APIs in nextjs 13: ruclips.net/video/yRJd_tlHu9I/видео.html
Thanks man! That helped me.
Thank you man, great and concice video!
Does state persist when you navigate to diferent page?
Yes it does
@@NativeNotify i followed your tutorial and state is persist in dev mode but when deploy to netlify it is not.
I have deployed the same code to vercel and state persists. So i look like vercel and netlify publish codebase in diferent way. Can anyone explain that?
Excellent video, thank you very much. Has anyone used createWrapper from the library next-redux-wrapper?
Thank you! It's work
Thanks. You help me so much.
on me, why props {children}
must be given a type children: React.ReactNode; ?
It works!💯
For anyone watching this, it seems you only need 'use client' in the Providers.tsx component, not in every redux file.
Dude, you saved my life
thank you bro
Thanks!
Great 👍🎊
the best video!! thk
Why all software youtubers obsessed with "counter"!?
I searched for CRUD and Redux and NextJS. ;(
Very Nice
my savior
You have messed up the whole concept of SSR with this lol
I thought so too
nice bro
Youre just side stepping SSR completely and turning everything into client components. Thats not super helpful. Why not touch on preloading/hydrating the state from the server
Thanks bro
thanks s lot
Pls create the Rant video on this. Am a bit disappointed with it too. Not supporting hooks & store in server components is bad. Practically all components would be interactive with states. My Next app would be full of CSR components, I would instead prefer going back to React.
You are God 🙏
There's only one God, the Father. And Jesus Christ is His only begotten Son. I'm nothing without Jesus
First five minutes is just imports libraries. What a waste of my time.
i have error undefined" is not valid JSON at JSON.parse () at parseModel
I get this too when i say 'use client' in layout.js, no idea how to fix it :(
Downgraded Next from 13.3 to 13.2.4 works theres a bug in Windows backslash something something