Upgrade to Pro — share decks privately, control downloads, hide ads and more …

App Router 悲喜交々

Avatar for Yosuke Kurami Yosuke Kurami
September 25, 2024

App Router 悲喜交々

Avatar for Yosuke Kurami

Yosuke Kurami

September 25, 2024
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

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

    ࠾༻ͯ͠Α͔ͬͨͱײͨ͜͡ͱ - 2023೥6݄~2024೥3݄ʹͯ Next.js App Router ʹΑΔҊ݅ʹܞΘ͓ͬͯ Γɺͦͷࡍͷମݧஊ͔ΒҰ෦Λൈਮ͍ͯ͠·͢ ৄࡉ: https://speakerdeck.com/quramy/next-dot-js-app-router
  2. ΩϟογϡपΓ - ࣗ਎ͷҊ݅ʹͱͬͯඞཁे෼ͳ࠷దԽͱɺ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 Ͱ͸σϑΥϧτͷΩϟογϡ͕ബ͘ͳΔͱͷ͜ͱ
  3. ͦͷଞࡉ͔͍ෆ۩߹ - ։ൃதɺNext.js ଆͷෆ۩߹ʹͪΐͬͱͣͭۤ͠ΊΒΕͨͷ͸ࣄ࣮: (͍ͣΕ΋ 2024.9࣌఺ͷ canary Ͱ͸मਖ਼ࡁ) - instrumentation.ts

    Ͱ o11y(Datadog) ͷܭ૷Ͱ͖ͳ͍ - Router Cache ͕ଘࡏͨ͠Γ͠ͳ͔ͬͨΓ - Intercepting Routes / Parallel Routes ͷࡉ͔͍ෆ۩߹ - msw/node ࢖͑ͳ͍ - etc,,,
  4. ࣗ཯తͳ Data Fetch - App Router ͸ඪ४Ͱ React Server Components

    ͕૊Έࠐ·Ε͍ͯΔ - Pages Router ࣌୅ͱൺֱͯ͠ɺ Data Fetch Λ௚ײతʹ࣮૷Ͱ͖Δ
  5. ࣗ཯తͳ Data Fetch - Pages Router: - getInitialProps ΍ getServerSideProps(getStaticProps)

    Λར༻: σʔλऔಘΛίϯϙʔωϯτπϦʔͷ௖఺ͰߦΘͶ͹ͳΒͳ͍
  6. ࣗ཯తͳ Data Fetch - App Router: - ඇಉظ Server Component

    Λར༻: ίϯϙʔωϯτπϦʔ্ͷͲ͔͜ΒͰ΋σʔλऔಘ͕Մೳ
  7. ࣗ཯తͳ 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
  8. ΫϥΠΞϯτόϯυϧͷ࡟ݮ Data Cache & Full Route Cache ΛΦϓτΞ΢τͯ͠΋ɺे෼࣮༻త Pages Router

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