Next.jsにおけるLazy Loading

Next.jsでのLazyLoadingを使用したローディングの実装方法について解説します。

Transcript

1. Next.js における Lazy Loading いまいまい 1
2. 自己紹介 いまいまい　(今井俊希) 株式会社ゆめみ 新卒 フロントエンドエンジニア 絶賛フロントエンド勉強中です 2
3. Lazy Loading とは 必要なときにリソースを読み込 む技術 初期表示に不要なリソースは後 から読み込む 効果 初期ロード時間の短縮 UX の向上 3
4. Lazy Loading の実装方法 1. Dynamic Imports 2. React.lazy( ) + Suspense 4
5. Dynamic Imports next/dynamic 動的インポートをサポートするモジュール React.lazy( )と Suspense で実装 使用例 const DynamicComponent = dynamic(() => import("./DynamicComponent")); 名前付き export をしたコンポーネントは解決する必要アリ const DynamicComponent = dynamic(() => import("./components").then((mod) => mod.NamedExport) ); 5
6. Dynamic Imports によるローディング ClientComponent の場合 - ssr: false をつける const DynamicComponent = dynamic(() => import("./DynamicComponent"), { ssr: false, }); ローディング（fallback）の設定 - loadingプロパティを追加 const DynamicComponent = dynamic(() => import('./DynamicComponent'), { ssr: false loading: () => <p>Loading...</p>, }); 6
7. Dynamic Imports によるローディング React.lazy( ) + Suspense に変換するとこんな感じ import React, { Suspense } from 'react'; const LazyComponent = React.lazy(() => import('./LazyComponent')); export const App() { return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> ); } 7
8. ServerComponent + Suspense との違い 実は非同期なServerComponentの場合 上記のよう実装をする必要はない 8
9. ServerComponentを定義 export const AsyncServerComponent = async () => { const data = await fetchData(); return (...); }; Suspense で挟むだけ ... return ( <Suspense fallback={<p>Loading...</p>}> <AsyncServerComponent /> </Suspense> ); 9
10. Lazy LoadingとStreamingの使い分け Lazy Loading 仕様上ClientComponentになってしまうもの グラフやエディタ系のライブラリ WebGLやJS実装のアニメーション ServerComponent + Suspense 上記以外（ServerComponentで定義できるもの） データフェッチ 10
11. UX/A11yにおけるローディング UX 認知負荷の軽減 エンゲージメントの維持 パフォーマンスの改善 A11y 情報のリアルタイムな明確化 aria-busy / aria-live 11
12. 適切な場所で適切なローディングを 12