Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next.jsにおけるLazy Loading
Search
imaimai17468
July 16, 2024
0
190
Next.jsにおけるLazy Loading
Next.jsでのLazyLoadingを使用したローディングの実装方法について解説します。
imaimai17468
July 16, 2024
Tweet
Share
More Decks by imaimai17468
See All by imaimai17468
Next.jsでクエリパラメータを楽に扱おう nuqsを紹介!
imaimai17468
3
710
TailwindCSSで学ぶ技術批判の気をつけ方
imaimai17468
6
5.7k
Next.js+yjs+BlockNoteでNotionライクな最高の共同編集エディタを作ろう
imaimai17468
0
2.1k
BlockNoteを布教するぜ
imaimai17468
0
26
Marp + Cursorによるスライド生成
imaimai17468
0
62
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Infographics Made Easy
chrislema
239
18k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
RailsConf 2023
tenderlove
28
810
Music & Morning Musume
bryan
46
6k
Practical Orchestrator
shlominoach
185
10k
Gamification - CAS2011
davidbonilla
79
5k
Faster Mobile Websites
deanohume
304
30k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Adopting Sorbet at Scale
ufuk
73
8.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
How STYLIGHT went responsive
nonsquared
93
5.1k
Transcript
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: () => <p>Loading...</p>, }); 6
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
ServerComponent + Suspense との違い 実は非同期なServerComponentの場合 上記のよう実装をする必要はない 8
ServerComponentを定義 export const AsyncServerComponent = async () => { const
data = await fetchData(); return (...); }; Suspense で挟むだけ ... return ( <Suspense fallback={<p>Loading...</p>}> <AsyncServerComponent /> </Suspense> ); 9
Lazy LoadingとStreamingの使い分け Lazy Loading 仕様上ClientComponentになってしまうもの グラフやエディタ系のライブラリ WebGLやJS実装のアニメーション ServerComponent + Suspense
上記以外(ServerComponentで定義できるもの) データフェッチ 10
UX/A11yにおけるローディング UX 認知負荷の軽減 エンゲージメントの維持 パフォーマンスの改善 A11y 情報のリアルタイムな明確化 aria-busy / aria-live
11
適切な場所で適切なローディングを 12