クライアントコンポーネントとライブラリを遅延読み込みする方法
Next.jsにおける遅延ロードは、ルートをレンダリングするために必要なJavaScriptの量を減らすことで、アプリケーションの初期読み込みパフォーマンスを向上させます。
これにより、クライアントコンポーネントとインポートされたライブラリの読み込みを遅らせ、必要になったときだけクライアントバンドルに含めることができます。例えば、ユーザーがモーダルを開くボタンをクリックするまで、そのモーダルの読み込みを遅らせたい場合などに有効です。
Next.jsで遅延ロードを実装するには2つの方法があります:
next/dynamic
を使用した動的インポート- Suspenseと
React.lazy()
の使用
デフォルトでは、サーバーコンポーネントは自動的にコード分割され、ストリーミングを使用してUIの断片をサーバーからクライアントに段階的に送信することができます。遅延ロードはクライアントコンポーネントに適用されます。
next/dynamic
next/dynamic
はReact.lazy()
とSuspenseを組み合わせたものです。段階的な移行を可能にするため、app
ディレクトリとpages
ディレクトリで同じように動作します。
例
next/dynamic
を使用すると、headerコンポーネントはページの初期JavaScriptバンドルに含まれません。ページはまずSuspenseのfallback
をレンダリングし、その後Suspense
バウンダリが解決されるとHeader
コンポーネントが表示されます。
import dynamic from 'next/dynamic'
const DynamicHeader = dynamic(() => import('../components/header'), {
loading: () => <p>Loading...</p>,
})
export default function Home() {
return <DynamicHeader />
}
補足:
import('path/to/component')
では、パスは明示的に記述する必要があります。テンプレート文字列や変数にすることはできません。また、Next.jsがwebpackバンドル/モジュールIDを特定のdynamic()
呼び出しに一致させてレンダリング前にプリロードできるようにするため、import()
はdynamic()
呼び出しの内部にある必要があります。dynamic()
はReactのレンダリング内部で使用することはできず、プリロードが機能するためにはReact.lazy
と同様にモジュールのトップレベルでマークする必要があります。
名前付きエクスポートの場合
名前付きエクスポートを動的にインポートするには、import()
によって返されるPromiseからそれを返すことができます:
export function Hello() {
return <p>Hello!</p>
}
// pages/index.js
import dynamic from 'next/dynamic'
const DynamicComponent = dynamic(() =>
import('../components/hello').then((mod) => mod.Hello)
)
SSRなしの場合
クライアントサイドでコンポーネントを動的に読み込むには、ssr
オプションを使用してサーバーレンダリングを無効にすることができます。これは外部依存関係やコンポーネントがwindow
のようなブラウザAPIに依存している場合に便利です。
'use client'
import dynamic from 'next/dynamic'
const DynamicHeader = dynamic(() => import('../components/header'), {
ssr: false,
})
外部ライブラリの場合
この例では、あいまい検索のために外部ライブラリfuse.js
を使用しています。モジュールはユーザーが検索入力に入力した後にブラウザでのみ読み込まれます。
import { useState } from 'react'
const names = ['Tim', 'Joe', 'Bel', 'Lee']
export default function Page() {
const [results, setResults] = useState()
return (
<div>
<input
type="text"
placeholder="Search"
onChange={async (e) => {
const { value } = e.currentTarget
// fuse.jsを動的に読み込む
const Fuse = (await import('fuse.js')).default
const fuse = new Fuse(names)
setResults(fuse.search(value))
}}
/>
<pre>Results: {JSON.stringify(results, null, 2)}</pre>
</div>
)
}