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
340
Next.jsにおけるLazy Loading
Next.jsでのLazyLoadingを使用したローディングの実装方法について解説します。
imaimai17468
July 16, 2024
Tweet
Share
More Decks by imaimai17468
See All by imaimai17468
Silk Weave -未来研究大会発表資料-
imaimai17468
1
9
Next.jsでクエリパラメータを楽に扱おう nuqsを紹介!
imaimai17468
3
1.2k
TailwindCSSで学ぶ技術批判の気をつけ方
imaimai17468
6
6.2k
Next.js+yjs+BlockNoteでNotionライクな最高の共同編集エディタを作ろう
imaimai17468
0
2.5k
BlockNoteを布教するぜ
imaimai17468
0
27
Marp + Cursorによるスライド生成
imaimai17468
0
170
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
5
210
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Building Your Own Lightsaber
phodgson
104
6.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Visualization
eitanlees
146
15k
Unsuck your backbone
ammeep
669
57k
4 Signs Your Business is Dying
shpigford
182
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
960
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
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