AppRouter Panel Talk

Yosuke Furukawa

PRO

April 30, 2024

Tweet Share

Transcript

1. ౦ژNodeֶԂ 42࣌ݶ໨ AppRouter ճ 2024/04/30

2. ύωϧτʔʔʔΫ

3. AppRouter޷͖ͳͱ͜Ζ

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

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

5. AppRouterͭΒ͍ͱ͜Ζ

6. AppRouterͭΒ͍ͱ͜Ζ • Quramy: • Cache पΓΘ͚Θ͔ΒΜ • Parallel Route /

   Intercepting Route ͕᠘ • ࠷ॳͷࠒυΩϡϝϯτͷϖʔδ͕ͳͯ͘ɺ֓೦ͷཧղ͔͠Ͱ͖ͳ͔ͬͨ • Takepepe: • ख୳Γײ͕࢒ͬͯΔ, useFormState => useActionState ͳͲ • Fetch ͷ patch ͕֎ΕΔ͜ͱʹΑΓɺnextʹ΋Өڹग़Δ • ͣͬͱԶୡ͕ࢥͬͯΔͷ͸unstable

7. AppRouterͭΒ͍ͱ͜Ζ • Mugi: • Unstable ໰୊ • patchόʔδϣϯͷΞοϓσʔτͰյΕΔ • CSRFରࡦͰLBΛט·ͤΔͱյΕΔΑ͏ͳݱ৅΋͓͖ͨ

   • ςετपΓ͕Ұ൪ͭΒ͍ • ࠓ·ͰͷηΦϦʔ͕௨༻͠ͳ͍

8. AppRouterΛຊ൪Ͱ࢖͏ͱ͖ Ͳ͏͍͏४උΛ͔ͨ͠

9. AppRouterΛຊ൪Ͱ࢖͏ͱ͖ Ͳ͏͍͏४උΛ͔ͨ͠ • Mugi: ࣗࣾͷkubernetes؀ڥͰσϓϩΠͨ͠ɻ Cache पΓͰෆಁ໌ͳͷ͕ා͔ͬͨɻ৘ใ࿙Ӯ ͱ͔ʹͳΒͳ͍Α͏ʹ͔ͨͬͨ͠ɻ • Cacheʹ͍ͭͯ͸υΩϡϝϯτ͚ͩ͡Όͳͯ͘ɺαϯϓϧɺίʔυಡΈࠐΉͳͲͰରॲͨ͠

   • Quramy: • Sensitive ͳσʔλ͸ѻ͔ͬͯͨʁ • ৘ใϨϕϧͰݴ͏ͱ௿͍ํͰ͸͋Δ • ͱ͸͍͑ɺؾʹͯ͠͸͍ͨɻ • Cacheʹ࣌ؒΛ͔͚Δ༨༟͕ͳ͔ͬͨ • Server Action͕·ͩϕʔλͩͬͨͷͰɺAPI Route + getSSPʹ໭ͤΔΑ͏ʹ࡞ͬͨ

10. AppRouterͷதͰ҆ఆͯͨ͠ Βࢼ͍ͨ͠ػೳ͸͋Δ͔ʁ

11. AppRouterͷதͰ҆ఆͯͨ͠Β ࢼ͍ͨ͠ػೳ͸͋Δ͔ʁ • Mugi: ࢼ͍ͨ͠ػೳ͸ cache • ࡮৽ϓϩδΣΫτͷਐḿʹ΋Өڹ͢ΔͷͰ·ͩτϥΠͰ͖ͯͳ͍ • APIͷΩϟογϡ͕࢖͑Ε͹΋ͬͱૣ͘ͳΔ͸ͣ

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

12. AppRouterͷதͰ҆ఆͯͨ͠Β ࢼ͍ͨ͠ػೳ͸͋Δ͔ʁ • Quramy: • ͳ͍, ࢼͯ҆͠ఆ͠ͳ͔ͬͨͱͯ͠΋ࣗ෼ Ͱworkaroundॻ͍ͯͳΜͱ͔ͪ͠Ό͏ • --turbo͸ૣ͘ϑϧͰ࢖͑ͯ΄͍͠ɺຊ൪

    ͷϏϧυ΋࢖͍͍ͨ

13. Next.js wishlist

14. Next.js wishlist • Quramy: • Custom Cache Handler ͷඪ४࣮૷please •

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