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