Auto update params in next js

[Shitanshukumar607]

Hey Im using nuqs version "nuqs": "^2.4.3", in my next js application. The thing is in my client side component is this input component

<Input
    placeholder="Search companions..."
    className="outline-none pl-8"
    value={topic}
    onChange={(e) => setTopic(e.target.value || null)}
/>

and im updating the serach params like this

  const [topic, setTopic] = useQueryState("topic", {
    defaultValue: "",
  });

and in my server component im trying to call a function whenever the search params get changed.
I used the code from nuqs.47ng.com/docs/server-side

type PageProps = {
  searchParams: Promise<SearchParams>;
};

const CompanionLibrary = async ({ searchParams }: PageProps) => {
  const { subject, topic } = await loadSearchParams(searchParams);

  console.log("topic is", topic);

  const companions = await someFunc({ topic });
  //rest of the code

and created the searchParams file as mentioned on the same site

import { createLoader, parseAsString } from "nuqs/server";

export const coordinatesSearchParams = {
  topic: parseAsString.withDefault(""),
};
export const loadSearchParams = createLoader(coordinatesSearchParams);

But even after doing this whenever i write in the input element the search params get updated but the console log gives an empty string which was logged when the application was started after that there is no log about the topic

[franky47]

Set the shallow option to false in your hook to notify the server on updates:

Docs: https://nuqs.47ng.com/docs/options#shallow

 const [topic, setTopic] = useQueryState("topic", {
    defaultValue: "",
    shallow: false
  });