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
530
Next.jsにおけるLazy Loading
Next.jsでのLazyLoadingを使用したローディングの実装方法について解説します。
imaimai17468
July 16, 2024
Tweet
Share
More Decks by imaimai17468
See All by imaimai17468
コーディングチェックの自動化がしたい!
imaimai17468
4
770
型パズルを好きになるために、競プロを型システムだけで解いてみることにした
imaimai17468
5
550
フロントエンド設計の所感 1年目
imaimai17468
0
47
Silk Weave -未来研究大会発表資料-
imaimai17468
1
25
Next.jsでクエリパラメータを楽に扱おう nuqsを紹介!
imaimai17468
3
1.6k
TailwindCSSで学ぶ技術批判の気をつけ方
imaimai17468
7
6.5k
Next.js+yjs+BlockNoteでNotionライクな最高の共同編集エディタを作ろう
imaimai17468
0
2.8k
BlockNoteを布教するぜ
imaimai17468
0
34
Marp + Cursorによるスライド生成
imaimai17468
0
330
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Practical Orchestrator
shlominoach
188
11k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Optimizing for Happiness
mojombo
379
70k
The Cult of Friendly URLs
andyhume
79
6.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building an army of robots
kneath
306
45k
How GitHub (no longer) Works
holman
314
140k
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