diligent-next/pages/index.js

import { dehydrate, QueryClient } from '@tanstack/react-query';
import { signOut } from 'next-auth/react';
import PaginationComponentRQ from '../components/pagination/react-query/PaginationComponentRQ';
import { getData } from '../requests/dataRequest';

const Home = () => {
  function logoutHandler() {
    signOut();
  }
  return (
    <>
      <h1>Home</h1>
      <button onClick={logoutHandler}>Logout</button>
      <PaginationComponentRQ></PaginationComponentRQ>
    </>
  );
};

export async function getServerSideProps() {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery(['randomData', 1], () => getData(1));

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

export default Home;