next.js - 在 nextJS 应用程序中，使用 SWR 通过 SSR 刷新预取数据是一种好习惯吗？

Question

让我们假设以下页面：

export default ({ SSRtasks }) => {
  const [ tasks, setTasks ] = useState(SSRtasks)
  const { data: freshTasks, mutate } = useSwr('/api/tasks')
  useEffect(() => freshTasks && setTasks(freshTasks), [ freshTasks ])

  return (
   <ul>{tasks.map(task => <li>{task}</li>)}</ul>
  )
}

export const getServerSideProps = async ({ req, res }) => {
  const SSRtasks = Task.find({ owner: id })
  return { props: { SSRtasks } }
}

知道任务在不断更新，对性能是否正确？
我找不到任何关于此的文档。（或者至少，理解）

Answer 1

查看这部分文档，您可以获取数据服务器端，然后您可以将服务器端数据传递给 swr 以设置初始状态

const { data, revalidate } = useSWR('/api/posts', fetcher, { initialData: props.posts })

当您获取新数据时，您可以调用 revalite 并且 swr 将处理新数据。查看此答案以获取更多详细信息