React.useSyncExternalStore is exactly what we need to avoid hydration errors, and moreover, if we transition to a page with useSyncExternalStore on the client, the clientSnapshot will immediately be taken. Taken from: https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store

ClientGate.tsx

/**
 * ClientGate - a component that will only render on the client, where you can safely access browser only APIs
 *
 * Usage: `<ClientGate>{() => `Hello Client ${window.title}`}</ClientGate>`
 * @see https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store#usesyncexternalstore
 */

const emptySubscribe = () => () => {};

const ClientGate = ({ children }: React.PropsWithChildren) => {
  const isServer = React.useSyncExternalStore(
    emptySubscribe,
    () => false,
    () => true,
  );

  return isServer ? null : children();
};

export default ClientGate;

stable-server-value.tsx

/**
 * stable-server-value: we can produce a stable date output on the server, we can limit the content shift to only the date
 *
 * @see https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store#usesyncexternalstore
 */

const emptySubscribe = () => () => {};

const ComponentWithDefaultValue: React.FC<
  React.HTMLAttributes<HTMLDivElement>
> = ({ children, ...rest }) => {
  const date = React.useSyncExternalStore(
    emptySubscribe,
    () => /* client call */ lastUpdated.toLocaleDateString(),
    () => /* server call */ lastUpdated.toLocaleDateString('en-US'),
  );

  return (
    <div {...rest}>
      <span>Last updated at: {date}</span>
      {children}
    </div>
  );
};

export default ComponentWithDefaultValue;