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
580
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
620
フロントエンド設計の所感 1年目
imaimai17468
0
57
Silk Weave -未来研究大会発表資料-
imaimai17468
1
26
Next.jsでクエリパラメータを楽に扱おう nuqsを紹介!
imaimai17468
3
1.8k
TailwindCSSで学ぶ技術批判の気をつけ方
imaimai17468
7
6.7k
Next.js+yjs+BlockNoteでNotionライクな最高の共同編集エディタを作ろう
imaimai17468
0
2.9k
BlockNoteを布教するぜ
imaimai17468
0
36
Marp + Cursorによるスライド生成
imaimai17468
0
450
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
696
190k
Agile that works and the tools we love
rasmusluckow
330
21k
GitHub's CSS Performance
jonrohan
1032
460k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
The Invisible Side of Design
smashingmag
301
51k
Context Engineering - Making Every Token Count
addyosmani
1
37
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Designing for Performance
lara
610
69k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Done Done
chrislema
185
16k
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