Server Component not rerendering after query params change | Next.js | Page 1

molten rose Mar 12, 2025, 11:55 AM

I am using nuqs to handle query params from client component. It uses adapter to handle searchparams. But I am taking search params in server component which is a parent componetnt.

const Page = async (props: PageProps<any>) => {
  const searchParams = await props.searchParams;
  console.log("SEARCH PARAMS", searchParams);

I am using nuqs like this:

  const [query, setQuery] = useQueryState("query");
<div className="relative mb-4">
          <Input
            value={query ?? ""}
            onChange={(e) => setQuery(e.target.value)}
            type="text"
            placeholder="Keyword"
            className="pl-10 pr-4 py-2 w-full"
          />
          <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
        </div>

But when i type and the query parameter changes I dont get that in page component. I have to refresh. But i can see the query params in url though.

signal vaporBOT Mar 12, 2025, 11:55 AM

Hi @molten rose. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

I understand your issue with server components not rerendering when query parameters change. This is a known behavior in Next.js.

When you navigate to a page with search parameters and then update those parameters using client-side navigation (like with nuqs), the server component doesn't automatically rerender with the new parameters. This happens because Next.js optimizes for performance by not triggering a full server component rerender for every search parameter change.

There are several approaches to solve this issue:

1. Use a key on Suspense boundaries

If you're using Suspense in your application, you can add a key prop that changes when search params change:

<Suspense key={`${searchParams.query}`} fallback={<Loading />}>
  <YourServerComponent />
</Suspense>

2. Use router.refresh()

After updating the query parameter, you can force a refresh:

const router = useRouter();
// After setQuery
setQuery(newValue).then(() => {
  router.refresh();
});

3. Use empty string instead of removing params

According to one of the workarounds mentioned in the issues, setting an empty string instead of removing the parameter can help:

// Instead of removing the param
params.set('query', ''); // Use this instead of params.delete('query')

4. Consider downgrading (temporary solution)

Some users reported that downgrading to Next.js 14.1.4 resolves this issue, as it appears to have been introduced in version 14.2.0 Link to issue.

Good news

This issue has been fixed in recent canary versions of Next.js (as of v14.2.0-canary.58) and should be coming to stable releases soon. The fix addresses the problem where server components don't rerender when all search parameters are removed Link to issue.

If you're experiencing this issue in a production environment, consider using one of the workarounds above until the fix is available in a stable release.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@molten rose Kapa.ai is still learning and improving, please let me know how I did by reacting below.

#Server Component not rerendering after query params change