ダイナミックインポートによるThree.jsの遅延読み込み最適化

概要

Next.jsでThree.jsのような大規模ライブラリを使うと、ページが重くなってしまうことがあります。
ここでは、next/dynamicによるダイナミックインポートを使って読み込みを最適化する方法を初心者向けに解説します。

問題点

Three.jsは3D表示するための強力なライブラリですが、ファイルサイズがとても大きいという特徴があります。

Webサイトのページに普通にimportすると、使用しているページを開いた瞬間にThree.jsも一緒に読み込まれます。これによって、UXの欠点を生んでしまう可能性があります。

改善前のコード

// 普通にインポートした場合
import { Scene3D } from "@/components/home/Scene3D";

export function Hero() {
  return (
    <section>
      <Scene3D />
      <h1>Web App</h1>
    </section>
  );
}

ここでは、ページを開いた瞬間にThree.jsが読み込まれてしまいます。

解決方法

next/dynamicを使うと、必要なタイミングで読み込むことができます。

改善後のコード

import dynamic from 'next/dynamic';

// ダイナミックインポート：必要なときだけ読み込む
const Scene3D = dynamic(
  () => import("@/components/home/Scene3D").then(mod => mod.Scene3D),
  {
    ssr: false, // サーバーでは読み込まない
    loading: () => <div className="absolute inset-0 bg-black" /> // 読み込み中の表示
  }
);

export function Hero() {
  return (
    <section className="relative h-screen w-full">
      <Scene3D />
      <div className="relative z-10 text-white text-center">
        <h1 className="text-4xl font-bold">Web App</h1>
      </div>
    </section>
  );
}

設定のポイント

1. ssr: false の指定

{
  ssr: false 
}

• Three.jsはブラウザの機能（WebGL）を使う
• サーバー側にはWebGLがない
• ssr: falseにすることで、ブラウザでだけ動かす

2. loading プロパティ

{
  loading: () => <div className="absolute inset-0 bg-black" />
}

• 3D表示が行われるまでにloading状態で表示するもの
• ここでは真っ暗

3. コード分割のメリット

動的インポートを使うことで、メインのJSファイルが軽くなり最初のページ表示が速くなります。

まとめ

重いライブラリを使うときは、next/dynamicで遅延読み込みをするとよいですね。

• Three.jsではssr: falseが必須
• loadingで読み込み中の表示を設定
• ファイルが分割されて、初期表示が速くなる