遅延読み込み
Next.jsの遅延読み込みは、ルートをレンダリングするのに必要なJavaScriptの量を減らすことで、アプリケーションの初期読み込みパフォーマンスを改善するのに役立ちます。
これにより、クライアントコンポーネントとインポートしたライブラリの読み込みを遅延し、必要な時にのみクライアントバンドルに含めることができます。例えば、ユーザーがモーダルを開くまでモーダルの読み込みを遅延させることができます。
Next.jsで遅延読み込みを実装する方法は2つあります:
next/dynamic
を使用したDynamic ImportsReact.lazy()
とSuspenseの使用
デフォルトでは、サーバーコンポーネントは自動的にコード分割され、ストリーミングを使用してUIの断片をサーバーからクライアントに段階的に送信できます。遅延読み込みはクライアントコンポーネントに適用されます。
next/dynamic
next/dynamic
はReact.lazy()
とSuspenseの複合的な機能です。app
ディレクトリとpages
ディレクトリの両方で同じように動作し、段階的な移行を可能にします。
例
next/dynamic
を使用することで、ヘッダーコンポーネントはページの初期JavaScriptバンドルに含まれなくなります。ページは最初にSuspenseのfallback
をレンダリングし、Suspenseの境界が解決されるとHeader
コンポーネントがレンダリングされます。
import dynamic from 'next/dynamic'
const DynamicHeader = dynamic(() => import('../components/header'), {
loading: () => <p>読み込み中...</p>,
})
export default function Home() {
return <DynamicHeader />
}
補足:
import('path/to/component')
では、パスを明示的に記述する必要があります。テンプレート文字列や変数は使用できません。さらに、import()
はdynamic()
の呼び出し内になければなりません。これにより、Next.jsが特定のdynamic()
呼び出しに対してwebpackバンドル/モジュールIDを一致させ、レンダリング前にプリロードできるようになります。dynamic()
はReactのレンダリング内で使用できません。React.lazy()
と同様に、プリロードを動作させるためにモジュールのトップレベルでマークされる必要があります。
名前付きエクスポートの場合
名前付きエクスポートを動的にインポートするには、import()
から返されるPromiseからそれを返すことができます:
export function Hello() {
return <p>こんにちは!</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="検索"
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>結果: {JSON.stringify(results, null, 2)}</pre>
</div>
)
}