8

NextJS 経由の SSR には、以下が適用されます。

React のコンテキストを使用して、特定のマウントされたコンポーネントの ID を追跡しています。要点は

class Root extends React.Component {
  getChildContext () {
    return {
      registerComponent: this.registerComponent
    }
  }

  registerComponent = (id) => {
    this.setState(({ mountedComponents }) => {
      return { mountedComponents: [...mountedComponents, id ] }
    })
  }

  ...
}

class ChildComponent {
  static contextTypes = { registerComponent: PropTypes.func }

  constructor(props) {
    super(props)

    props.registerComponent(props.id)
  }
}

残念ながら、これはクライアント側でのみ機能します。this.state.mountedComponents常に[]サーバー上にあります。これらのコンポーネントをサーバー側で追跡する別の方法はありますか? 基本的に、ドキュメント内で実行するスクリプトに提供する ID が必要headです。クライアント アプリが手動でマウント、実行、ヘッドへの追加を行うまで待つのは少し遅すぎます。

アップデート

ここに簡単なサンプル リポジトリがあります: https://github.com/tils13/nextjs-ssr-context

this.contextundefinedコンストラクターにあり、(現在、レポでこのように設定されている)Childに移動するとcomponentDidMount機能しますが、これをサーバー側で解決したいと思います。contextこれを行う別の方法がある場合、私は完全に耳を傾けています。

4

2 に答える 2