for over a week I was very confused about this. Frantically searching. only by chance did I stumble on this. there's so much misinformation online. people just not explaining anything. ty so much for the clarity
This is something every Next developer should know because you’re bound to run into implementing dark mode or using React Query. If you’re running into hydration errors, I’d just add to return {children} inside a fragment until the client component is mounted.
One thing to note, it doesn't necessarily need to be passed through the children, but to be more exact, the server component must be passed through the client component props. (that includes the children component as well)
No, I'm also trying to figure it out, I have a form with context, so it's a client component, but it has some elements that use translations so those need to be SSR but I can't pass the form values to the SSR components :/
I haven't tested it yet but wondering if we can then use Suspense on the server component or check if the ServerComponent exists and if not show a loading spinner or skeleton. Will give it a test.
Okay great, but what if that server component in that client component is async and its getting some data from an external api(uses async/await) , I'm doing this with modals where i need to send some data from a server component that is rendering the modal of the form(both client components) but this server component is inside the modalProvider(client component) , and its not working - Error: async/await is not yet supported in Client Components , how do I make this work because I dont want to fetch data in the form component the old ugly way with useEffect , hope you understand what I said
I have a state in zustand on the client, and I can another state on the server, is there a possibility that when I change the state of the client and revalidate it on the server?
Hi. I enjoyed your video and faced a more specific problem. I have a server component that use { cookies } from next/headers to queries the application cookies to display the user's image. One of the parents of this component is a client component. Because of this, Next was trying to render it on the client side, causing the error. In this specific component, I had to use the 'use server' directive and make it an asynchronous component. Only then was I able to achieve what I needed.
Slightly related, If you just want a server side function inside a client component, you can just easily export that function from another file and 'use server' on-top of it This way if you call that function inside a client component, that function will run on server side and just return results on client Beautiful, isn't it ? 😁
When I tried this, I just ended up in an infinite loop. Now if I need information from the server in client component, I pass it in through props. Next.js can be quite tricky sometimes with the blend of client and server code.
There is no way. That's my biggest issue with this "You can render server component inside client component" trend. I mean you can, if your client component is just UI without any logic (which has no point, cuz you can then just make it server component). Any state logic or context kept inside a client component can't be passed to server component. The only way around I see is to make page server component, fetch everything you need top level, pass it down to client component with the logic you need and then bound your buttons with server actions.
Thank you for clarification! Can I use self-created ReactNode prop instead of children for that case? I.e. I have two slots where I want to place two different Server Components
I believe you can, yes. Since the *value* you are passing doesn't depend on the client. Lets say you write something like ... this means that value1 & value2 are defined OUTSIDE of ClientComp so they can be server-components too (e.g. value1 = )
what i'm really confused about is that in the next's official document, they explicitly say that it's not supported to import a server component into a client component. (search: "importing server components into client components") after watching your video, I think what they meant by saying "it's not supported" is that it's possible, but don't expect the server component to work as a server component. ** fix: switching "server" & "client"
@@smash3689 Importing a server component into a client component inevitably causes it to become a client component, so we're dealing with 2 regular client components as a result. That's why they call importing a server component into a client component an "unsupported pattern" in the docs.
how would we do it if the server comp passed in as a children prop to client comp needs props. and those props are available in client comps. such as: function ClientComp({ children }) { const someVal = 458; return ( {children} ) } // how would the children prop accept someVal as prop?
This is exactly how I discover this kind of behavior accidentally, I was surprised when the console.log message appear on the server console instead of on the browser console. This is well documented though, but for some reason I didn't read it because I was too lazy to read the doc deep enough.
If we import server component in a client it becomes client component but if we import client component in a server component why doesn’t it become a server component?
I was running into an issue where I had a layout component that needed to be a client component because it has a hamburger menu. I needed to apply it to my entire app, but I wanted my authentication to run in a server component. After this video, I realize the pattern: 1) make a client layout component that passes through children 2) import the client in the the layout.tsx of my route and use it as {children} 3) wrap the component that is exported from layout.tsx with my WithAuth higher order component, which is a server component. Here is the layout.tsx import AppLayoutNavigation from "../layouts/app-layout"; (client) import WithAuth from "../_components/auth/auth-wrapper"; (server) const AppLayout = ({ children }: { children: React.ReactNode }) => { return {children}; }; export default WithAuth(AppLayout); Very helpful! Now my this whole section of my app is correctly authed.
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs
for over a week I was very confused about this. Frantically searching. only by chance did I stumble on this. there's so much misinformation online. people just not explaining anything. ty so much for the clarity
Very nicely explained. Thanks for this video!
I was messing with this pattern over the last couple of days and my mind is blown. Thank you!
This is something every Next developer should know because you’re bound to run into implementing dark mode or using React Query. If you’re running into hydration errors, I’d just add to return {children} inside a fragment until the client component is mounted.
this is absolutely beautiful!
One thing to note, it doesn't necessarily need to be passed through the children, but to be more exact, the server component must be passed through the client component props. (that includes the children component as well)
Correct
how do you pass it as a prop?
@@rayyanep you can do it like:
Then in MyComponent use it like
return (
...
{serverButton}
...
);
@@michael22000 i didnt know you could do that inside of a prop! thanks man
This was what I was looking for!!! Thank you so much man!
It was actually this simple, thanks for the explanation!
Thanks for the explanation! Very clear.
so can we pass a data from client component to a server component like that?
No, I'm also trying to figure it out, I have a form with context, so it's a client component, but it has some elements that use translations so those need to be SSR but I can't pass the form values to the SSR components :/
I’ve been so confused by this. Thank you! 🙏🏻🙏🏻🙏🏻
Thanks so much for this, really helped to understand how the provider context API still allows children to be server components.
Understood clearly. Thank you!
Thanks a lot man, you explained it really well.
Thanks a lot man, you cleared my doubt so well
I was struggling like for 3 days in a similar problem in my project. after watching this video the problem solved just in 5 mins
I haven't tested it yet but wondering if we can then use Suspense on the server component or check if the ServerComponent exists and if not show a loading spinner or skeleton. Will give it a test.
Okay great, but what if that server component in that client component is async and its getting some data from an external api(uses async/await) , I'm doing this with modals where i need to send some data from a server component that is rendering the modal of the form(both client components) but this server component is inside the modalProvider(client component) , and its not working - Error: async/await is not yet supported in Client Components , how do I make this work because I dont want to fetch data in the form component the old ugly way with useEffect , hope you understand what I said
This video is what i want. Nice help.
Thanks, please keep posting videos like this, please add SEO in Next.js
Great video men. Thank you very much
I have a state in zustand on the client, and I can another state on the server, is there a possibility that when I change the state of the client and revalidate it on the server?
thank you so much for this, this has been bugging me since for ever
amazing bro it really helped
Hi. I enjoyed your video and faced a more specific problem. I have a server component that use { cookies } from next/headers to queries the application cookies to display the user's image. One of the parents of this component is a client component. Because of this, Next was trying to render it on the client side, causing the error.
In this specific component, I had to use the 'use server' directive and make it an asynchronous component. Only then was I able to achieve what I needed.
Slightly related, If you just want a server side function inside a client component, you can just easily export that function from another file and 'use server' on-top of it
This way if you call that function inside a client component, that function will run on server side and just return results on client
Beautiful, isn't it ? 😁
When I tried this, I just ended up in an infinite loop. Now if I need information from the server in client component, I pass it in through props. Next.js can be quite tricky sometimes with the blend of client and server code.
What abou server actions, same rules ?
Can we access the state inside a child server component, if we do the same with redux (instead of context)?
How would you pass the theme prop or any other prop into the server component? Could you extend this example to show this? Thank you!
There is no way. That's my biggest issue with this "You can render server component inside client component" trend. I mean you can, if your client component is just UI without any logic (which has no point, cuz you can then just make it server component). Any state logic or context kept inside a client component can't be passed to server component. The only way around I see is to make page server component, fetch everything you need top level, pass it down to client component with the logic you need and then bound your buttons with server actions.
This. This was helpful.
So so helpful.
what to do if the server component recieves props from the client component !
Hi bro, Do you have an example of integration between NextJS and SSE?
This is an amazing video and you would almost have got me as a new follower… apparently I am already following you 😅😅😅😅
Thank you for clarification! Can I use self-created ReactNode prop instead of children for that case? I.e. I have two slots where I want to place two different Server Components
I believe you can, yes. Since the *value* you are passing doesn't depend on the client.
Lets say you write something like ... this means that value1 & value2 are defined OUTSIDE of ClientComp so they can be server-components too (e.g. value1 = )
what i'm really confused about is that in the next's official document, they explicitly say that it's not supported to import a server component into a client component. (search: "importing server components into client components")
after watching your video, I think what they meant by saying "it's not supported" is that it's possible, but don't expect the server component to work as a server component.
** fix: switching "server" & "client"
He's not importing anything, that's the whole point.
@@andrzej.sliwinski wdym? The video is sectioned based on which is imported into which
@@smash3689 Importing a server component into a client component inevitably causes it to become a client component, so we're dealing with 2 regular client components as a result. That's why they call importing a server component into a client component an "unsupported pattern" in the docs.
What if I apply "user client" in ExampleServerComponent and put this component inside ExampleClientComponent instead of as children?
You just save my day
Good 😊
Thank you for your react/next video, learned a lot, I wanna know if it's possible to pass props from the client to the server component
@@ug1131 I don't think so, but you could try doing it through the URL and then use params in the server component (page component).
@@ByteGrad thank you very much, appreciate your help, keep up the good work🫡
@@ug1131I'm also curious
Nice but why no repo te test these in any video?
how would we do it if the server comp passed in as a children prop to client comp needs props. and those props are available in client comps. such as:
function ClientComp({ children }) {
const someVal = 458;
return (
{children}
)
}
// how would the children prop accept someVal as prop?
using render props pattern but that won't work since the children (server component) is a static component when it is passed to the client component
Thank you so so so much
What if the page is a client component?
This is exactly how I discover this kind of behavior accidentally, I was surprised when the console.log message appear on the server console instead of on the browser console. This is well documented though, but for some reason I didn't read it because I was too lazy to read the doc deep enough.
can we use another prop instead of children ?
thats a good question
why would you want server component in client component?
If we import server component in a client it becomes client component but if we import client component in a server component why doesn’t it become a server component?
Because that's the expected behavior of nesting components in Nextjs, client component inside a server component
I was running into an issue where I had a layout component that needed to be a client component because it has a hamburger menu. I needed to apply it to my entire app, but I wanted my authentication to run in a server component. After this video, I realize the pattern:
1) make a client layout component that passes through children
2) import the client in the the layout.tsx of my route and use it as {children}
3) wrap the component that is exported from layout.tsx with my WithAuth higher order component, which is a server component.
Here is the layout.tsx
import AppLayoutNavigation from "../layouts/app-layout"; (client)
import WithAuth from "../_components/auth/auth-wrapper"; (server)
const AppLayout = ({ children }: { children: React.ReactNode }) => {
return {children};
};
export default WithAuth(AppLayout);
Very helpful! Now my this whole section of my app is correctly authed.
really simple
or you can pass a server component as props to client component.
this is black magic
everything are coming from the server, the really matters is run time context, they should phrase it properly.
client components cant own server components but they can be parents of them
I can see the children pattern becoming a mess
Whole client and server component is disgusting anti pattern