Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

doc: Update wording for the "missing suspense boundary" guidelines #847

Open
wants to merge 1 commit into
base: next
Choose a base branch
from
Open

doc: Update wording for the "missing suspense boundary" guidelines #847

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/docs/content/docs/troubleshooting.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,7 @@ from Next.js:
Missing Suspense boundary with useSearchParams
```

Components using hooks like useQueryState should be wrapped in `<Suspense>` when
rendered within a page component:
Components using hooks like `useQueryState` should be wrapped in `<Suspense>` when rendered within a page component. 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):

```tsx
'use client'
Expand All @@ -71,6 +70,8 @@ function Client() {
}
```

However, 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).

The recommended approach is:

1. Keep page.tsx as a server component (no `'use client'{:ts}` directive)
Expand Down