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
3
810
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, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
9
3.7k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
230
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
410
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
Node.js v22 で変わること
yosuke_furukawa
PRO
13
6.2k
Other Decks in Programming
See All in Programming
RailsGirls IZUMO スポンサーLT
16bitidol
0
130
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
1.1k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
660
ふつうの技術スタックでアート作品を作ってみる
akira888
0
300
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
GoのGenericsによるslice操作との付き合い方
syumai
3
710
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
370
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
660
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
570
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
Goで作る、開発・CI環境
sin392
0
190
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Embracing the Ebb and Flow
colly
86
4.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Fireside Chat
paigeccino
37
3.5k
Thoughts on Productivity
jonyablonski
69
4.7k
GitHub's CSS Performance
jonrohan
1031
460k
4 Signs Your Business is Dying
shpigford
184
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
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͕΄͍͠