hydrate.js

  componentDidMount() {
    new IntersectionObserver(async ([entry], obs) => {
      if (!entry.isIntersecting) return;
      obs.unobserve(this.root);
      this.setState({loading: true});

      const {load} = this.props;
      const Child = interopDefault(await load());
      setTimeout(() => {
        //ReactDOM.hydrate(<Child {...props} />, this.root);
        this.setState({Child, loading: false});
      }, 10000);
    }).observe(this.root);
  }

  render() {
    const {Child} = this.state;
    if (Child) {
      return (
        <section
          ref={c => this.root = c}
        >
          <Child {...this.props} />
        </section>
      )
    }
    return (
      <section
        ref={c => this.root = c}
        dangerouslySetInnerHTML={{__html: ''}}
        _suppressHydrationWarning
      />
    );
  }