在 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 将处理新数据。查看此答案以了解更多详细信息