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
AppRouter Panel Talk
Search
Yosuke Furukawa
PRO
April 30, 2024
Programming
1
520
AppRouter Panel Talk
東京Node学園 42時限目の App Router Panel Talkです。
Yosuke Furukawa
PRO
April 30, 2024
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4.2k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
22
8.3k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
3k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.2k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
16
9.8k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.4k
Deep Dive International Conference
yosuke_furukawa
PRO
0
110
フロントエンドのDXと今後
yosuke_furukawa
PRO
6
3.9k
フロントエンドリアーキテクトの話
yosuke_furukawa
PRO
18
8.9k
Other Decks in Programming
See All in Programming
最近コードレビューで指摘したこと
forrep
3
110
RustでAWS Lambda functionをいい感じに書く
taiki45
2
140
Open AI APIを使う前に知っておきたいアカウントTier の話
akki_megane
0
130
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
13
4.3k
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.9k
Fragment Composition of GraphQL
quramy
14
1.7k
Timeline エディター拡張入門
yucchiy
0
450
一文字エイリアスのすすめ
fujimura
0
190
RaaP
ksss
0
150
ペパボOpenTelemetry革命
pyama86
2
480
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
600
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
17
2.2k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
67
14k
A Philosophy of Restraint
colly
197
16k
Designing with Data
zakiwarfel
96
4.8k
Happy Clients
brianwarren
92
6.4k
Thoughts on Productivity
jonyablonski
60
3.9k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Six Lessons from altMBA
skipperchong
22
3k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Transcript
౦ژNodeֶԂ 42࣌ݶ AppRouter ճ 2024/04/30
ύωϧτʔʔʔΫ
AppRouter͖ͳͱ͜Ζ
AppRouter͖ͳͱ͜Ζ • Mugi: SCʹϨϯμϦϯάΛد͍ͤͯ͘ͱ͍Βͳ͍ঢ়ଶཧ͕ͳ͘ͳ͍ͬͯ͘ɺͳΔ͘Ϧʔϑʹσʔλ ϑΣονΑͬͯ͘ɻ • ࠓ·Ͱswrͱ͔ͬͯͰ͖͔ͨ͠Εͳ͍͕ɺΑΓΓ͘͢ͳͬͨɻ • Takepepe: •
Server Action͕͖ • ߋ৽ܥͷॲཧͷΓํ͕౷Ұ͞Ε͍ͯ͘ؾ͕͢Δ • Scratch Ͱॻ͘ͱͨ͠Β͜͏͍͏ΓํͷΑ͏ͳͷհͨ͠εϥΠυͷ௨Γ • Quramy: • mugi͞ΜͱಉҙݟͳΔ͘ϦʔϑͰσʔλϑΣον͍ͨ͠ • GraphQLͳͯ͘σʔλϑΣον͕͘͢͠ͳͬͨ
AppRouterͭΒ͍ͱ͜Ζ
AppRouterͭΒ͍ͱ͜Ζ • Quramy: • Cache पΓΘ͚Θ͔ΒΜ • Parallel Route /
Intercepting Route ͕᠘ • ࠷ॳͷࠒυΩϡϝϯτͷϖʔδ͕ͳͯ͘ɺ֓೦ͷཧղ͔͠Ͱ͖ͳ͔ͬͨ • Takepepe: • ख୳Γײ͕ͬͯΔ, useFormState => useActionState ͳͲ • Fetch ͷ patch ͕֎ΕΔ͜ͱʹΑΓɺnextʹӨڹग़Δ • ͣͬͱԶୡ͕ࢥͬͯΔͷunstable
AppRouterͭΒ͍ͱ͜Ζ • Mugi: • Unstable • patchόʔδϣϯͷΞοϓσʔτͰյΕΔ • CSRFରࡦͰLBΛט·ͤΔͱյΕΔΑ͏ͳݱ͓͖ͨ
• ςετपΓ͕Ұ൪ͭΒ͍ • ࠓ·ͰͷηΦϦʔ͕௨༻͠ͳ͍
AppRouterΛຊ൪Ͱ͏ͱ͖ Ͳ͏͍͏४උΛ͔ͨ͠
AppRouterΛຊ൪Ͱ͏ͱ͖ Ͳ͏͍͏४උΛ͔ͨ͠ • Mugi: ࣗࣾͷkubernetesڥͰσϓϩΠͨ͠ɻ Cache पΓͰෆಁ໌ͳͷ͕ා͔ͬͨɻใ࿙Ӯ ͱ͔ʹͳΒͳ͍Α͏ʹ͔ͨͬͨ͠ɻ • Cacheʹ͍ͭͯυΩϡϝϯτ͚ͩ͡Όͳͯ͘ɺαϯϓϧɺίʔυಡΈࠐΉͳͲͰରॲͨ͠
• Quramy: • Sensitive ͳσʔλѻ͔ͬͯͨʁ • ใϨϕϧͰݴ͏ͱ͍ํͰ͋Δ • ͱ͍͑ɺؾʹ͍ͯͨ͠ɻ • Cacheʹ࣌ؒΛ͔͚Δ༨༟͕ͳ͔ͬͨ • Server Action͕·ͩϕʔλͩͬͨͷͰɺAPI Route + getSSPʹͤΔΑ͏ʹ࡞ͬͨ
AppRouterͷதͰ҆ఆͯͨ͠ Βࢼ͍ͨ͠ػೳ͋Δ͔ʁ
AppRouterͷதͰ҆ఆͯͨ͠Β ࢼ͍ͨ͠ػೳ͋Δ͔ʁ • Mugi: ࢼ͍ͨ͠ػೳ cache • ৽ϓϩδΣΫτͷਐḿʹӨڹ͢ΔͷͰ·ͩτϥΠͰ͖ͯͳ͍ • APIͷΩϟογϡ͕͑Εͬͱૣ͘ͳΔͣ
• APIαʔόଆͰcache͠ͳ͍ͷ͔ -> ະݕ౼ • Takepepe: • PPR Partial Pre Rendering • Pages Router ͷ SSR ࣌ʹ͍ͱ͍͏ϘτϧωοΫΛ෦తʹࣄલϨϯμϦϯάͯ͠ ղফͰ͖ͳ͍͔ͱࢥͬͯΔ •
AppRouterͷதͰ҆ఆͯͨ͠Β ࢼ͍ͨ͠ػೳ͋Δ͔ʁ • Quramy: • ͳ͍, ࢼͯ҆͠ఆ͠ͳ͔ͬͨͱͯࣗ͠ Ͱworkaroundॻ͍ͯͳΜͱ͔ͪ͠Ό͏ • --turboૣ͘ϑϧͰ͑ͯ΄͍͠ɺຊ൪
ͷϏϧυ͍͍ͨ
Next.js wishlist
Next.js wishlist • Quramy: • Custom Cache Handler ͷඪ४࣮please •
Takepepe: • Devtools͕ॆ࣮ͯͯ͠ཉ͍͠ Stream ݟ͍ͨ • x.com ʹ͢Ͱʹௐࠪ༻wishlist͕͋Δ͔ • .next ͷཧϑΥϧμҎԼΛղੳ͢Δπʔϧ͕΄͍͠ • Mugi • ࡉ͔͍୯ҐͰ component ͷϦϑϨογϡΛ͍ͨ͠ • pageશମͰϦϑϨογϡͱ͔͞ΕͪΌ͏ • revalidatePath Ͱͳ͘ɺ revalidateCompoment͕΄͍͠