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
630
App Router 悲喜交々
Yosuke Kurami
September 25, 2024
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
TypeScript LSP の今までとこれから
quramy
1
620
フロントエンドテストの育て方
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
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
11
1.6k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
610
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
410
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.7k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
200
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
530
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
23
9.6k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Music & Morning Musume
bryan
46
6.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Code Reviewing Like a Champion
maltzj
524
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Language of Interfaces
destraynor
158
25k
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 !