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
これを行う別の方法がある場合、私は完全に耳を傾けています。