How to solve Text match Error such as SSR and CSR when using Suspense component in NextJS

Question

stackoverflow 질문

I used Next13 and tanstack query.

// page.tsx

import { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { TimeStamp } from "./components/TimeStamp";
import { FallbackUi } from "./components/FallbackUi";
import { SuspenseUi } from "./components/SuspenseUi";

const Page = () => {
  return (
    <main>
      <h1>container-components</h1>
      <ErrorBoundary FallbackComponent={FallbackUi}>
        <Suspense fallback={<SuspenseUi />}>
          <TimeStamp />
        </Suspense>
      </ErrorBoundary>
    </main>
  );
};

export default Page;

Call data inside TimeStamp. Show the SuspenseUi component while responding from the server. Shows the FallbackUi component when an error occurs.

But one problem arose.

// TimeStamp.tsx

"use client";

import { callLocal } from "@/network/local";
import { useQuery } from "@tanstack/react-query";

const TimeStamp = () => {
  const { data } = useQuery({
    queryKey: ["call"],
    queryFn: () => callLocal("boundary"),
    suspense: true,
    useErrorBoundary: true,
  });

  return <div>{data.data}</div>;
};

export { TimeStamp };

When calling api from TimeStamp component, SSR is performed by making a first call to the server side. After that, when called from the client side, an error occurs because the data values ​​are different. Warning: Text content did not match

<ErrorBoundary FallbackComponent={FallbackUi}>
    <Suspense fallback={<SuspenseUi />}>
        <TimeStamp />
    </Suspense>
</ErrorBoundary>

How can I solve the problem while maintaining this structure?