I'm looking for a solution/module where I don't need to inject inital/fallback data for swr/react-query things from getServerSideProps. Like...

from

// fetcher.ts
export default fetcher = async (url: string) => {
  return await fetch(url)
    .then(res => res.json())
}

// getUserData.ts
export default function getUserData() {
  return fetcher('/api')
}

// index.tsx
const Page = (props: {
  // I know this typing doesn't work, only to deliver my intention
  userData: Awaited<ReturnType<typeof getServerSideProps>>['props']
}) => {
  const { data } = useSWR('/api', fetcher, {
    fallbackData: props.userData,
  })
  // ...SSR with data...
}

export const getServerSideProps = async (ctx: ...) => {
  const userData = await getUserData()
  return {
    props: {
      userData,
    },
  }
}

to

// useUserData.ts
const fetcher = async (url: string) => {
  return await fetch(url)
    .then(res => res.json())
};

const url = '/api';

function useUserData() {
  let fallbackData: Awaited<ReturnType<typeof fetcher>>;
  if (typeof window === 'undefined') {
    fallbackData = await fetcher(url);
  }

  const data = useSWR(
    url,
    fetcher,
    {
      fallbackData: fallbackData!,
    }
  );

  return data;
}

// index.tsx
const Page = () => {
  const data = useUserData()
  // ...SSR with data...
}

My goal is making things related to userData modularized into a component.