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
7 principles for rich web apps And how next.js ...
Search
Yosuke Furukawa
PRO
September 09, 2023
Programming
6
3.2k
7 principles for rich web apps And how next.js achieves these principles
ジャムスタックチョットデキル 2023/09/09
Yosuke Furukawa
PRO
September 09, 2023
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
130
Removing Corepack
yosuke_furukawa
PRO
9
1.2k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.4k
Strip Types と Storage
yosuke_furukawa
PRO
4
330
Module Harmony について
yosuke_furukawa
PRO
3
1.5k
LTのやり方
yosuke_furukawa
PRO
16
2.1k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
690
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.2k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
25
9.5k
Other Decks in Programming
See All in Programming
Synchronizationを支える技術
s_shimotori
1
150
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
120
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
670
Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト@Vue Fes Japan 2024
shingangan
3
870
CSC305 Lecture 13
javiergs
PRO
0
120
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
140
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
6
390
カスタムしながら理解するGraphQL Connection
yanagii
1
1.1k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
190
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
130
Mastering Dependencies in Kotlin Multiplatform
tomifabian
0
100
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
220
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
4 Signs Your Business is Dying
shpigford
180
21k
Code Review Best Practice
trishagee
64
17k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Writing Fast Ruby
sferik
626
60k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
What's in a price? How to price your products and services
michaelherold
243
12k
Into the Great Unknown - MozCon
thekraken
31
1.5k
Transcript
7 principles for rich web apps And how next.js achieves
these principles @ δϟϜελοΫνϣοτσΩϧΧϯϑΝϨϯε in த yosuke_furukawa / 2023-09-09
X(Twitter): @yosuke_furukawa Github: yosuke-furukawa
JSConf.jp ticket page is open. ࠓΦϑϥΠϯͱΦϯϥΠϯͷϋ ΠϒϦου։࠵༧ఆ ΦϯϥΠϯ10݄ࠒʹެ։͠·͢ɻ ઌߦͯ͠དྷͯ͘ΕΔํࠓͷϖʔδ ͔Βདྷ͍ͯͩ͘͞ʂ
Looong Long time ago... From 2014 ※
ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ ͱ͍͏λΠτϧͰ༁هࣄΛग़ͨ͠ • Vercel ݱ CEO ͷ Guillermo Rauch ࢯ͕ॻ͍ͨهࣄΛ༁ͨ͠ͷ
• ࠓͰࢀߟʹͳΔΑ͏ͳݪଇ
ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ 1.αʔόʔ͕ϖʔδΛϨϯμϦϯά͢ΔͷҙͰͳ͍ɻ 2.ϢʔβʔೖྗʹਝʹରԠ͠Α͏ 3.σʔλͷมߋʹԠ͠Α͏ 4.σʔλมߋΛαʔόʔͱͱʹίϯτϩʔϧ͠Α͏ 5.historyΛյ͖͢͡Όͳ͍ɺhistoryΛ֦ு͠Α͏ 6.ίʔυͷߋ৽ΛPush͠Α͏ 7.ৼΔ͍Λ༧ଌ͠Α͏
ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ 1.αʔόʔ͕ϖʔδΛϨϯμϦϯά͢ΔͷҙͰͳ͍ɻ 2.ϢʔβʔೖྗʹਝʹରԠ͠Α͏ 3.σʔλͷมߋʹԠ͠Α͏ 4.σʔλมߋΛαʔόʔͱͱʹίϯτϩʔϧ͠Α͏ 5.historyΛյ͖͢͡Όͳ͍ɺhistoryΛ֦ு͠Α͏ 6.ίʔυͷߋ৽ΛPush͠Α͏ 7.ৼΔ͍Λ༧ଌ͠Α͏ /FYUKT͜ΕΒͷݪଇΛ͍͔ͭ͘ୡ͍ͯ͠Δ
αʔόʔ͕ϖʔδΛϨϯμϦ ϯά͢ΔͷҙͰͳ͍
αʔό͕ϖʔδΛϨϯμϦϯά͢ΔͷҙͰ ͳ͍ɻ •ҙͰͳ͍ => ඞਢͰ͋Δ •ͭ·ΓϦονͳΣϒΞϓϦέʔγϣϯʹࣄલͷϨϯμϦϯά͕ඞ ਢͰ͋Δͱݴ͍ͬͯΔɻ •ͳ͔ͥʁ
αʔό͕ϖʔδΛϨϯμϦϯά͢ΔͷҙͰ ͳ͍ɻ •ϥϯυτϦοϓʹ͔͔Δ࣌ؒΛͬͯ·͔͢ʁ •࣌ؒɿ •Stanford͔ΒBoston·Ͱޫͷ͞Ͱ43.2ms •ޫϑΝΠόʔͰߦ͘ͱ85ms͔͔Δ
αʔό͕ϖʔδΛϨϯμϦϯά͢ΔͷҙͰ ͳ͍ɻ •ϥϯυτϦοϓճΛͬͯ·͔͢ʁ •CSRͱSSRͰൺֱ͢Δ 4FSWFS CSR ۭͷHTMLऔಘ JavaScriptऔಘ API fetch
4FSWFS SSR HTMLऔಘ JavaScriptऔಘ
αʔό͕ϖʔδΛϨϯμϦϯά͢ΔͷҙͰ ͳ͍ɻ •ϥϯυτϦοϓճΛͬͯ·͔͢ʁ •CSRͱSSRͰൺֱ͢Δ 4FSWFS CSR ۭͷHTMLऔಘ JavaScriptऔಘ API fetch
4FSWFS SSR HTMLऔಘ $43ճ443ճ ˞ݫີͳͰͳ͍ɻ5$1ͷϥϯυτϦοϓͱ͍͏ҙຯͰճҟͳΔɻ
αʔό͕ϖʔδΛϨϯμϦϯά͢ΔͷҙͰ ͳ͍ɻ •ݴ͍͍ͨͷ: •ࣄલʹϨϯμϦϯά͠ͳ͍ͱϢʔβʔͷͪ࣌ؒ͘ͳͬͯ͠· ͏ͱ͍͏͜ͱ •SEOͱ͔ͦ͏͍͏͜ͱͱແؔʹ࠷దͳUXΛఏڙ͢ΔͳΒࣄલʹ ϨϯμϦϯάΛ͢Δํ͕ྑ͍
αʔό͕ϖʔδΛϨϯμϦϯά͢ΔͷҙͰ ͳ͍ɻ •Next.js͢Ͱʹ͜ͷ෦ΛϨϯμϦϯάʹؔ͢ΔιϦϡʔγϣϯΛ͍ ͔ͭ͘ఏڙ͢Δ͜ͱͰୡ͍ͯ͠Δɻ •SSR •SSG •ISR •͞Βʹ Vercel ͱΈ߹ΘͤΔͱCDNͰͷΩϟογϡ༗ޮʹɻ
ϢʔβͷೖྗʹਝʹԠ͠ Α͏
ϢʔβʔͷೖྗʹਝʹԠ͠Α͏ •͖ͬ͞ͷϨϯμϦϯά͕දࣔ͢Δ·Ͱͷ࣌ؒʹରͯ͠ͷͩͱ͢Δͱ ͬͪ͜ૢ࡞ʹରͯ͠ͷ •ૢ࡞ͨ͜͠ͱʹରͯ͠ͷϑΟʔυόοΫΛૣ͘Ͱ͖ΔΑ͏ʹ͢Δ
ϢʔβʔͷೖྗʹਝʹԠ͠Α͏ •࣮ͷճΓʹ͋ΔΞϓϦέʔγϣϯΠϯλϥΫγϣϯʹରͯ͠ߴ ʹԠ͢ΔΑ͏ʹग़དྷ͍ͯΔɻGoogleͷྫ
ϢʔβʔͷೖྗʹਝʹԠ͠Α͏ •્ͯ͠͠·͏ཁҼʹͳΔͷͳʹ͔ •ڊେͳ JavaScript ϑΝΠϧ͕͋Δͱ࣮ૢ࡞Ͱ͖ΔΑ͏ʹͳΔ·Ͱ ͷ͕࣌ؒඇৗʹ͘ͳΔ •ͦͦ͜͏͍͏շదͳϑΟʔυόοΫΛͨΒ͢ͷJSͷ࡞༻ʹ ΑΔӨڹ͕େ͖͍ •ͳͷʹͰ͔͍JS͕͋ΔͱίϯύΠϧ=>࣮ߦͰͨ͘͞Εͯ͠·͏
ϢʔβʔͷೖྗʹਝʹԠ͠Α͏ •Next.jsίʔυεϓϦοτϖʔδ୯ҐͰεϓϦοτͯ͘͠Ε͍ͯΔ •/settings ʹඞཁͳίʔυͱ /login ʹඞཁͳίʔυΛ͚ͯඞཁͳϖʔ δʹ͚ͩඞཁͳίʔυؚ͕·ΕΔΑ͏ʹ͍ͯ͠Δ •͔݁͠ߏ಄͕ྑ͍ɻ React /
react-dom ͳͲͷසग़͢ΔϥΠϒϥϦͷ ͷͲ͜Ͱར༻͞ΕΔͷͰͦΕڞ௨Խ͞Εͨίʔυͱͯ͠࠶ར ༻͞Εׂ͘͢͞Ε͍ͯΔɻ
σʔλͷมߋʹԠ͠Α͏
σʔλͷมߋʹԠ͠Α͏ •ϢʔβϏϦςΟͷ •σʔλ͕มߋ͞Ε͍ͯΔͷʹΘ͟Θ͟ϦϩʔυϘλϯΛԡ͞ͳ͍ͱ͍ ͚ͳ͍Α͏ͳ࡞Γʹ͢Δ͖Ͱͳ͍ •Guillermo Rauchࢯͷ͏Ұͭͷஶ໊ϥΠϒϥϦ socket.io ͳͲΛར༻ ͯ͠σʔλͷมߋʹଈ࠲ʹԠ͢Δ͖ͱ͍͏ •͋Μ·ΓNext.jsؔͳ͍
σʔλͷมߋʹԠ͠Α͏ •ݴ͏қ͘ߦ͏͠ •Firestoreͱ͔socket.ioͱ͔Λۦ͢Δײ͡ʹͳΔ
σʔλมߋΛαʔόʔͱͱ ʹίϯτϩʔϧ͠Α͏
σʔλมߋΛαʔόʔͱͱʹίϯτ ϩʔϧ͠Α͏ •͜ΕϢʔβϏϦςΟͷ •Service Worker ܥ •σʔλૹ৴ͱ͔ʹࣦഊͯ͠ϦτϥΠ͢ΔΈΛ࡞ͬͨΓ •όοΫάϥϯυͰσʔλಉظͯ͠ΩϟογϡΛΦϑϥΠϯͰ͑Δ Α͏ʹ͠Α͏ͱ͍͏ •Next.js͋Μ·Γؔͳ͍
σʔλมߋΛαʔόʔͱͱʹίϯτ ϩʔϧ͠Α͏ •͜͏͍͏ʮ͓ͯͳ͠ʯ͕͋Δͱྑ͍ͱ͍͏খ͍͚͞Ͳେࣄͳ •ྫ͑ɿ •Ϣʔβʔ͕ΦϑϥΠϯʹͳ͔ͬͨͲ͏͔ navigator.onLine ͰଌΕΔɻΦϑϥΠϯʹ ͳͬͯΔͳΒͦΕΛදࣔͯ͋͛͠Δ͖ •APIͷλΠϜΞτͱ͔ϒϥβͤʹͯ͠ͳ͍͔ʁࣗͨͪͰࣄલʹλΠϜΞτ ΩϟϯηϧΛ࣮ͨ͠΄͏͕ྑ͍
•403ΤϥʔʢೝূΤϥʔʣ͕ൃੜ͍ͯ͠ΔͳΒϩάΠϯը໘Λݟͤͯ͋͛Δ͖ •͏͔ͬΓϒϥβดͨ࣌͡ʹ beforeUnload ͰҰճ֬ೝ͢Δͱ͔
ɾσʔλͷมߋʹԠ͠Α͏ ɾσʔλมߋΛαʔόʔͱͱʹίϯτϩʔϧ ͠Α͏ ͜ͷ̎ͭͷݪଇNext.jsؔͳ͍ ͚ͩͲɺ࣮ͷ্ͰؾΛ͚ͭΔ͖ϙΠϯτ
historyΛյ͖͢͡Όͳ͍ɺ historyΛ֦ு͠Α͏
historyΛյ͖͢͡Όͳ͍ɺhistoryΛ ֦ு͠Α͏ •Single Page Application ͋Δ͋Δɺhistory͕յΕͨUI • FYBNQMFDPN FYBNQMFDPN FYBNQMFDPN
εΫϩʔϧ͢Δ ϦϯΫΛΫϦοΫͯ͠ભҠ ͢Δ ભҠޙʹΔ εΫϩʔϧҐஔ͕ ࠷ॳʹΔ
historyΛյ͖͢͡Όͳ͍ɺhistoryΛ ֦ு͠Α͏ •ଞʹ: •͍͍Ͷ͚ͨ͠Ͳɺ͍͍Ͷ͕ͬͨΒফ͑ͯͨʢ࣮ࡍʹՃ͞Εͯ Δʣ •ΞίʔσΟΦϯ։͍ͨޙʹϖʔδભҠͯͬͨ͠ΒΞίʔσΟΦϯ ดͯͯ͡ભҠ͕յΕΔͱ͔
historyΛյ͖͢͡Όͳ͍ɺhistoryΛ ֦ு͠Α͏ •͜ΕԿͰى͖Δ͔ͱݴ͏ͱɿෳ߹తͳཁҼ •ϖʔδભҠલʹ͍ΔҐஔΛϒϥβຊͳΒ֮͑ͯΔ •͚ͩͲͬͨ࣌ʹ history api ΛͬͯͯΔͷ͕ૣͯ͘ίϯςϯπ ͕·ͩͳ͍ͱ͔ͦ͏͍͏࣌ʹى͖Δ •BFCacheͱ͔Navigation
API ͱ͔ Scroll Resolution API ͱ͔ͦ͏͍ ͏ϒϥβ͔Βͷαϙʔτ૿͑ͯΔ͕·ͩ͑ͳ͍ڥଟ͍ͷ Ͱɺ࣮ࡍʹ݁ߏͪ͜ΒଆͰͳΜͱ͔͠ͳ͍ͱ͍͚ͳ͍
historyΛյ͖͢͡Όͳ͍ɺhistoryΛ ֦ு͠Α͏ •Next.jsͩͱεΫϩʔϧҐஔΛ͢ͱ͍͏ҙຯͰɾɾɾ •Page router εΫϩʔϧҐஔΛ֮͑ͯ͘Εͯͯɺϖʔδ͕ϨϯμϦϯά͞Ε͔ͯΒεΫϩʔϧͯ͠ ͘ΕΔ •Experimental Ͱ Scroll
Restoration ϓϩύςΟͰͷ੍ޚͯ͘͠ΕΔɻ •App routerݱ࣌ͩͱͦͷ͋ͨΓͷ͜ͱΩϟογϡʹͤͯΔʢϒϥβʹͤͯΔײ͡ʁʣ •εΫϩʔϧճؼҎ֎ͷ͜ͱԿͯ͠ͳ͍ͷͰɺ࣮ʹؾΛ͚ͭͳ͍ͱ͍͚ͳ͍ •ࣾͰOSSͰϥΠϒϥϦ࡞ͬͯղܾ͢Δਓͨͪνϥϗϥ •https://github.com/recruit-tech/location-state
ίʔυͷมߋΛPush͠Α͏
ίʔυͷมߋΛPush͠Α͏ •σʔλ͕ߋ৽͞Εͨʹ͔͔ΘΒͣɺίʔυ͕ͦͷ··ͩͱͲ͏ͳΔ ͔ •ϨϯμϦϯά͕͏·͘ߦ͔ͳ͍Մೳੑ͕͋Δ •ը໘͕ΤϥʔʹͳΔ •த్ͳঢ়ଶͰϨϯμϦϯά͞ΕΔՄೳੑ͕͋Δ •͜͏͍͏ͷΛආ͚ͳ͚Ε͍͚ͳ͍ɻ
ίʔυͷมߋΛPush͠Α͏ •։ൃڥͩͱ Hot code reload ͳͲͷํ๏ͰίʔυͷมߋΛpushͯ͘͠ ΔͷͰΘ͔Γ͍͢ •ຊ൪ڥͩͱ࣮ͳ͔ͳ͔͍͠ •Τϥʔʹͳͬͨ࣌ʹҰճ৽͘͠ϖʔδΛϋʔυϦϩʔυͤ͞Δͱ͔ͷख ͋ΔͬͪΌ͋Δɻ
•ਅ໘ʹΖ͏ͱ͢ΔͱversionͷࠩҟΛݕͯ͠Ͳ͏͢Δ͔Λ࣮͠ ͳ͍ͱ͍͚ͳ͍ɻΤϥʔ͕ى͖͚ͨͩͰஅ͢ΔͱϦϩʔυ͕ଟ͘ͳΔ
ίʔυͷมߋΛPush͠Α͏ •Next.js ͩͱ getServerSideProps ͳͲͷΈࠐΈͷσʔλ fetch ؔΛͬͯΔ߹ʹෆ ߹͕͋ΔͱversionࠩҟΛݕͯ͠Ϧϩʔυͯ͘͠ΕΔ •ͨͩ͜ͷػೳͪΖΜ PageRouter
ͷΈ •App Router ͩͱ Vercel ͕ఏڙͯ͘͠Ε͍ͯΔ Skew Protection Λ͏ඞཁ͕͋Δʢ͘͠ ࣗલͰ࣮ʣ •
ৼΔ͍Λ༧ଌ͠Α͏
ৼΔ͍Λ༧ଌ͠Α͏ •Ϣʔβʔ͕࣍ʹԿΛ͢Δͷ͔Λ༧ଌͯ͠proactiveʹৼΔ͏ •ྫ͑ Google Map ɺͱਐΉͱ࣍ʹͷํʹϦΫΤετ ͕དྷΔͱ༧ଌͯ͠ઌճΓͯ͠σʔλΛऔಘ͢Δ •Google ݕࡧ༧ଌݕࡧͷ݁ՌΛ prefetch
ͯ͠Δ •͜͏͍͏ಈ͖ΛೖΕΔ͖ͩͱ͍͏ɹ
ৼΔ͍Λ༧ଌ͠Α͏ •एׯͦ͠͏ʹݟ͑Δ •Γ͗͢ΔͱσʔλΛ༨ʹऔΓͦ͏͕ͩɺαʔόͷϦιʔεΛ ػతʹ͍ͭͭɺϢʔβͷ͓ͯͳ͠Λߦ͏ͱ͍͏όϥϯεΛͲ͏ औΔ͔ •ͪͳΈʹ Next.js େϢʔβʔͷ͓ͯͳ͠ʹدͬͯΔɻ
ৼΔ͍Λ༧ଌ͠Α͏ •Next.js next/link Λ͏ͱϢʔβͷviewportʹೖͬͨॠؒʹ prefetch͠ʹ͍͘ •େػత͕ͩɺͦΕ͕ Next.js ΛͬͨαʔϏε͕ߴʹݟ͑Δཧ༝ ͩͬͨΓ͢Δ
•ҰํͰؾΛ͚ͭͳ͍ͱϢʔβͷΪΨୣͬͯͦ͏ͩ͠ɺαʔόʹෛ ՙ͔͔ͬͯΔɺαʔόͷϦΫΤετ͕૿͑ͯͯίετ͕͔͔ͬͯ ͳ͍͔֬ೝ͓ͯ͘͠ͱྑ͍
·ͱΊ
·ͱΊ 1.αʔόʔ͕ϖʔδΛϨϯμϦϯά͢ΔͷҙͰͳ͍ɻ => SSR/SSG/ISRͳͲιϦϡʔγϣϯଟ 2.ϢʔβʔೖྗʹਝʹରԠ͠Α͏ => ίʔυεϓϦοτ͕σϑΥϧτͰ࣮͞ΕͯΔ 3.σʔλͷมߋʹԠ͠Α͏
=> Next.js ͰͷରԠͳ͍͕ɺsocket.ioͳͲͱΈ߹Θ࣮ͤͯͰ͖ Δ
·ͱΊ 4.σʔλมߋΛαʔόʔͱͱʹίϯτϩʔϧ͠Α͏ => Next.js ͰͷରԠͳ͍͕ɺService WorkerͳͲͱΈ߹ΘͤΑ͏ 5.historyΛյ͖͢͡Όͳ͍ɺhistoryΛ֦ு͠Α͏ =>
Page Router ͷ߹ɺ࠷ݶͷεΫϩʔϧҐஔΛ֮͑ͯΔɺ App Router Ωϟογϡ͕ڧ͍ͷͰ ͦΕʹͤͯΔ 6.ίʔυͷߋ৽ΛPush͠Α͏ => Next.js page router ͰΈࠐΈͷσʔλϑΣονؔΛ͑ݕͯ͘͠ΕΔ͕ɺ app router ͷ߹ vercel ʹཔΔܗʹͳΔ͔ʢSkew Protectionʣ 7.ৼΔ͍Λ༧ଌ͠Α͏ => next/link ͰػతʹσʔλΛprefetchͯ͘͠ΕΔ
·ͱΊ • ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇΛվΊͯհͭͭ͠ɺ Next.jsͷػೳΛհͨ͠ɻ • Next.js ͳΜͰ͏Μ͚ͩͬʁͬͯͳͬͨ࣌ʹʮϦονͳΞϓϦέʔγϣ ϯͷͨΊͷݪଇʯʹै͏ͨΊͩͱ͍͏ҙݟͰઆಘࡐྉʹ͑Δͱࢥ͏ɻ • ͪΖΜࣗͨͪͰ͜ΕΒΛ࣮Ͱ͖Δͱࢥ͏ͷͰઈରͷඞཁ݅ʹ
ͳΓಘͳ͍ɻ • ͜Ε͔Β৭ʑΞοϓσʔτ͞Ε͍ͯ͘ͱࢥ͏ͷͰࢹ͍ͯ͘͠༧ఆ