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
1
47
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
240
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
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.6k
Other Decks in Programming
See All in Programming
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
240
QA x AIエコシステム段階構築作戦
osu
0
250
What's new in Adaptive Android development
fornewid
0
140
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
450
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
180
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
2k
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
230
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
110
Jakarta EE Meets AI
ivargrimstad
0
620
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
800
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
680
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
110
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Bash Introduction
62gerente
614
210k
Statistics for Hackers
jakevdp
799
220k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
It's Worth the Effort
3n
185
28k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Docker and Python
trallard
45
3.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
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͕΄͍͠