在指定的时间间隔内预取数据 nextjs

Question

我目前正在用next.js做一个项目，我遇到了一个问题，我需要在特定的时间间隔内预取服务器端数据，比如每天一次或者每3小时一次。

在next.js的文档中，预取数据的唯一方法是在构建时或每次请求时预取一次。有了 getStaticProps 或 getServerSideProps

是否有一个基于间隔的预取的内置解决方案，或者有一个包可以轻松地为我处理这个问题？

Answer 1

你可以使用库 https:/github.comzeitswr。

这里是一个每3秒拉一次数据的示例代码。

import React from "react"
import useSWR, { SWRConfig } from 'swr'

function Dashboard () {
    const { data: events } = useSWR('/api/events')
    const { data: projects } = useSWR('/api/projects')
    const { data: user } = useSWR('/api/users', { refreshInterval: 0 }) // don't refresh
     return(
        <div>
          {/*Sample rendering */}
          {events && events.length > 0 ? (
            <div>
                  Show the event list or a chart.
              </div>
          ): (
            <div>No events</div>
          )}
      </div>
     )
}

export default function App () {
    return (
        <SWRConfig
            value={{
                refreshInterval: 3000,
                fetcher: (url, args) => fetch(url, args).then(res => res.json())
            }}
        >
            <Dashboard />
        </SWRConfig>
    )
}

顺便说一下：你可能应该实现一些类似于 PusherJS 或类似的方法将数据推送到浏览器中。他们有服务器库来推送数据。