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

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

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

この方法を使用して、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コンポーネントのように動作し、通常どおりプロップを渡すことができます。

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

次に、このコンポーネントのロードを、ユーザーが必要とするまで遅延させたいと思います。これを行うには、モーダルを開くべきかどうかをチェックする条件でコンポーネントをラップし、開くべき場合はロードされます。

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

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

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

これらの最適化により、バイタルはより健全になるはずです。Chrome DevToolsでLighthouseレポートを再度実行して確認しましょう。

最適化の提案が2つ残っています。

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

さらに読む

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