解决方案以在Nextjs上的组件中预取

Question

我正在寻找一个解决方案/模块，不需要从 getServerSideProps 注入 swr/react-query 的初始/后备数据。就像...

从

// 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,
    },
  }
}

到

// 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...
}

我的目标是将与 userData 相关的东西模块化到一个组件中。