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
820
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
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.2k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
250
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
MLH State of the League: 2026 Season
theycallmeswift
0
200
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
270
複雑なドメインに挑む.pdf
yukisakai1225
4
790
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
TDD 実践ミニトーク
contour_gara
1
260
パスタの技術
yusukebe
1
550
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
850
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
620
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
220
AIコーディングAgentとの向き合い方
eycjur
0
250
Laravel Boost 超入門
fire_arlo
2
170
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Visualization
eitanlees
147
16k
Agile that works and the tools we love
rasmusluckow
330
21k
Designing for Performance
lara
610
69k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Optimizing for Happiness
mojombo
379
70k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
How GitHub (no longer) Works
holman
315
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Speed Design
sergeychernyshev
32
1.1k
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͕΄͍͠