#[NextJS13] using Server Component inside Client Component

8 messages · Page 1 of 1 (latest)

unique drift
#

Hey,

i want to include a server component into a client component. Lets imagine i have FormPage which is a client component and inside the FormPage i have a <CitySelectBox>. This should be a server component. so i ve written something like this:

`export default async function CitySelectBox() {
const supabase = //get DB client
const { data } = await supabase.from('cities').select('*');

return (
<select
name="city"
defaultValue="Berlin">
{data?.map(city => (
<option value={city.id}>{city.name}</option>
))}
</select>
);
};`

But now i get the infamous:
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

So is my component silently degenerated to a client component, because otherwise the error wouldnt make much sense right?

unique drift
#

When i flag the component with import "server-only";, i get this one:
You're importing a component that needs server-only. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.

One of these is marked as a client entry with "use client":
app/become-landlord/step-1/CitySelectBox.tsx
app/become-landlord/step-1/page.tsx

#

But according to docs, one can pass a server component into a client component via props.

cedar wharf
#

Yes, you can pass seever components as props to client components.

E.g. in your page (which should also be a server component):

<ClientComponent>
  <ServerComponent/>
</ClientComponent>
unique drift
#

You are right, the problem is, as soon as my top level page is a client component. Things get ugly. This works:
`import React from 'react';
import ClientComponent from '../become-landlord/step-1/ClientComponent';
import CitySelectBox from '../become-landlord/step-1/CitySelectBox';

const Page = () => {
return (
<div>
This works because Top Level Page Component is a server component and i can wrap it accordingly.
<ClientComponent>
<CitySelectBox/>
</ClientComponent>
</div>
);
};

export default Page;`

#

So i bascially need to wrap my former client component (page) into a pretty barebone server component page

cedar wharf
#

Yes, the page component can't be a client component for this

unique drift
#

Need to think if the server rendered select box is worth the trouble 😉