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)
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 ? 😁
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.
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 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.
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.
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.
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.
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.
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?
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?
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
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!
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.
I was messing with this pattern over the last couple of days and my mind is blown. Thank you!
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
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
Thanks so much for this, really helped to understand how the provider context API still allows children to be server components.
this is absolutely beautiful!
It was actually this simple, thanks for the explanation!
thank you so much for this, this has been bugging me since for ever
I’ve been so confused by this. Thank you! 🙏🏻🙏🏻🙏🏻
This was what I was looking for!!! Thank you so much man!
Thanks, please keep posting videos like this, please add SEO in Next.js
Thanks for the explanation! Very clear.
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 ? 😁
Thanks a lot man, you explained it really well.
Great video men. Thank you very much
Understood clearly. Thank you!
This video is what i want. Nice help.
Thanks a lot man, you cleared my doubt so well
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.
So so helpful.
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. This was helpful.
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 😅😅😅😅
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
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.
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 = )
Hi bro, Do you have an example of integration between NextJS and SSE?
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.
Thank you so so so much
really simple
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.
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.
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.
What abou server actions, same rules ?
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
Nice but why no repo te test these in any video?
Can we access the state inside a child server component, if we do the same with redux (instead of context)?
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?
What if I apply "user client" in ExampleServerComponent and put this component inside ExampleClientComponent instead of as children?
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
this is black magic
what to do if the server component recieves props from the client component !
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
What if the page is a client component?
or you can pass a server component as props to client component.
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