Client components need to be wrapped in a <Suspense> boundary ?

[mtlaso]

Here's the given example on the doc section "Client components need to be wrapped in a boundary":

'use client'
 
export default function Page() {
  return (
    <Suspense>
      <Client />
    </Suspense>
  )
}
 
function Client() {
  const [foo, setFoo] = useQueryState('foo')
  // ...
}

Why is there a 'use client' on top of the file if bellow it says 'Keep page.tsx as a server component (no 'use client' directive)'?

[franky47]

Adding the 'use client' directive to the page.tsx file is the immediate fix to get things working if you are defining components that use client-side features (like nuqs or React hooks), but the steps below indicate the optimal approach to get better UX: separating server and client files (and moving client side code as low down the tree as possible to pre-render the outer shell).

[mtlaso]

Understood! It might be nitpicking, but based on how it is worded, to me, it looks as if the recommendation is to add a 'use client' directive to page components. I then read the text bellow that says 'The recommended approach is...', which then confuses me on what I truly should do.

[franky47]

Thanks for the feedback, would you like to open a PR to find a better wording?

[mtlaso]

No problem! I made one at #847. Thank you for your work :)