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)
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.
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 = )
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
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 :/
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.
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.
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.
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 ? 😁
how would we do it if the server comp passed in as 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?
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.
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
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.
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.
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?
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.
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?
👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs
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
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
Thanks, please keep posting videos like this, please add SEO in Next.js
I’ve been so confused by this. Thank you! 🙏🏻🙏🏻🙏🏻
Thanks a lot man, you explained it really well.
This video is what i want. Nice help.
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
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.
Can we access the state inside a child server component, if we do the same with redux (instead of context)?
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 = )
or you can pass a server component as props to client component.
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
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 :/
This is an amazing video and you would almost have got me as a new follower… apparently I am already following you 😅😅😅😅
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.
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.
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.
Very nicely explained. Thanks for this video!
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 ? 😁
What abou server actions, same rules ?
this is black magic
really simple
how would we do it if the server comp passed in as 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?
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.
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
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 if I apply "user client" in ExampleServerComponent and put this component inside ExampleClientComponent instead of as children?
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.
Hi bro, Do you have an example of integration between NextJS and SSE?
this is absolutely beautiful!
what to do if the server component recieves props from the client component !
everything are coming from the server, the really matters is run time context, they should phrase it properly.
I can see the children pattern becoming a mess
why would you want server component in client component?
This. This was helpful.
So so helpful.
Nice but why no repo te test these in any video?
Great video men. Thank you very much
I was messing with this pattern over the last couple of days and my mind is blown. Thank you!
Thanks so much for this, really helped to understand how the provider context API still allows children to be server components.
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?
This was what I was looking for!!! Thank you so much man!
Thanks for the explanation! Very clear.
It was actually this simple, thanks for the explanation!
Thank you so so so much
Thanks a lot man, you cleared my doubt so well
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.
can we use another prop instead of children ?
thats a good question
client components cant own server components but they can be parents of them
Understood clearly. Thank you!
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
What if the page is a client component?
Whole client and server component is disgusting anti pattern