Use async Server Component inside Client Component
Answered
Brown bear posted this in #help-forum
Brown bearOP
Hi, I have an async server component that performs a lot of serverside calculations before returning the JSX
On my website I also have a Checkbox client component that displays a toggleable checkbox next to the Server Component, basically:
The
Is there a way to achieve what I want?
On my website I also have a Checkbox client component that displays a toggleable checkbox next to the Server Component, basically:
const Checkbox = ({ id }) => {
const [checked, setChecked] = useState(false)
return (
<p className="mb-2 mt-2">
<label className="pr-24">
<input type="checkbox" checked={checked} onChange={() => setChecked(c => !c)} />{' '}
<ServerComponent id={id} />
</label>
</p>
)
}
export default CheckboxThe
id param is known at build time and never changes, thus it makes sense for me to be able to use the <ServerComponent/> in there, yet NextJS complains.Is there a way to achieve what I want?
Answered by B33fb0n3
You can archive that, by passing the server component as children instead of importing them inside the client component. So change your „<ServerComponent … />“ to „{children}“ and pass your server component as children down
14 Replies
@Brown bear Hi, I have an async server component that performs a lot of serverside calculations before returning the JSX
On my website I also have a Checkbox client component that displays a toggleable checkbox next to the Server Component, basically:
js
const Checkbox = ({ id }) => {
const [checked, setChecked] = useState(false)
return (
<p className="mb-2 mt-2">
<label className="pr-24">
<input type="checkbox" checked={checked} onChange={() => setChecked(c => !c)} />{' '}
<ServerComponent id={id} />
</label>
</p>
)
}
export default Checkbox
The `id` param is known at build time and never changes, thus it makes sense for me to be able to use the <ServerComponent/> in there, yet NextJS complains.
Is there a way to achieve what I want?
You can archive that, by passing the server component as children instead of importing them inside the client component. So change your „<ServerComponent … />“ to „{children}“ and pass your server component as children down
Answer
Brown bearOP
Sadly it's not something I would really like to do
The code is being parsed from an .mdx file and keeping the source readable is a big priority
At the moment I have
Which would have to become
which makes it pretty unreadable
# Checkboxes
This is a list of checkboxes
- <Checkbox id="One"/>
- <Checkbox id="Two"/>Which would have to become
# Checkboxes
This is a list of checkboxes
- <Checkbox><ServerComponent id="One"/></Checkbox>
- <Checkbox><ServerComponent id="Two"/></Checkbox>which makes it pretty unreadable
Why don’t you make it „<Checkbox>{children}</Checkbox>“?
@B33fb0n3 Why don’t you make it „<Checkbox>{children}</Checkbox>“?
Brown bearOP
Because, as mentioned, having to write
- <Checkbox><ServerComponent id="Two"/></Checkbox> in the .mdx is bad user experience@Brown bear Because, as mentioned, having to write `- <Checkbox><ServerComponent id="Two"/></Checkbox>` in the .mdx is bad user experience
what's "ServerComponent" and where does the user enter content for the "ServerComponent"?
@Brown bear?
@Brown bear Because, as mentioned, having to write `- <Checkbox><ServerComponent id="Two"/></Checkbox>` in the .mdx is bad user experience
bad or not, that is the only way.
nextjs has no way to know that
nextjs has no way to know that
id doesn't change during the lifecycle of the client component. as such, using server components as part of client component rendering is not possible.@B33fb0n3 <@124935035412414475>?
Brown bearOP
Sorry, forgot to report back. I was toying with it and I found a simpler solution, which was based on what you told me
What I did is basically just a wrapper for Checkbox
function WrappedCheckbox({id}) {
const child = <ServerComponent id={id} />
return (<Checkbox>{child}</Checkbox>)
}Unless I'm missing something this seems to work and does the trick
And I can use the component in my MDX like before
# Header
<WrappedCheckbox id="One"/>