From 24a6616751302fa659ffaa705980e2e995c4ec1e Mon Sep 17 00:00:00 2001 From: mtlaso <29934021+mtlaso@users.noreply.github.com> Date: Sun, 5 Jan 2025 02:53:53 -0500 Subject: [PATCH] Update troubleshooting.mdx Updating the wording based on the discussion at https://github.com/47ng/nuqs/discussions/846 --- packages/docs/content/docs/troubleshooting.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/docs/content/docs/troubleshooting.mdx b/packages/docs/content/docs/troubleshooting.mdx index 83f29442b..e53acf0d7 100644 --- a/packages/docs/content/docs/troubleshooting.mdx +++ b/packages/docs/content/docs/troubleshooting.mdx @@ -51,8 +51,7 @@ from Next.js: Missing Suspense boundary with useSearchParams ``` -Components using hooks like useQueryState should be wrapped in `` when -rendered within a page component: +Components using hooks like `useQueryState` should be wrapped in `` 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' @@ -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)