使用 SWR 通过 SSR 刷新预取数据是否是 nextJS 应用程序中的一个好习惯？

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

看这部分documentation你可以获取服务器端的数据，然后你可以将服务器端的数据传递给swr来设置初始状态

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

当您获取新数据时，您可以调用 revalite，swr 将处理新数据。查看此了解更多详情

使用 SWR 通过 SSR 刷新预取数据是否是 nextJS 应用程序中的一个好习惯？

Is using SWR to refresh prefetched data with SSR a good practice in a nextJS app?

server-side-rendering

next.js

swr