コンポーネントの動的インポート

次に、初期ページ読み込み時に必要とされないReactコンポーネントに注目しましょう。

Reactコンポーネントも動的インポートを使用してインポートできますが、この場合は、他のReactコンポーネントと同じように機能することを確認するために`next/dynamic`と組み合わせて使用します。

この方法を使用して、`Hello World`コードサンプルを含むモーダルの読み込みを遅延させます。これにより、さらに2つのサードパーティライブラリを初期ページ読み込みから削除することもできます。

`pages/index.js`ファイルを開き、ファイルの冒頭に`next/dynamic`から`dynamic`をインポートする行を追加します。

import dynamic from 'next/dynamic';

この行も削除する必要があります

import CodeSampleModal from '../components/CodeSampleModal';

次に、ファイルの冒頭に以下を追加することで、動的コンポーネントとしてインポートできます。

const CodeSampleModal = dynamic(() => import('../components/CodeSampleModal'), {
  ssr: false,
});

`CodeSampleModal`は`../components/CodeSampleModal`によって返されるデフォルトのコンポーネントになります。通常のReactコンポーネントと同様に機能し、通常通りpropsを渡すことができます。

このコンポーネントはサーバーでは必要ないため、`ssr: false`を使用して無効にしました。

次に、このコンポーネントの読み込みをユーザーが必要とするまで延期したいと考えます。これを行うには、モーダルが開かれるべきかどうかをチェックする条件でコンポーネントをラップし、開かれるべきであれば読み込まれるようにします。

`CodeSampleModal`コンポーネントを次のようにラップします。

{
  isModalOpen && (
    <CodeSampleModal
      isOpen={isModalOpen}
      closeModal={() => setIsModalOpen(false)}
    />
  );
}

これで、`isModalOpen`が初めて`true`に切り替えられたときに、必要なJavaScriptがリクエストされます。

これらの最適化により、バイタル指標はより健全に見えるはずです。確認のため、Chrome DevToolsで別のLighthouseレポートを実行しましょう。

残された最適化の提案は次の2つです。

• HTTP/2を使用する: この問題を解決するには、HTTP/2をサポートしている場所（例: Vercel）にデプロイできます。
• 画像要素に明示的な`width`と`height`がない: これは実際にはLighthouseのバグであり、サイトのパフォーマンスには影響しません。

さらに読む

• Next.js: 動的インポートのドキュメント