import { type GetServerSideProps } from "next";
import { WalletData } from "~/components/WalletDataSections/WalletData";
import RootLayout from "~/layouts/RootLayout";
import { axiosClient } from "~/service/axios";
import { type WalletData as WalletDataType } from "~/service/useWalletData";

export default function WalletDataPage({
  serverData,
}: {
  serverData: WalletDataType;
}) {
  console.log(serverData, 'client')

  return (
    <RootLayout>
      <WalletData initialData={serverData} />
    </RootLayout>
  );
}

export const getServerSideProps: GetServerSideProps = async ({
  res,
  params,
}) => {
  const address = params?.address as string;
  let serverData = null;

  res.setHeader(
    "Cache-Control",
    "public, s-maxage=10, stale-while-revalidate=59",
  );

  try {
    const response = await axiosClient.get<WalletDataType>(
      `api/v1/assets/ton/${address}`,
    );
    serverData = response.data;
  } catch (error) {
    console.error("Error fetching wallet data:", error);
  }

  console.log("serverData", serverData);

  return {
    props: { serverData: { data: serverData } },
  };
};

I have this code for server side rendering in Next.js. The data from the API updates approximately every 30 seconds. Also, I update the data on the client using react query like this:

const query = useQuery<WalletData>({
    queryKey: ["wallet", wallet],
    queryFn: () => axiosClient.get(`api/v1/assets/ton/${wallet?.toString()}`),
    enabled: !!wallet,
  });

If I update the page in the first 30 seconds, then everything is fine – no hydration error is thrown. But if the data from the API gets an update, I get the hydration error.

Both console logs – on the client and on the server print the correct data. The problem is that the first next.js request to the html returns an old version. What might be wrong?

I tried adding and removing the caches. Also, I considered using getStaticProps, but it’s not an option to generate the pages at build time for me