Next.js сохраняет текущую страницу активной и выполняет повторный рендеринг, пока завершается загрузка getInitialProps следующей страницы

Question

Сценарий выглядит примерно так:

1. На одной странице (AssessmentListPage) я показываю список существующих оценок;На второй странице (AssessmentDetailPage) я показываю подробную информацию о выбранной оценке;
2. Я использую избыточность, и обе страницы используют одно и то же состояние среза (assessments)
3. Когда я перехожу с AssessmentListPage на AssessmentDetailPage, все работает нормально;Когда я нажимаю кнопку «Назад», происходит сбой.
4. Причина сбоя : Next.js сохраняет страницу AssessmentDetailPage активной, пока не завершится метод static getInitialProps.Вызываемые действия изменяют состояние и вызывают повторное отображение текущей страницы без ожидаемых данных.И тогда он правильно отображает AssessmentListPage.

Какой самый элегантный способ справиться с этим?Должен ли я разделить редукторы?

В настоящее время я просто защищаюсь и добавляю проверки, которые, как правило, мне не понадобятся, чтобы избежать этого конкретного сбоя.

Я также думал о том, чтобы не загружатьсяданные в getInitialProps и в componentDidMount(), но мне не нравится идея дублирования кода для обработки как на стороне сервера, так и на стороне клиента.

Любой совет очень ценится.Спасибо!

class AssessmentListPage extends React.Component {
  static async getInitialProps({ store, req }) {
    await store.dispatch(loadProfile(api)(req))
    await store.dispatch(loadAssessments(api)(req))
  }
}

class AssessmentDetailPage extends React.Component {
  static async getInitialProps({ store, req }) {
    await store.dispatch(loadProfile(api)(req))
    await store.dispatch(loadAssessment(api)(req, query.id))
  }
}