App Router 悲喜交々

Transcript

1. App Router ൵تަʑ 2024.09.25 @Quramy

2. Agenda - ࠓ೔࿩͢͜ͱ: - App Router ։ൃͰۤ͠Μͩ͜ͱ - App Router

   ࠾༻ͯ͠Α͔ͬͨͱײͨ͜͡ͱ - 2023೥6݄~2024೥3݄ʹͯ Next.js App Router ʹΑΔҊ݅ʹܞΘ͓ͬͯ Γɺͦͷࡍͷମݧஊ͔ΒҰ෦Λൈਮ͍ͯ͠·͢ ৄࡉ: https://speakerdeck.com/quramy/next-dot-js-app-router

3. App Router Ͱۤ͠Μ ͩ͜ͱ

4. ΩϟογϡपΓ - Next.js App Router ͸ Pages Router ࣌୅ΑΓ΋Ωϟογϡͷछྨ͕ଟ͍ https://nextjs.org/docs/app/building-your-application/caching

5. ΩϟογϡपΓ - ࣗ਎ͷҊ݅ʹͱͬͯඞཁे෼ͳ࠷దԽͱɺ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 Ͱ͸σϑΥϧτͷΩϟογϡ͕ബ͘ͳΔͱͷ͜ͱ

6. ͦͷଞࡉ͔͍ෆ۩߹ - ։ൃதɺNext.js ଆͷෆ۩߹ʹͪΐͬͱͣͭۤ͠ΊΒΕͨͷ͸ࣄ࣮: (͍ͣΕ΋ 2024.9࣌఺ͷ canary Ͱ͸मਖ਼ࡁ) - instrumentation.ts

   Ͱ o11y(Datadog) ͷܭ૷Ͱ͖ͳ͍ - Router Cache ͕ଘࡏͨ͠Γ͠ͳ͔ͬͨΓ - Intercepting Routes / Parallel Routes ͷࡉ͔͍ෆ۩߹ - msw/node ࢖͑ͳ͍ - etc,,,

7. App Router ࠾༻ͯ͠ Α͔ͬͨͱײͨ͜͡ͱ

8. ࣗ཯తͳ Data Fetch - App Router ͸ඪ४Ͱ React Server Components

   ͕૊Έࠐ·Ε͍ͯΔ - Pages Router ࣌୅ͱൺֱͯ͠ɺ Data Fetch Λ௚ײతʹ࣮૷Ͱ͖Δ

9. ࣗ཯తͳ Data Fetch - Pages Router: - getInitialProps ΍ getServerSideProps(getStaticProps)

   Λར༻: σʔλऔಘΛίϯϙʔωϯτπϦʔͷ௖఺ͰߦΘͶ͹ͳΒͳ͍

10. ࣗ཯తͳ Data Fetch - App Router: - ඇಉظ Server Component

    Λར༻: ίϯϙʔωϯτπϦʔ্ͷͲ͔͜ΒͰ΋σʔλऔಘ͕Մೳ

11. ࣗ཯తͳ 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

12. ΫϥΠΞϯτόϯυϧͷ࡟ݮ Data Cache & Full Route Cache ΛΦϓτΞ΢τͯ͠΋ɺे෼࣮༻త Pages Router

    ͳϓϩμΫτͱൺֱ͢Δͱɺ΍͸Γ First Load JavaScript ͷϘ ϦϡʔϜʹѹ౗తͳ͕ࠩग़Δ (App Router Ҋ݅͸ґଘϥΠϒϥϦ͕গͳ͍ͨΊɺʮͦΕ͸ͦ͏ʯͱ΋ݴ͑Δ͕) - App Router Ҋ݅: ໿ 200 kB (ࢀߟ) Pages Router Ҋ݅: ໿1,720 kB

13. Thank you !