javascript - nextjs: ページ間でコンポーネントを共有

Question

2 つのページを持つ非常に単純なNext.jsプロジェクトを作成しました。

どちらのページにも基本的なレイアウト コンポーネントが含まれています。

// Page Component  

render() {
  return (
    <PageLayout>
      This is page A
    </PageLayout>
  );
}

PageLayout は次のようになります。

// PageLayout

render() {
  return (
    <div>
      <Header />
      {this.props.children}
    </div>
  );
}

PageLayoutそのため、両方のページで同じものを含む基本的なテンプレートをレンダリングするために両方のページが使用されますHeader。

私の問題はHeader、2 つのページ間を移動するときにコンポーネントが再作成されることです。これは、パフォーマンスの観点からだけでなく、すべての DOM-Node とすべての React コンポーネントがローカル状態を失うため、悪いと思います。

だから、私が欠けているものがあるかどうか、または適切に再利用されるページ間で共有コンポーネントを作成する方法があるかどうかを知りたいです (少なくとも状態が変更されていない場合はもちろん)。