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
570
Next.jsにおけるLazy Loading
Next.jsでのLazyLoadingを使用したローディングの実装方法について解説します。
imaimai17468
July 16, 2024
Tweet
Share
More Decks by imaimai17468
See All by imaimai17468
コーディングチェックの自動化がしたい!
imaimai17468
4
1.1k
型パズルを好きになるために、競プロを型システムだけで解いてみることにした
imaimai17468
5
610
フロントエンド設計の所感 1年目
imaimai17468
0
57
Silk Weave -未来研究大会発表資料-
imaimai17468
1
26
Next.jsでクエリパラメータを楽に扱おう nuqsを紹介!
imaimai17468
3
1.7k
TailwindCSSで学ぶ技術批判の気をつけ方
imaimai17468
7
6.7k
Next.js+yjs+BlockNoteでNotionライクな最高の共同編集エディタを作ろう
imaimai17468
0
2.9k
BlockNoteを布教するぜ
imaimai17468
0
34
Marp + Cursorによるスライド生成
imaimai17468
0
440
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
4 Signs Your Business is Dying
shpigford
184
22k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Speed Design
sergeychernyshev
32
1.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Done Done
chrislema
185
16k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
RailsConf 2023
tenderlove
30
1.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
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