Nextjs路由器.在第一次点击时推动缓慢的页面转换

Question

我使用next/router来处理页面过渡

当用户点击a页上1-4的数字列表时，我通过localStorage保存他们点击的数字，并重新排序b页上的数字列表。

例如，如果a页的默认顺序是

1, 2, 3, 4

用户点击4

next/router发送用户到b页，改变顺序

4, 1, 2, 3

下面是我的页面a代码

import { useState, useEffect } from 'react'
import { useRouter } from 'next/router'
import { setLocalStorage } from '../../../utils/common'
import styles from './test.module.scss'
export default function NewHome() {
const router = useRouter()
const numbers = [1, 2, 3, 4]
const [order, setOrder] = useState([1, 2, 3, 4])
const handleClick = (e): void => {
let _order = order.filter((num) => num !== Number(e.target.id))
setOrder([Number(e.target.id), ..._order])
router.push('/renewal/test/b')
}
useEffect(() => {
const contact = { order }
setLocalStorage(contact)
}, [order])
return (
<div className={styles.a}>
{numbers.map((number) =>
<p id={String(number)} key={number} onClick={handleClick}>{number}</p>
)}
</div>
)
}

下面是我的页面b代码

import { useState, useEffect } from 'react'
import { getLocalStorage } from '../../../utils/common'
import styles from './test.module.scss'
export default function NewHome() {
const [items, setItems] = useState([])
useEffect(() => {
const _contact = getLocalStorage()
setItems(_contact.order)
}, [])
return (
<div className={styles.b}>
{items.map((number) =>
<p key={number}>{number}</p>
)}
</div>
)
}

下面是我的localStorage代码

export const setLocalStorage = (contact) => {
const _contact = getLocalStorage()
const updateContact = {
..._contact,
...contact
}
window.localStorage.setItem('contact', JSON.stringify(updateContact))
}
export const getLocalStorage = () => {
const contact = JSON.parse(window.localStorage.getItem('contact'))
return contact
}

我的问题是，当用户第一次点击a页上的任何数字时，在页面过渡到b页之前有明显的1秒延迟。

如果我点击后退按钮从b页转到a页，然后再次点击一个数字，延迟就消失了。但是，如果我重新加载页面a并再次尝试，1秒延迟返回。

我怀疑

router.push('/renewal/test/b')

导致延迟。但我不确定这是否完全是nextjs问题，或反应问题，或localStorage问题。

当用户第一次从页面a过渡到页面b时，我如何减少我的1秒延迟?

Answer 1

上述问题发生在我的开发本地主机服务器上。在生产测试中，1秒的延迟消失了。