iliaoliao

首先你需要明白哪些请求是幂等的，增删改查中查是幂等的所以使用 `useQuery` 这类带有数据缓存的 hook 是最合适的，而增删改等非幂等操作则使用带有突变操作的 hook `useMutation`。
我推荐 react-query 和我开源的 react-query-kit 结合使用。可以做到在 getServerSideProps 和组件中的写法是一致的，几乎没有什么心智负担，顺便把写法贴在下面

```js
import { createQuery } from 'react-query-kit'

const usePost = createQuery({
primaryKey: '/posts',
queryFn: ({ queryKey: [primaryKey, variables] }) => {
// primaryKey equals to '/posts'
return fetch(`${primaryKey}/${variables.id}`).then(res => res.json())
},
})

const variables = { id: 1 }

export default function Page() {
const { data } = usePost({ variables, suspense: true })

return (
<div>
<div>{data?.title}</div>
<div>{data?.content}</div>
</div>
)
}

// nextjs example
export async function getStaticProps() {
const queryClient = new QueryClient()

await queryClient.prefetchQuery({
queryKey: usePost.getKey(variables),
queryFn: usePost.queryFn
})

return {
props: {
dehydratedState: dehydrate(queryClient),
},
}
}
```