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

次に、初期ページ読み込み時に不要な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コンポーネントと同じように動作し、通常通りpropsを渡すことができます。

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

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

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

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

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

これらの最適化により、Web Vitalsの値が改善されているはずです。Chrome DevToolsで再度Lighthouseレポートを実行して確認しましょう。

残っている最適化の提案は次の2つです：

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

さらに詳しく

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