1

Let's assume the following page:

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

Knowing that tasks are constantly updating, is that correct, regarding performances?
I can't find any documentation on this. (or at least, understand)

juliomalves
  • 42,130
  • 20
  • 150
  • 146
loïc Torres
  • 47
  • 1
  • 6

1 Answers1

5

Look at this part of documentation you can fetch data server side and then you can pass the server side data to swr to set the initial state

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

When you fetch new data you can call revalite and swr will handle new data. Look at this answer for more details

dna
  • 2,097
  • 1
  • 11
  • 35