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
App Router 悲喜交々
Search
Yosuke Kurami
September 25, 2024
Programming
8
620
App Router 悲喜交々
Yosuke Kurami
September 25, 2024
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
TypeScript LSP の今までとこれから
quramy
1
570
フロントエンドテストの育て方
quramy
12
3.4k
上手に付き合うコンポーネントテスト
quramy
6
2.1k
Patched fetch did not work
quramy
6
690
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.3k
Next.js App Router
quramy
15
3.6k
Fragment Composition of GraphQL
quramy
16
4k
reg-viz VRT tools
quramy
4
1.4k
NoInfer
quramy
0
290
Other Decks in Programming
See All in Programming
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
10k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
600
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
630
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
710
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
Porting a visionOS App to Android XR
akkeylab
0
290
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
100
CursorはMCPを使った方が良いぞ
taigakono
1
240
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
690
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
140
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Automating Front-end Workflow
addyosmani
1370
200k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Rails Girls Zürich Keynote
gr2m
94
14k
Code Review Best Practice
trishagee
69
18k
Transcript
App Router ൵تަʑ 2024.09.25 @Quramy
Agenda - ࠓ͢͜ͱ: - App Router ։ൃͰۤ͠Μͩ͜ͱ - App Router
࠾༻ͯ͠Α͔ͬͨͱײͨ͜͡ͱ - 20236݄~20243݄ʹͯ Next.js App Router ʹΑΔҊ݅ʹܞΘ͓ͬͯ Γɺͦͷࡍͷମݧஊ͔ΒҰ෦Λൈਮ͍ͯ͠·͢ ৄࡉ: https://speakerdeck.com/quramy/next-dot-js-app-router
App Router Ͱۤ͠Μ ͩ͜ͱ
ΩϟογϡपΓ - Next.js App Router Pages Router ࣌ΑΓΩϟογϡͷछྨ͕ଟ͍ https://nextjs.org/docs/app/building-your-application/caching
ΩϟογϡपΓ - ࣗͷҊ݅ʹͱͬͯඞཁेͳ࠷దԽͱɺNext.js ͕ਪͯ͘͠ΔόΩόΩͷ࠷దԽʹԹ ͕ࠩ... - ʮΩϟογϡͷࡴ͠ํʯΛशಘ͢Δͷʹׂ͘Ӌʹ - αʔόʔଆͰӬଓԽ͞ΕΔΩϟογϡ(Data Cache
/ Full Route Cache): Ҋ݅ಛੑతʹ Cache Hit Rate ΛՔ͛ͳ͍͜ͱ͕͔͍ͬͯͨ(Ή͠ΖোϦεΫ) → Route Con fi g fetch API ͷΦϓγϣϯͰΦϓτΞτ - ϒϥβଆͷ in-memory Ωϟογϡ (Router Cache): → ΦϓτΞτͰ͖ͳ͍ͨΊɺSA ͔Β revalidatePath Ͱ໌ࣔతʹࡴ͢ - Next.js v15 ͰσϑΥϧτͷΩϟογϡ͕ബ͘ͳΔͱͷ͜ͱ
ͦͷଞࡉ͔͍ෆ۩߹ - ։ൃதɺNext.js ଆͷෆ۩߹ʹͪΐͬͱͣͭۤ͠ΊΒΕͨͷࣄ࣮: (͍ͣΕ 2024.9࣌ͷ canary Ͱमਖ਼ࡁ) - instrumentation.ts
Ͱ o11y(Datadog) ͷܭͰ͖ͳ͍ - Router Cache ͕ଘࡏͨ͠Γ͠ͳ͔ͬͨΓ - Intercepting Routes / Parallel Routes ͷࡉ͔͍ෆ۩߹ - msw/node ͑ͳ͍ - etc,,,
App Router ࠾༻ͯ͠ Α͔ͬͨͱײͨ͜͡ͱ
ࣗతͳ Data Fetch - App Router ඪ४Ͱ React Server Components
͕Έࠐ·Ε͍ͯΔ - Pages Router ࣌ͱൺֱͯ͠ɺ Data Fetch Λײతʹ࣮Ͱ͖Δ
ࣗతͳ Data Fetch - Pages Router: - getInitialProps getServerSideProps(getStaticProps)
Λར༻: σʔλऔಘΛίϯϙʔωϯτπϦʔͷͰߦΘͶͳΒͳ͍
ࣗతͳ Data Fetch - App Router: - ඇಉظ Server Component
Λར༻: ίϯϙʔωϯτπϦʔ্ͷͲ͔͜ΒͰσʔλऔಘ͕Մೳ
ࣗతͳ Data Fetch - ʮίϯϙʔωϯτ͕ࣗతʹσʔλΛऔಘͯ͠ύϑΥʔϚϯεΛଛͳ Θͳ͍ʯͱ͍͏ RSC ͷΞʔΩςΫνϟ͕ GraphQL ͖ʹਨᔴϞϊ
- ࢀߟ: - https://speakerdeck.com/quramy/graphql-aruiha-react-niokeruzi-lu- de-nadetaqu-de-nituite - https://quramy.medium.com/react-server-components- %E3%81%A8-graphql- %E3%81%AE%E3%82%A2%E3%83%8A%E3%83%AD%E3%82%B8% E3%83%BC-89b3f5f41a01
ΫϥΠΞϯτόϯυϧͷݮ Data Cache & Full Route Cache ΛΦϓτΞτͯ͠ɺे࣮༻త Pages Router
ͳϓϩμΫτͱൺֱ͢ΔͱɺΓ First Load JavaScript ͷϘ ϦϡʔϜʹѹతͳ͕ࠩग़Δ (App Router Ҋ݅ґଘϥΠϒϥϦ͕গͳ͍ͨΊɺʮͦΕͦ͏ʯͱݴ͑Δ͕) - App Router Ҋ݅: 200 kB (ࢀߟ) Pages Router Ҋ݅: 1,720 kB
Thank you !