reactjs - 错误 - 客户端/服务器不匹配：React、Redux、NextJS、Typescript 和样式化组件

Question

我一直在尝试使用 Next.js 处理 SSR、Typescript 和 Styled Components 的 Counter 示例。我在 Github 上有一个主要工作的例子：https ://github.com/dwaynelavon/nextscript-boilerplate

问题是我不断收到有关客户端/服务器不匹配的错误。Warning: Text content did not match. Server: "1" Client: "0". 我无法弄清楚问题是什么。有什么建议么？

// Index.tsx

type CounterDispatchProps = {
  addCount: () => any;
  startClock: () => any;
};

type CounterStateProps = {
  lastUpdate: number;
  light: boolean;
};

class Counter extends React.Component<
  CounterDispatchProps & CounterStateProps
> {
  private timer: number;
  constructor(props: CounterDispatchProps & CounterStateProps) {
    super(props);
  }
  static getInitialProps(props: any) {
    const store = props['store'];
    const isServer = props['isServer'];
    store.dispatch(serverRenderClock(isServer));
    store.dispatch(addCount());

    return { isServer };
  }

  componentDidMount() {
    this.timer = this.props.startClock();
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    const props = {
      title: 'Index Page!',
      linkTo: '/other',
      lastUpdate: this.props.lastUpdate,
      light: this.props.light
    };
    return <Page {...props} />;
  }
}

const mapDispatchToProps = (dispatch: any) => {
  return {
    addCount: bindActionCreators(addCount, dispatch),
    startClock: bindActionCreators(startClock, dispatch)
 };
};

const mapStateToProps = (state: any) => {
  return {
    lastUpdate: state['lastUpdate'],
    light: state['light']
  };
};

export default withRedux(initStore, mapStateToProps, 
    mapDispatchToProps)(Counter);

这是页面组件：

Interface PageProps {
  title: string;
  linkTo: string;
  lastUpdate: number;
  light: boolean;
}

const Page = ({ title, linkTo, lastUpdate, light }: PageProps) => {
  const clockProps = {
    lastUpdate,
    light
  };

  return (
    <div>
      <h1>{title}</h1>
      <Clock {...clockProps} />
      <AddCount />
      <nav>
        <Link href={linkTo}>
          <a>Navigate</a>
        </Link>
      </nav>
    </div>
  );
};

export default Page;