与 getServerSideProps 一起使用时，带有 SWR 的 NextJS 在验证期间显示 initialData

Question

我正在使用 NextJS 和 SWR 来获取数据。我将 getServerSideProps.

返回的 initialData 提供给 SWR

分页效果很好。当我转到第 3 页时，我看到第 3 页的数据。当我转到第 5 页时，我首先再次看到第 1 页，然后是第 5 页的数据。我认为这是在验证期间发生的。我想在第 5 页准备好之前显示第 3 页的数据。我该如何解决？

我的抓取器

const fetcher = url => axios.get(url).then(res => res.data)

我如何使用 getServerSideProps

获取数据

export const getServerSideProps = async() => {
    const pages = await fetcher('http://127.0.0.1:8000/api/pages/')

    return { props: { pages } }
}

调用 SWR 并渲染结果的地方

function Page ({ pageIndex, props }) {
const { data, error } = useSWR(`http://127.0.0.1:8000/api/pages/?page=${pageIndex}`, fetcher, {dedupingInterval: 15000, initialData: props.pages, revalidateOnFocus: false});
return (
        {data.results.map(page => <p>page</p>)}
    )

}

我如何调用 Page 和 Pagination

export default function Pages(props) {
...
const [pageIndex, setPageIndex] = useState(1);
<Page pageIndex={pageIndex} props={props}/>
<Pagination pages={props.genes.total_pages} setPageIndex={setPageIndex}/>
...
}

Answer 1

我已经按照 GitHub post 中的建议使用 useRef 解决了问题。

更新页面功能

function Page ({ pageIndex, props }) {
const mutableRef = useRef();
const { data, error } = useSWR(`http://127.0.0.1:8000/api/pages/?page=${pageIndex}`, fetcher, {dedupingInterval: 15000, initialData: mutableRef.current ? mutableRef.current : props.pages, revalidateOnFocus: false});

if (data !== undefined && mutableRef) {
    mutableRef.current = data;
  }

return (
        {data.results.map(page => <p>page</p>)}
    )

}