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

AppRouter Panel Talk

AppRouter Panel Talk

東京Node学園 42時限目の App Router Panel Talkです。

Avatar for Yosuke Furukawa

Yosuke Furukawa

April 30, 2024
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. AppRouter޷͖ͳͱ͜Ζ • Mugi: SCʹϨϯμϦϯάΛد͍ͤͯ͘ͱ͍Βͳ͍ঢ়ଶ؅ཧ͕ͳ͘ͳ͍ͬͯ͘ɺͳΔ΂͘Ϧʔϑʹσʔλ ϑΣον΋Αͬͯ͘ɻ • ࠓ·Ͱ΋swrͱ͔࢖ͬͯ΋Ͱ͖͔ͨ΋͠Εͳ͍͕ɺΑΓ΍Γ΍͘͢ͳͬͨɻ • Takepepe: •

    Server Action͕޷͖ • ߋ৽ܥͷॲཧͷ΍Γํ͕౷Ұ͞Ε͍ͯ͘ؾ͕͢Δ • Scratch Ͱॻ͘ͱͨ͠Β͜͏͍͏΍ΓํͷΑ͏ͳ΋ͷ͸঺հͨ͠εϥΠυͷ௨Γ • Quramy: • mugi͞ΜͱಉҙݟͳΔ΂͘ϦʔϑͰσʔλϑΣον͍ͨ͠ • GraphQLͳͯ͘΋σʔλϑΣον͕͠΍͘͢ͳͬͨ
  2. AppRouterͭΒ͍ͱ͜Ζ • Quramy: • Cache पΓΘ͚Θ͔ΒΜ • Parallel Route /

    Intercepting Route ͕᠘ • ࠷ॳͷࠒυΩϡϝϯτͷϖʔδ͕ͳͯ͘ɺ֓೦ͷཧղ͔͠Ͱ͖ͳ͔ͬͨ • Takepepe: • ख୳Γײ͕࢒ͬͯΔ, useFormState => useActionState ͳͲ • Fetch ͷ patch ͕֎ΕΔ͜ͱʹΑΓɺnextʹ΋Өڹग़Δ • ͣͬͱԶୡ͕ࢥͬͯΔͷ͸unstable
  3. AppRouterΛຊ൪Ͱ࢖͏ͱ͖ Ͳ͏͍͏४උΛ͔ͨ͠ • Mugi: ࣗࣾͷkubernetes؀ڥͰσϓϩΠͨ͠ɻ Cache पΓͰෆಁ໌ͳͷ͕ා͔ͬͨɻ৘ใ࿙Ӯ ͱ͔ʹͳΒͳ͍Α͏ʹ͔ͨͬͨ͠ɻ • Cacheʹ͍ͭͯ͸υΩϡϝϯτ͚ͩ͡Όͳͯ͘ɺαϯϓϧɺίʔυಡΈࠐΉͳͲͰରॲͨ͠

    • Quramy: • Sensitive ͳσʔλ͸ѻ͔ͬͯͨʁ • ৘ใϨϕϧͰݴ͏ͱ௿͍ํͰ͸͋Δ • ͱ͸͍͑ɺؾʹͯ͠͸͍ͨɻ • Cacheʹ࣌ؒΛ͔͚Δ༨༟͕ͳ͔ͬͨ • Server Action͕·ͩϕʔλͩͬͨͷͰɺAPI Route + getSSPʹ໭ͤΔΑ͏ʹ࡞ͬͨ
  4. AppRouterͷதͰ҆ఆͯͨ͠Β ࢼ͍ͨ͠ػೳ͸͋Δ͔ʁ • Mugi: ࢼ͍ͨ͠ػೳ͸ cache • ࡮৽ϓϩδΣΫτͷਐḿʹ΋Өڹ͢ΔͷͰ·ͩτϥΠͰ͖ͯͳ͍ • APIͷΩϟογϡ͕࢖͑Ε͹΋ͬͱૣ͘ͳΔ͸ͣ

    • APIαʔόଆͰcache͸͠ͳ͍ͷ͔ -> ະݕ౼ • Takepepe: • PPR Partial Pre Rendering • Pages Router ͷ SSR ࣌ʹ஗͍ͱ͍͏ϘτϧωοΫΛ෦෼తʹࣄલϨϯμϦϯάͯ͠ ղফͰ͖ͳ͍͔ͱࢥͬͯΔ •
  5. Next.js wishlist • Quramy: • Custom Cache Handler ͷඪ४࣮૷please •

    Takepepe: • Devtools͕ॆ࣮ͯͯ͠ཉ͍͠ Stream ݟ͍ͨ • x.com ʹ͢Ͱʹௐࠪ༻wishlist͕͋Δ͔΋ • .next ͷ෺ཧϑΥϧμҎԼΛղੳ͢Δπʔϧ͕΄͍͠ • Mugi • ࡉ͔͍୯ҐͰ component ͷϦϑϨογϡΛ͍ͨ͠ • pageશମͰϦϑϨογϡͱ͔͞ΕͪΌ͏ • revalidatePath Ͱ͸ͳ͘ɺ revalidateCompoment͕΄͍͠