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
660
App Router 悲喜交々
Yosuke Kurami
September 25, 2024
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
TypeScript LSP の今までとこれから
quramy
1
1.2k
フロントエンドテストの育て方
quramy
12
3.6k
上手に付き合うコンポーネントテスト
quramy
6
2.2k
Patched fetch did not work
quramy
6
720
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.5k
Next.js App Router
quramy
15
3.7k
Fragment Composition of GraphQL
quramy
16
4.3k
reg-viz VRT tools
quramy
4
1.5k
NoInfer
quramy
0
310
Other Decks in Programming
See All in Programming
CSC509 Lecture 07
javiergs
PRO
0
240
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
260
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
300
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.7k
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Catch Up: Go Style Guide Update
andpad
0
250
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
650
理論と実務のギャップを超える
eycjur
0
180
CSC509 Lecture 06
javiergs
PRO
0
270
What's new in Spring Modulith?
olivergierke
1
170
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Mobile First: as difficult as doing things right
swwweet
225
10k
Code Review Best Practice
trishagee
72
19k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
A Tale of Four Properties
chriscoyier
161
23k
Being A Developer After 40
akosma
91
590k
RailsConf 2023
tenderlove
30
1.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
BBQ
matthewcrist
89
9.9k
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 !