Next.js における Lazy Loading いまいまい 1

自己紹介 いまいまい　(今井俊希) 株式会社ゆめみ 新卒 フロントエンドエンジニア 絶賛フロントエンド勉強中です 2

Lazy Loading とは 必要なときにリソースを読み込 む技術 初期表示に不要なリソースは後 から読み込む 効果 初期ロード時間の短縮 UX の向上 3

Lazy Loading の実装方法 1. Dynamic Imports 2. React.lazy( ) + Suspense 4

Dynamic Imports next/dynamic 動的インポートをサポートするモジュール React.lazy( )と Suspense で実装 使用例 const DynamicComponent = dynamic(() => import("./DynamicComponent")); 名前付き export をしたコンポーネントは解決する必要アリ const DynamicComponent = dynamic(() => import("./components").then((mod) => mod.NamedExport) ); 5

Dynamic Imports によるローディング ClientComponent の場合 - ssr: false をつける const DynamicComponent = dynamic(() => import("./DynamicComponent"), { ssr: false, }); ローディング（fallback）の設定 - loadingプロパティを追加 const DynamicComponent = dynamic(() => import('./DynamicComponent'), { ssr: false loading: () =>

Loading...

, }); 6

Dynamic Imports によるローディング React.lazy( ) + Suspense に変換するとこんな感じ import React, { Suspense } from 'react'; const LazyComponent = React.lazy(() => import('./LazyComponent')); export const App() { return ( Loading...}> ); } 7

ServerComponent + Suspense との違い 実は非同期なServerComponentの場合 上記のよう実装をする必要はない 8

ServerComponentを定義 export const AsyncServerComponent = async () => { const data = await fetchData(); return (...); }; Suspense で挟むだけ ... return ( Loading...}> ); 9

Lazy LoadingとStreamingの使い分け Lazy Loading 仕様上ClientComponentになってしまうもの グラフやエディタ系のライブラリ WebGLやJS実装のアニメーション ServerComponent + Suspense 上記以外（ServerComponentで定義できるもの） データフェッチ 10

UX/A11yにおけるローディング UX 認知負荷の軽減 エンゲージメントの維持 パフォーマンスの改善 A11y 情報のリアルタイムな明確化 aria-busy / aria-live 11

適切な場所で適切なローディングを 12