Next.js shallow search params routing

// root page.tsx

import { Suspense } from 'react';

import { ShallowParams } from './shallow-params';



// simple counter so you will clearly see that another

// roundtrip to server occured

let serverRenderCount = 0;



export default async function Home() {

  console.log('Server run', serverRenderCount++);



  return (

    <div className="flex flex-col">

      {/* Suspense is needed because we are using useSearchParams hook which would fallback Next.js to dynamic rendering always */}

      <Suspense>

        <ShallowParams />

      </Suspense>

    </div>

  );

}

// shallow-params.tsx



'use client';



import { useRouter, useSearchParams } from 'next/navigation';



export function ShallowParams() {

  // useSearchParams updates state even if we use History API

  const params = useSearchParams();

  const router = useRouter();



  const count = +(params.get('count') || 0);

  return (

    <div className="flex flex-col gap-2">

      <p>{params.get('count') || 0}</p>



      <button

        className="btn"

        onClick={() => {

          // shallow increase count params via the push. Check the browser back and forward buttons.

          window.history.pushState({}, '', `/?count=${count + 1}`);

        }}

      >

        Add to count +1 (push)

      </button>

      <button

        className="btn"

        onClick={() => {

          // shallow increase count params via the replace. Check the browser back and forward buttons, the history was overridden

          window.history.replaceState({}, '', `/?count=${count + 5}`);

        }}

      >

        Add to count +5 (replace)

      </button>

      <button

        className="btn"

        onClick={() => {

          // and this is a normal router action, in the server console you will see the serverRenderCount increase and log, with above methods it won't log anything.

          router.push(`/?count=${count + 10}`);

        }}

      >

        Add to count +10 (Next.js router push)

      </button>

    </div>

  );

}