This is the best channel on next ever. I am coming from backend background and had difficulties learning frontend with react and all its quarks compared to vue and nuxt. But this channel is what single-handedly convinced me to learn react and next.
Actually components marked with the “use client” directive do not result in a React Server Component Payload, yes all the components run on the server and that’s why the error is thrown but they’re not sent to the client as RSC Payload unless it’s a Server Component. Client components are rendered on the server thanks to Server Side Rendering (SSR), and later the same JS bundle re runs on the client to hydrate, which is different from RSC Payload. RSC payload it’s a new way to send data to the client, but it won’t send any JavaScript bundle or anything to hydrate on the client.
Thanks for the comment. I can see where I did not make this information clear enough. If anyone is interested, the specifics are discussed in the docs here: nextjs.org/docs/app/building-your-application/rendering/client-components#how-are-client-components-rendered
The Client-Server wrapper issue is something Next.js likely wanta to improve upon. Why? Because it warrants videos like these where we need explanations. I do appreciate the content; it really helps. The thing is that many people are complaining about Next being slow, being complex, breaking builds, etc. I'm positive that they're trying to get to a point where they will have solid, stable releases that will make all of this a thing of the past.
Thanks Dave. I am done with nextjs at this point. Beginning 2023 i was learning Rails for large apps and Svelte for small apps. I will even prefer to just have a node api than to continue using nextjs.
I was very pleasant with the knowledge you shared and how it made many concepts clear for me , especially the error related to hydration and what cause it to happen. I was also surprised to realise that I was not a subscriber even though I have been watching many of your tutorials since a long time ago 😁.
No, because Next.js renders client components on the server first. That's part of what I explain here with the window object. This means search engines will at least get to see whatever is rendered on the server before client hydration.
If you are familiar with the pages router, then client components basically render like that. The difference is that server components do not ship any JS to the browser, client components do.
Great content, can you also make a video when you get a chance about when to use Django/htmx and when to use Next.js? I know and work in both and always get confused on which one to pick.
Any specific reason why nextjs won't reconcile the server-rendered component that's being imported from a client component in dev mode, even though it's re-rendered on the client (I've added a console log and it shows server on server and client on broswer console)?? Also, since we are importing the can be client or server component from a client component it should behave as a client component, no?? If yes, it should display the appropriate ui for the client, right?? One thing I can think of is that the entire page isn't rendered again that's why we are seeing the different outputs.. but I've seen in many I cases where the page re-loads because of server changes therefore re-rendering everything on the page... Feels like bad DX to me 😢
Many thanks. I’ve been having trouble wrapping my head around how to fetch data on the server and make use of data from hooks. I kept on ending up with practically everything being a client component and fetching all my data at the top level. If I understand correctly all I have to do is separate the data fetching into a child component and pass it the hook data.
I don't know your data source, but most would use a server component to get data directly from a database. If you need to fetch data from a 3rd party API, you can do that in a server component, too. You can then pass the data to a client component.
I think much of the confusion stems from the terminology used to describe these things. A more suitable naming convention might be "dynamic component" and "static component". While this terminology may seem less intuitive initially, it eliminates the misconception that client components are exclusive to the client side.
2:00 Don't use window object directly 4:00 Use useEffect in order to use window object 5:45 Conclusion we should not access any browser object directly without useEffect. Avoid to render those objects conditionally 6:30 You don't need "use client" on top of every file. 7:30 children prop in client component can be a server component. 9:20 Sometimes you need to relod the window to let the changes make effect in dev mode 10:20 Wrapping app in a provider doesn't make whole app client-side.
I'm working on a project on T3Stack and moving Next.js page routes to the app router. I'm facing a lot of challenges in that, and this video really points out some mistakes I'm making in the migration process. Do you know of any tutorials around migrating T3Stack page routes to the app router?
Hey Dave, great video as always! Regarding the first mistake, i've learned the hard way...I made this mistake in my project and now i am having to refactor it to fix it. Basically, i am making a document automation platform with templates and documents where i use `Quill` library a lot and it was working fine and i could `npm run dev` and work on it with localhost normally. When i finally was ready to deploy, i ran `npm run build` and the problem appeared, i got this exact error you've mentioned of `window is not defined`. I struggled until finding why (apparently, the quill library uses the `window` object inside of it), and now what i am doing is creating a separate component only to load my `QuillEditor` library and then dynamic importing it with `ssr:false` to the pages/components i need to use it. I've finished doing that in one page and it worked, now i just need to fix the others...Do you know exactly why that fixes the problem? Or would you reccomend other approach? Anyways, I wish i knew that before but hey, at least i've learned the lesson and wont make that mistake ever again, and now i will always run build throughout the project not just at the end! Hahaha. Cheers man!
Btw, i am making this platform with nextjs + redux toolkit/rtk query in the frontend and django rest framework + djoser, using jwt http only secure cookie + csrf tokens at the backend. What do you think about this stack? I would love to see your opinion and also some video of yours using these nextjs + drf together!
Yes, it fixes the issue because the Quill library referenced the window object which is only available in the browser. Next.js will render on the server first - even for client components the first time. That's much of the focus of this video. Glad it helped!
That sounds like it works for you, but it also sounds complex. I'm using Next.js as a fullstack solution without an additional client-side state management library or an additional REST API. Of course, everyone's needs vary and you may need to do this. It's all good!
Hi Dave, Thank you for all the magnificent work you are doing. I love your videos, most of all because you have found a perfect method of being beginner-friendly, while not treating your viewers like idiots, which can be difficult. I would love to see you teach C#/.NET, as I struggle to find online courses that would be even remotely accessible and useful as your courses are. I also believe you would do awesome teaching lower-level languages like C, C++, or Rust. I think your unique way of teaching could alleviate so many difficulties that come with topics related to low-level languages. Have you ever considered creating such courses? Anyway, thank you for all the work you are doing. Amazing job. Cheers!
Can you explain how to use Redux Toolkit or React Redux in Next.js? After implementing it, our entire application can be either client-side or server-side. I'm unclear on how to properly use it in Next.js, so could you clarify my doubts? Also, please explain the advantages and disadvantages of using Redux in Next.js. I've noticed that there are tutorials on TH-cam not covering the use of Redux in Next.js. Is Redux unnecessary in Next.js, or is there a reason it's not widely used? If a larger application requires Redux in Next.js, how is it implemented? I'd appreciate it if you could address these concerns in your next video. I've commented multiple times on other channels, but I haven't received any responses. If you can create a video on this topic, it would be immensely helpful, as I've been struggling with these questions, and it seems others may have similar doubts. Thank you!
I definitely think this is a mess. If I was just getting started as a programmer, I would stay miles away from React. Since I've been at it for 5 years, it was challenging to learn the new paradigm but not impossible. I wish they would have used different terms to make communicating about these changes easier.
This problem with nextjs caching, dev mode vs production mode "mismatch" , is a pain point they really need to solve asap. Why even bother with dev mode, just rebuild and run in production mode. lol
Hi dave. Can you make a comment on devin ? It always scared me when i continue learn coding. Will we be replaced ? Especially junior Software engineer ?
Yess juniors with no skills will be replaced but juniors with senior skills will not be replaced and also those who don't use AI tools for optimised work they will be replaced vice versa 😅
The NoSSR solution is the 2nd one given on the Next.js docs page I reference after the useEffect solution. Link in the description for reference. That said, to be clear for anyone reading this, remember that children can still be server components - many of us think of "children" when someone mentions "wrap" or "wrapping".
The problem: I added 3 npm dependencies and it feels like I've got 10 different paradigms fighting over the project. what the fuck is a babel, vite, webpack, eslint ? and why do I have all of them ?! When the dependency has to wrap the already obfuscated nextjsconfig withDependency(nextconf) I guess you are in for some real shit :)
Hi! I'm studying English as a second language and I've never heard this expression before, so I was wondering what it means. Would you mind to tell me the meaning of it?
This is a really minor thing but it bothered me a lot, you are pronouncing Height weirdly. You keep saying "hithe" instead of "hite", sorry to point it out but I thought I was growing crazy haha
Srsly mate, You should really find something useful to do with your life, i mean, u'r really trying to critise someone's pronunciation only cuz it's different than your's? Gosh..
I understand regional differences, but I do feel that this is just an oversight where you didn't get corrected by anyone, but if you feel no need to change then carry on, just wanted to point it out in case you were interested. @@DaveGrayTeachesCode
i thought frameworks are supposed to make things easier. i understand server, client components. you should think of where do you import which component on server or client, this make things easier for me. when it comes to caching, i think nextjs is a terrible solution. it targets a certain type of application that i dont want. i find myself fighting with docs. different behavior of caching on dev and prod builds is just stupid.
This is the best channel on next ever. I am coming from backend background and had difficulties learning frontend with react and all its quarks compared to vue and nuxt. But this channel is what single-handedly convinced me to learn react and next.
Thanks!
Thank you for the support!
Actually components marked with the “use client” directive do not result in a React Server Component Payload, yes all the components run on the server and that’s why the error is thrown but they’re not sent to the client as RSC Payload unless it’s a Server Component.
Client components are rendered on the server thanks to Server Side Rendering (SSR), and later the same JS bundle re runs on the client to hydrate, which is different from RSC Payload.
RSC payload it’s a new way to send data to the client, but it won’t send any JavaScript bundle or anything to hydrate on the client.
Thanks for the comment. I can see where I did not make this information clear enough. If anyone is interested, the specifics are discussed in the docs here: nextjs.org/docs/app/building-your-application/rendering/client-components#how-are-client-components-rendered
The Client-Server wrapper issue is something Next.js likely wanta to improve upon. Why? Because it warrants videos like these where we need explanations.
I do appreciate the content; it really helps. The thing is that many people are complaining about Next being slow, being complex, breaking builds, etc. I'm positive that they're trying to get to a point where they will have solid, stable releases that will make all of this a thing of the past.
Glad you like the content and I agree! They will get it sorted.
Thanks Dave. I am done with nextjs at this point. Beginning 2023 i was learning Rails for large apps and Svelte for small apps. I will even prefer to just have a node api than to continue using nextjs.
Thanks for sharing. It has been a polarizing framework.
To be honest I am telling you that you help me a lot in my career. Keep going keep it up
Always glad to hear that! 🙌
What a great content 😊 this is the best channel I’ve ever seen about this topic
Thank you!
I was very pleasant with the knowledge you shared and how it made many concepts clear for me , especially the error related to hydration and what cause it to happen. I was also surprised to realise that I was not a subscriber even though I have been watching many of your tutorials since a long time ago 😁.
Welcome aboard!
Was going over this the other day, and was confused. This cleared things up
Thanks Dave👍
Glad to help
Hope one day you will make a Remix series and compare it to Next.js
Yes remix is awesome it doesn't consume that much memory like nextjs
Great request! 🙌
Thanks Dave concise and to the point.
You're welcome! 🙌
to the point? it took 1.5 mins just for the video to start
@@codesymphony 😆 YMMV
@@DaveGrayTeachesCode keep up the good work 😋
Does turning an entire page into a client component mean that search engines cannot index the contents of the page properly?
No, because Next.js renders client components on the server first. That's part of what I explain here with the window object. This means search engines will at least get to see whatever is rendered on the server before client hydration.
@@DaveGrayTeachesCode thank you, I was having troubling finding a clear answer on this !
@@DaveGrayTeachesCode NextJs renders client components on the server first? I thought it only renders server components on the server?.
If you are familiar with the pages router, then client components basically render like that. The difference is that server components do not ship any JS to the browser, client components do.
@@bioburden ohh thanks for the clarification
Great content, can you also make a video when you get a chance about when to use Django/htmx and when to use Next.js? I know and work in both and always get confused on which one to pick.
You can use either one if you know both. I always say go with what you know best!
Any specific reason why nextjs won't reconcile the server-rendered component that's being imported from a client component in dev mode, even though it's re-rendered on the client (I've added a console log and it shows server on server and client on broswer console)?? Also, since we are importing the can be client or server component from a client component it should behave as a client component, no?? If yes, it should display the appropriate ui for the client, right??
One thing I can think of is that the entire page isn't rendered again that's why we are seeing the different outputs.. but I've seen in many I cases where the page re-loads because of server changes therefore re-rendering everything on the page... Feels like bad DX to me 😢
Many thanks. I’ve been having trouble wrapping my head around how to fetch data on the server and make use of data from hooks. I kept on ending up with practically everything being a client component and fetching all my data at the top level. If I understand correctly all I have to do is separate the data fetching into a child component and pass it the hook data.
I don't know your data source, but most would use a server component to get data directly from a database. If you need to fetch data from a 3rd party API, you can do that in a server component, too. You can then pass the data to a client component.
I think much of the confusion stems from the terminology used to describe these things. A more suitable naming convention might be "dynamic component" and "static component".
While this terminology may seem less intuitive initially, it eliminates the misconception that client components are exclusive to the client side.
I think you make a good point!
sometimes I get confused with this use client thing, usually I quick fix it with lazy load the component (next/dynamic)
I had an issue very weird on some tests with next, to be honest i used angular at the end of the day
2:00 Don't use window object directly
4:00 Use useEffect in order to use window object
5:45 Conclusion we should not access any browser object directly without useEffect. Avoid to render those objects conditionally
6:30 You don't need "use client" on top of every file.
7:30 children prop in client component can be a server component.
9:20 Sometimes you need to relod the window to let the changes make effect in dev mode
10:20 Wrapping app in a provider doesn't make whole app client-side.
Good outline
I'm working on a project on T3Stack and moving Next.js page routes to the app router. I'm facing a lot of challenges in that, and this video really points out some mistakes I'm making in the migration process. Do you know of any tutorials around migrating T3Stack page routes to the app router?
Awesome video, thank you!
You're welcome!
It is also worth mentioning that importing a client component into another (server) component does not make it a "use client"
True!
Hey Dave, great video as always! Regarding the first mistake, i've learned the hard way...I made this mistake in my project and now i am having to refactor it to fix it. Basically, i am making a document automation platform with templates and documents where i use `Quill` library a lot and it was working fine and i could `npm run dev` and work on it with localhost normally. When i finally was ready to deploy, i ran `npm run build` and the problem appeared, i got this exact error you've mentioned of `window is not defined`. I struggled until finding why (apparently, the quill library uses the `window` object inside of it), and now what i am doing is creating a separate component only to load my `QuillEditor` library and then dynamic importing it with `ssr:false` to the pages/components i need to use it. I've finished doing that in one page and it worked, now i just need to fix the others...Do you know exactly why that fixes the problem? Or would you reccomend other approach? Anyways, I wish i knew that before but hey, at least i've learned the lesson and wont make that mistake ever again, and now i will always run build throughout the project not just at the end! Hahaha. Cheers man!
Btw, i am making this platform with nextjs + redux toolkit/rtk query in the frontend and django rest framework + djoser, using jwt http only secure cookie + csrf tokens at the backend. What do you think about this stack? I would love to see your opinion and also some video of yours using these nextjs + drf together!
Yes, it fixes the issue because the Quill library referenced the window object which is only available in the browser. Next.js will render on the server first - even for client components the first time. That's much of the focus of this video. Glad it helped!
That sounds like it works for you, but it also sounds complex. I'm using Next.js as a fullstack solution without an additional client-side state management library or an additional REST API. Of course, everyone's needs vary and you may need to do this. It's all good!
For Quill, use dynamic import instead. This will solve your import issues
Great Video!
Thank u sir... I learned a lot of things from your videos ❤ Love from INDIA ❤
Glad to hear that
Thanks for the content. You help so much.
You're welcome 🙌
Will server components work if we run the build command and host them in an NGINX docker container??
Hi Dave,
Thank you for all the magnificent work you are doing. I love your videos, most of all because you have found a perfect method of being beginner-friendly, while not treating your viewers like idiots, which can be difficult.
I would love to see you teach C#/.NET, as I struggle to find online courses that would be even remotely accessible and useful as your courses are. I also believe you would do awesome teaching lower-level languages like C, C++, or Rust. I think your unique way of teaching could alleviate so many difficulties that come with topics related to low-level languages. Have you ever considered creating such courses?
Anyway, thank you for all the work you are doing. Amazing job. Cheers!
Thank you for the kind words and for the requests! 🙌
Thanks for the informative video Dave. May God bless you
You're welcome!
Great tips thanks!
Really tiring to use this tool. It really doesn't want to be used.
It can feel that way
All this time thinking I can't render server components below client components. When I always used client side providers wrapping the entire app
Don't feel bad. It isn't intuitive and you aren't the only one. 🙌
But how to prevent flashing zero?
You could initialize the state with null
How to explain something in less than 15 minutes better than hours elsewhere.
Thanks Dave 👍
You're welcome!
is there any other way? i don't like that delay caused by useEffect
Check out the link to the docs I gave in the description. They offer a few suggestions.
Context sometimes works unpredictable. Like separate from project.
Thanks, great video
You're welcome!
Good stuff, thank you
You're welcome!
Awesome ❤
Can you explain how to use Redux Toolkit or React Redux in Next.js? After implementing it, our entire application can be either client-side or server-side. I'm unclear on how to properly use it in Next.js, so could you clarify my doubts? Also, please explain the advantages and disadvantages of using Redux in Next.js.
I've noticed that there are tutorials on TH-cam not covering the use of Redux in Next.js. Is Redux unnecessary in Next.js, or is there a reason it's not widely used? If a larger application requires Redux in Next.js, how is it implemented?
I'd appreciate it if you could address these concerns in your next video. I've commented multiple times on other channels, but I haven't received any responses. If you can create a video on this topic, it would be immensely helpful, as I've been struggling with these questions, and it seems others may have similar doubts. Thank you!
Can pre render be opted out of?
Look at the NoSSR solution on the Next.js docs page I referenced.
thanks man ❤️💓
Welcome! 🙌
I definitely think this is a mess. If I was just getting started as a programmer, I would stay miles away from React. Since I've been at it for 5 years, it was challenging to learn the new paradigm but not impossible. I wish they would have used different terms to make communicating about these changes easier.
This was my error yesterday 😂 I went crazy
You are not alone.
@@DaveGrayTeachesCode I found a new solution. I let the backend guy worry about it haha
Thank you♥
Welcome!
This problem with nextjs caching, dev mode vs production mode "mismatch" , is a pain point they really need to solve asap. Why even bother with dev mode, just rebuild and run in production mode. lol
This is a fair point
Thanks sir
Hi dave.
Can you make a comment on devin ? It always scared me when i continue learn coding. Will we be replaced ? Especially junior Software engineer ?
No. U can continue
Yess juniors with no skills will be replaced but juniors with senior skills will not be replaced and also those who don't use AI tools for optimised work they will be replaced vice versa 😅
I'm asked about AI frequently. I made a video: th-cam.com/users/shortsc8tUBvaAP1A
Thoughts on Web Components?
As much as I like working in next, having to fix the hydration error like that feels so bad and hacky. I mean if it works it works, but y'know...
Agree!
We can just create a no ssr component to wrap these elements
The NoSSR solution is the 2nd one given on the Next.js docs page I reference after the useEffect solution. Link in the description for reference. That said, to be clear for anyone reading this, remember that children can still be server components - many of us think of "children" when someone mentions "wrap" or "wrapping".
You are the best/ Thx
Thank you!
The problem: I added 3 npm dependencies and it feels like I've got 10 different paradigms fighting over the project. what the fuck is a babel, vite, webpack, eslint ? and why do I have all of them ?! When the dependency has to wrap the already obfuscated nextjsconfig withDependency(nextconf) I guess you are in for some real shit :)
subscribed
Welcome aboard!
hi Dave)
Hello 👋
please add #NextJs to #Vite
Nice request!
Wheres the solution for these mistakes
I show them in the video
Nextjs14 is fast turning into the vietnam of react developers.
Hi! I'm studying English as a second language and I've never heard this expression before, so I was wondering what it means. Would you mind to tell me the meaning of it?
I believe it is referring to the Vietnam war where the US had soldiers that either didn't return home or came home with PTSD.
@@DaveGrayTeachesCode thx a lot😁
This is a really minor thing but it bothered me a lot, you are pronouncing Height weirdly. You keep saying "hithe" instead of "hite", sorry to point it out but I thought I was growing crazy haha
Yes different parts of the world pronounce things a little differently at times. Or it could just be me 😆
Srsly mate, You should really find something useful to do with your life, i mean, u'r really trying to critise someone's pronunciation only cuz it's different than your's? Gosh..
I understand regional differences, but I do feel that this is just an oversight where you didn't get corrected by anyone, but if you feel no need to change then carry on, just wanted to point it out in case you were interested. @@DaveGrayTeachesCode
It was done with the intention of helping, sorry you feel this way.@@BrenoCarv
@@BrenoCarvsomeone forgot his meds today
In would subscribe to this channel, but I am already subscribed to it. 😊
Right on! 🙌
i thought frameworks are supposed to make things easier. i understand server, client components. you should think of where do you import which component on server or client, this make things easier for me.
when it comes to caching, i think nextjs is a terrible solution. it targets a certain type of application that i dont want. i find myself fighting with docs. different behavior of caching on dev and prod builds is just stupid.
Many feel this pain. 💯
Thanks sir
Welcome!