Блог

Я использую next/router для обработки переходов страниц.

Когда пользователь нажимает на список номеров 1-4 на странице a , я сохраняю номер, по которому он нажимает 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 , возникает заметная задержка в 1 секунду перед переходом страницы на страницу b .

Если я нажму кнопку «Назад», чтобы перейти на страницу a , b и снова нажму на номер, задержка исчезнет. Но если я перезагрузлю страницу a и повторю попытку, вернется задержка в 1 секунду.

Я подозреваю

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

вызывает задержку. Но я не уверен, что это полностью проблема nextjs, или проблема с реакцией, или localStorage проблема.

Как я могу уменьшить задержку в 1 секунду, когда пользователь впервые переходит со страницы a на страницу b ?

Вышеуказанная проблема возникла на моем сервере локального хоста разработки. Тестирование на производстве, задержка в 1 секунду исчезла.