how to add "Back button" in server component of next js 13.4.2

I want to add a button of going back in Next JS 13.4 based website at a server component. The problem I am facing to use the {useRouter} in my page i neeed to make it client component.

Is their any way that i can add back button in my web page

I don't want to use the method

 <Link href="/job" className="text-gray-400 text-sm font-medium " > {" "} &#x2190; Back                    </Link>

As it don't leave at the position where i am. I mean pages appears from the top using the link method

I tried using the link and using useRouter

with useRouter i don't know to cache the data of api

so tell me a better way to add back button to my website thanks in advance

To anyone who has the same issue, you don't have to make your component use client you can just create a small HOC that achieves the same result.

'use client';
import { useRouter } from 'next/navigation';

function BackButton({
  className,
  children,
}: React.PropsWithChildren<{
  className?: string;
}>) {
  const router = useRouter();
  return (
    <button className={className} onClick={() => router.back()}>
      {children}
    </button>
  );
}

export default BackButton;

Put this in a new file call it BackButton.tsx for example and use it like: <BackButton>Go Back</BackButton>

Hope this will help.