Is it possible to track searchparams on the client without using Suspense?

[KraKeN-47]

Hello,

The question is dedicated for the app router.
Currently, when I track window.location.search inside a useffect to basically track searchparam changes, it does not trigger when using router.push. Can anyone explain why? The usecase is to track searchparams on the client without using Suspense.

[alightinastorm]

Hello,

Currently, when I track window.location.search inside a useffect to basically track searchparam changes, it does not trigger when using router.push. Can anyone explain why? The usecase is to track searchparams on the client without using Suspense

https://nuqs.47ng.com/

[romhenri]

[KraKeN-47]

I'm looking more of a shallow search params, meaning that it should prevent the use of Suspense because it is unnecessary

[alightinastorm]

I'm looking more of a shallow search params, meaning that it should prevent the use of Suspense because it is unnecessary

just look into nuqs, it does exactly what you want

[alightinastorm]

also, what do you mean by "you're tracking location.search in a useeffect"?

if you have it as a dependency, your component cannot render on the server side at all

if you have written more complex listening logic inside the effect call, just try out nuqs instead..

[alightinastorm]

a third way use using useTransition() from react on router push calls, then you'll know when the push is successful and refetch the search params

[KraKeN-47]

also, what do you mean by "you're tracking location.search in a useeffect"?

if you have it as a dependency, your component cannot render on the server side at all

if you have written more complex listening logic inside the effect call, just try out nuqs instead..

Literally what I mean. I don't want to rerender on the server. The SSR everything craze is getting out of hand sometimes, pure SPA has it's usage and performance benefits, instead of SSRing everything which has substantial responsiveness drawbacks.

Thanks for suggesting nuqs. I'll try it out, however I guess some docs improvements should be made as shallow routing docs are present but let's say searchparams tracking purely for CSR purposes (meaning no Suspense is needed and SSG could be enabled in that case) is not.

[icyJoseph]

Shouldn't you use use client and useSearchParams?

• https://stackblitz.com/edit/nextjs-9pdlz9?file=app%2Fpage.tsx,app%2Flayout.tsx

The only downside I see, is that during build time the useSearchParams, will make it so that a Suspense boundary is needed for pre-rendering, but reading that you want pure CSR, a dummy loading component should suffice.

[KraKeN-47]

That's what I don't want. I will not be able to perform SSG due to Suspense. Probably a missing feature in the app router is that useSearchParams should have a shallow option, as per many discussions I have found.

[icyJoseph]

Ah but then it is easy, right?

// watch-search-effect.tsx
"use client";

import { useEffect } from "react";

import { useSearchParams } from "next/navigation";

export function WatchSearchClient({ callback }: { callback: VoidFunction }) {
  const params = useSearchParams();

  useEffect(() => {
    callback();
  }, [callback, params]);

  return null;
}

And then, use that in:

// watch-search.tsx
"use client";

import type { ReactNode } from "react";
import { Suspense, useState, useEffect, useCallback, useContext, createContext } from "react";

import { WatchSearchClient } from "./watch-search-effect";

const WatchContext = createContext("");

export function WatchSearch({ children }: { children: ReactNode }) {
  const [state, setState] = useState("");

  useEffect(() => {
    setState(window.location.search);
  }, []);

  const update = useCallback(() => {
    setState(window.location.search);
  }, []);

  useEffect(() => {
    console.log(state);
  }, [state]);

  return (
    <>
      <Suspense>
        <WatchSearchClient callback={update} />
      </Suspense>
      {/* Here use a Context Provider, or render props, or w.e. */}
     <WatchContext.Provider value={state} >
        {children}
     </WatchContext.Provider>
    </>
  );
}

export function useMySearchParams() {
   return useContext(WatchContext)
}

And then in layout:

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { WatchSearch } from "./watch-search";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <WatchSearch>{children}</WatchSearch>
      </body>
    </html>
  );
}

Sorry for not removing the noise from the create-next-app, but then you could do:

"use client";

import { useRouter } from "next/navigation";

export default function Home() {
  const router = useRouter();

  return (
    <button
      onClick={() => {
        router.push(`/?q=${Math.random()}`);
      }}
    >
      shuffle
    </button>
  );
}

And that should be it. This one uses the string search, rather than the object. Up to you, where you use, useMySearchParams

[KraKeN-47]

You are correct on this one. I have thought about it. However, the issue still persists , that is using Suspense as it triggers streaming which I want to prevent in the first place as it is a performance bottleneck

[icyJoseph]

Then put the watch-search-effect, behind a flag that toggles from true to false, and toggle that flag within a useEffect. The Suspense won't be needed anymore.

• https://demystifying-rsc.vercel.app/client-components/no-ssr/

That page explains what I mean.

A useLayoutEffect might be useful too, but IIRC, in React 18, it warns about noop during SSR. I think React 19, removes that. Look up isomorphic layout effect otherwise.