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
6
290
App Router 悲喜交々
Yosuke Kurami
September 25, 2024
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
上手に付き合うコンポーネントテスト
quramy
3
1.1k
Patched fetch did not work
quramy
6
460
GraphQL あるいは React における自律的なデータ取得について
quramy
13
3.2k
Next.js App Router
quramy
15
2.8k
Fragment Composition of GraphQL
quramy
16
2.7k
reg-viz VRT tools
quramy
4
1.2k
NoInfer
quramy
0
190
Precondition with schema directives
quramy
0
1.3k
T3 Stack and TypeScript ecosystem
quramy
4
1.9k
Other Decks in Programming
See All in Programming
Интеграционное тестирование: как приручить хаос
mariyasaygina
0
250
Rails 8 Frontend: 10 commandments & 7 deadly sins in 2025
yshmarov
0
350
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
1
670
Modernisation Progressive d’Applications PHP
hhamon
0
150
LLMと音声基盤モデルを用いた音声認識
spiralai
PRO
0
110
#TROCCOUG dbt Cloud+TROCCO
troccoug
0
140
推しの夫に恋のGPS「ときメーター」#M5Stack #IoT #M5JPTour2024
riyu
0
200
GraphQLにおけるページネーションベストプラクティス
estie
0
140
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
280
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
13
3.2k
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
0
280
RemixとCloudflare Stack におけるFile Upload
ossamoon
1
110
Featured
See All Featured
Making Projects Easy
brettharned
114
5.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
How GitHub (no longer) Works
holman
310
140k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Embracing the Ebb and Flow
colly
83
4.4k
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 !