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
890
フロントエンドテストの育て方
quramy
12
3.5k
上手に付き合うコンポーネントテスト
quramy
6
2.1k
Patched fetch did not work
quramy
6
700
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.4k
Next.js App Router
quramy
15
3.6k
Fragment Composition of GraphQL
quramy
16
4k
reg-viz VRT tools
quramy
4
1.5k
NoInfer
quramy
0
290
Other Decks in Programming
See All in Programming
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
690
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
560
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.8k
AI Ramen Fight
yusukebe
0
120
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
10k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
260
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
150
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
910
Jakarta EE Meets AI
ivargrimstad
0
570
新しいモバイルアプリ勉強会(仮)について
uetyo
1
250
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Side Projects
sachag
455
43k
Thoughts on Productivity
jonyablonski
69
4.8k
Raft: Consensus for Rubyists
vanstee
140
7k
Embracing the Ebb and Flow
colly
86
4.8k
RailsConf 2023
tenderlove
30
1.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Navigating Team Friction
lara
188
15k
It's Worth the Effort
3n
185
28k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Visualization
eitanlees
146
16k
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 !