I'm having difficulty understanding the client/server component concept in nextJS 14 (using app router).
Below is an example page illustrating how I typically structure it and what components are required:
- I need to extract the
idvalue from params - I need to execute a graphql query to fetch the data based on that id
- This requires me to handle loading and error states accordingly
- Finally, return the component with the retrieved data
Can someone demonstrate how to break this down into correct parts? The challenge lies in using metadata on the server side while running useParams() on the client. The separation of client/server functionalities has left me confused, so it would greatly benefit me to see the correct implementation.
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} />
)
}