The intention here isn't to say that using "use client" is always a problem. It only becomes a problem if someone uses "use client" everywhere in their app, effectively making it all client side, preventing the benefits of server components. Next.js recommends this approach in their docs here: nextjs.org/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree.
Good tutorial Ryan. Lets saw I want to use tanstack query for data fetching and showing loading, error, caching etc. What would be the best practice to do. Assuming I have an external API from which I want to fetch data.
Thank you! I’d have to try it out and see, but my initial thought would be to fetch the data from server components and potentially use something like suspense. But without diving into the code and trying it out, I can’t provide the exact best practice for you
I'm a beginner on this and when prioritizing server components with client as leaf should we also prioritize data fetching and other http requests primary on server/client or doesn't matter?
I prefer to fetch data in server components. It prevents you from needing to use the useEffect and it can allow some other things to be easier. But sometimes you may still need to use client components but my default is fetching in server components
@@coderyan agree. one of the biggest advantages of next.js is the SSR and furthermore since the app router integration in next13 enabling server actions. that means you want everything rendered/processed on the server (if possible). one major field where use client comes into play is when handling sensitive data which should ONLY be rendered on the client side, eg blockchain/dlt apps (web3 etc). and the second field is for perfomance reasons, eg if the usage exceeds the server capacities it can be a solution to pass http fetches to the client side (but this is not a long term soltion)
Note: you dont have to turn it into a use client component. Or go to another file. You can add a component directly in that file that uses events and react hooks. Without having to switch the component to client nor add another file
hooks like useEffect, useState, useRef etc can not be used in server components. whatever you are talking about this is the most common approach, another possibilty is to use form and formaction/states eg with zod if you want to avoid client side rendering
@@rizzling-g1j yes you can. try it. instead of creating a new file for the component just make the component directly in the file you're using. you DONT need to change it to client.
@@lolhp._. haha nope this does NOT work. it is possible to create a component which has 'use client' in it inside of a server script, if the 'use client' flag is placed only INSIDE the component declaration (not at the top of the script). but that still makes the component itself (with the hooks) a client component....the hooks like state hooks from useState only work on CSR (client side rendering).
@@coderyan but you can leave it as it is as well, I think the average viewer has not the experience to differ that nuance :D and it wasn't meant to be negative anyway
@@coderyan in case you need a video idea: page transition issues with framer motion (especially AnimatePresence)....it is not possible to use a template file. this problem already exists for years. vercel published a fix when using page router which can be used, but nothing for app router. maybe you are familiar with he issue, but to give a short description: on page transition with template.js/jsx (or on ts/tsx) the complete rendered content gets dropped, that means that any exit animations from framer motion wont work. there are couple of work arounds out there, but not a single youtube tutrial on that problem and how to solve it :P may approach is always a custom PageTransitionWrapper which I use inside the layout file. there was only one youtube tutorial how to make a custom wrapper butto which uses router.push. but that does not work in many cases.
Thanks for the content, I have a request, and that is, would you like to take a video about how you fetch the data that is exposed by an api in client and server components with like react or redux queries according your choice by the way I am not sure whether it is possible or not? Thanks again
It depends a bit on where that other component is in your component tree. You could pass the state down as a prop, as you don’t always need to have client components without any children. Just trying to keep them a little further down the tree is probably a decent rule of thumb
I don't think it's a problem. You can make all components client side and still use the routing system, middleware, etc. You are just missing SSR witch isn't neccessary to build great app.
I think it should be the norm, but it can be easy to leave a lot of code client side when it probably shouldn’t be. Does that kind of answer the question?
The intention here isn't to say that using "use client" is always a problem. It only becomes a problem if someone uses "use client" everywhere in their app, effectively making it all client side, preventing the benefits of server components. Next.js recommends this approach in their docs here: nextjs.org/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree.
to be fair you do say that in the first 10 seconds of the video Ryan xD
@uixmat sorry, are you saying it came across as it’s never okay to use the “use client” directive?
@@coderyan no mate, quite the opposite!
Haha okay, that’s what I thought you meant but just wanted to make sure 🙏
@@coderyan all good brother! appreciate the content!
love these quick little refresher videos :-)
Happy to hear it!
Good tutorial Ryan.
Lets saw I want to use tanstack query for data fetching and showing loading, error, caching etc. What would be the best practice to do. Assuming I have an external API from which I want to fetch data.
Thank you! I’d have to try it out and see, but my initial thought would be to fetch the data from server components and potentially use something like suspense. But without diving into the code and trying it out, I can’t provide the exact best practice for you
I'm a beginner on this and when prioritizing server components with client as leaf should we also prioritize data fetching and other http requests primary on server/client or doesn't matter?
I prefer to fetch data in server components. It prevents you from needing to use the useEffect and it can allow some other things to be easier. But sometimes you may still need to use client components but my default is fetching in server components
@@coderyan agree. one of the biggest advantages of next.js is the SSR and furthermore since the app router integration in next13 enabling server actions. that means you want everything rendered/processed on the server (if possible). one major field where use client comes into play is when handling sensitive data which should ONLY be rendered on the client side, eg blockchain/dlt apps (web3 etc). and the second field is for perfomance reasons, eg if the usage exceeds the server capacities it can be a solution to pass http fetches to the client side (but this is not a long term soltion)
Note: you dont have to turn it into a use client component. Or go to another file. You can add a component directly in that file that uses events and react hooks. Without having to switch the component to client nor add another file
hooks like useEffect, useState, useRef etc can not be used in server components. whatever you are talking about this is the most common approach, another possibilty is to use form and formaction/states eg with zod if you want to avoid client side rendering
@@rizzling-g1j yes you can. try it. instead of creating a new file for the component just make the component directly in the file you're using. you DONT need to change it to client.
@@lolhp._. haha nope this does NOT work. it is possible to create a component which has 'use client' in it inside of a server script, if the 'use client' flag is placed only INSIDE the component declaration (not at the top of the script). but that still makes the component itself (with the hooks) a client component....the hooks like state hooks from useState only work on CSR (client side rendering).
@@rizzling-g1j dont say it doesnt Try it yourself first
@@lolhp._. you are such a fool, talking bullshit, stfu if you dont have any idea what you are talking about
cool video, but the title is a bit confusing xD it implicits a next.js problem, but this is more a common mistake made from newbies using next.js :D
Very fair comment. I’ll update the title as well as the thumbnail to avoid any further confusion here
@@coderyan but you can leave it as it is as well, I think the average viewer has not the experience to differ that nuance :D and it wasn't meant to be negative anyway
@rizzling-g1j well either way, I appreciate your kind feedback. Thanks!
@@coderyan in case you need a video idea: page transition issues with framer motion (especially AnimatePresence)....it is not possible to use a template file. this problem already exists for years. vercel published a fix when using page router which can be used, but nothing for app router. maybe you are familiar with he issue, but to give a short description: on page transition with template.js/jsx (or on ts/tsx) the complete rendered content gets dropped, that means that any exit animations from framer motion wont work. there are couple of work arounds out there, but not a single youtube tutrial on that problem and how to solve it :P may approach is always a custom PageTransitionWrapper which I use inside the layout file. there was only one youtube tutorial how to make a custom wrapper butto which uses router.push. but that does not work in many cases.
This is normal for me nowadays honestly i am enjoying doing that abstraction into layers
Thanks for the content, I have a request, and that is, would you like to take a video about how you fetch the data that is exposed by an api in client and server components with like react or redux queries according your choice by the way I am not sure whether it is possible or not? Thanks again
what about if I wanna use that state to another component?
It depends a bit on where that other component is in your component tree. You could pass the state down as a prop, as you don’t always need to have client components without any children. Just trying to keep them a little further down the tree is probably a decent rule of thumb
Nextjs has introduced just problems ever since vercel bought it ngl
I don't think it's a problem. You can make all components client side and still use the routing system, middleware, etc. You are just missing SSR witch isn't neccessary to build great app.
Nice video but isnt this the normal way to use nextjs?
I’m not sure I understand what you mean
@@coderyan he was wondering if this is just the "default" or "the norm" and all the people should have been doing it this way
I think it should be the norm, but it can be easy to leave a lot of code client side when it probably shouldn’t be. Does that kind of answer the question?
This is big problem bro
not a problem tho, just the intended way to use next
nah it isnt a problem