在 nextJS 应用程序中使用 SWR 通过 SSR 刷新预取数据是一种好习惯吗？答案

【问题标题】：Is using SWR to refresh prefetched data with SSR a good practice in a nextJS app?在 nextJS 应用程序中使用 SWR 通过 SSR 刷新预取数据是一种好习惯吗？
【发布时间】：2021-06-30 06:49:44
【问题描述】：

让我们假设以下页面：

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

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

【问题讨论】：

标签： next.js server-side-rendering swr

【解决方案1】：

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

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

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

【讨论】：

好的，谢谢，这正是我想要的！