I’m struggling with the concept of client/server component in nextJS 14 (using app router).

Here is an example page, which shows how I build it typically and what is needed:

• I do need the id value from params
• I do need to run a graphql query to get the data (depending on that id)
  • Because of that I need to do output for loading or error
• At the end return component with this data

Can someone show me how to split this into correct parts? Because metadata has to be used server side and useParams() has to be run on client. I’m really confused with this client/server separation, so for me it would be really helpful to see how it should have be done correctly.

app/presentation/[id]/page.tsx

'use client' // added because of useParams()

export const metadata: Metadata = { // needs to be on server
  title: 'Presentation'
}

export default function PresentationPage() {
  const params = useParams()
  const id = params?.['id']
  if (!id) throw new Error('Query parameter missing')
  if (Array.isArray(id))
    throw new Error("Query parameter shouldn't be an array")

  const { loading, data } = 
    usePresentationContentQuery({
      variables: {
        param: { name: 'id', value: id }
      }
    })

  if (loading) return <CircularProgress />
  if (data?.presentationContent == null)
    return (
      <Alert severity="error" elevation={0}>
        Missing data
      </Alert>
    )

  return (
    <Presentation data={data.presentationContent} />
  )
}