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
540
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.4k
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.9k
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
4k
フロントエンドリアーキテクトの話
yosuke_furukawa
PRO
18
8.9k
Other Decks in Programming
See All in Programming
スタックトレース始めてみた
kuro_kurorrr
5
1.2k
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
1.1k
TypeScriptから始める VR生活
tamagokakeg
2
150
Timeline エディター拡張入門
yucchiy
0
460
RuboCop: LSP and Prism
koic
2
140
The grand strategy of Ruby Parser
yui_knk
5
540
Namespace, What and Why
tagomoris
5
2.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
140
TypeScript Custom GitHub Action Development Tips
peaceiris
5
930
PHPコードの実行モデルを理解する / Understanding-the-PHP-Execution-Model
shin1x1
0
1.1k
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
49
16k
HonoのRPCで真の型安全が欲しかった
kosei28
1
170
Featured
See All Featured
Faster Mobile Websites
deanohume
300
30k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
Thoughts on Productivity
jonyablonski
60
3.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Code Review Best Practice
trishagee
56
15k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Music & Morning Musume
bryan
42
5.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
The Cost Of JavaScript in 2023
addyosmani
21
4k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
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͕΄͍͠