Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ύωϧτʔʔʔΫ

Slide 3

Slide 3 text

AppRouter޷͖ͳͱ͜Ζ

Slide 4

Slide 4 text

AppRouter޷͖ͳͱ͜Ζ • Mugi: SCʹϨϯμϦϯάΛد͍ͤͯ͘ͱ͍Βͳ͍ঢ়ଶ؅ཧ͕ͳ͘ͳ͍ͬͯ͘ɺͳΔ΂͘Ϧʔϑʹσʔλ ϑΣον΋Αͬͯ͘ɻ • ࠓ·Ͱ΋swrͱ͔࢖ͬͯ΋Ͱ͖͔ͨ΋͠Εͳ͍͕ɺΑΓ΍Γ΍͘͢ͳͬͨɻ • Takepepe: • Server Action͕޷͖ • ߋ৽ܥͷॲཧͷ΍Γํ͕౷Ұ͞Ε͍ͯ͘ؾ͕͢Δ • Scratch Ͱॻ͘ͱͨ͠Β͜͏͍͏΍ΓํͷΑ͏ͳ΋ͷ͸঺հͨ͠εϥΠυͷ௨Γ • Quramy: • mugi͞ΜͱಉҙݟͳΔ΂͘ϦʔϑͰσʔλϑΣον͍ͨ͠ • GraphQLͳͯ͘΋σʔλϑΣον͕͠΍͘͢ͳͬͨ

Slide 5

Slide 5 text

AppRouterͭΒ͍ͱ͜Ζ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

AppRouterͭΒ͍ͱ͜Ζ • Mugi: • Unstable ໰୊ • patchόʔδϣϯͷΞοϓσʔτͰյΕΔ • CSRFରࡦͰLBΛט·ͤΔͱյΕΔΑ͏ͳݱ৅΋͓͖ͨ • ςετपΓ͕Ұ൪ͭΒ͍ • ࠓ·ͰͷηΦϦʔ͕௨༻͠ͳ͍

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

AppRouterΛຊ൪Ͱ࢖͏ͱ͖ Ͳ͏͍͏४උΛ͔ͨ͠ • Mugi: ࣗࣾͷkubernetes؀ڥͰσϓϩΠͨ͠ɻ Cache पΓͰෆಁ໌ͳͷ͕ා͔ͬͨɻ৘ใ࿙Ӯ ͱ͔ʹͳΒͳ͍Α͏ʹ͔ͨͬͨ͠ɻ • Cacheʹ͍ͭͯ͸υΩϡϝϯτ͚ͩ͡Όͳͯ͘ɺαϯϓϧɺίʔυಡΈࠐΉͳͲͰରॲͨ͠ • Quramy: • Sensitive ͳσʔλ͸ѻ͔ͬͯͨʁ • ৘ใϨϕϧͰݴ͏ͱ௿͍ํͰ͸͋Δ • ͱ͸͍͑ɺؾʹͯ͠͸͍ͨɻ • Cacheʹ࣌ؒΛ͔͚Δ༨༟͕ͳ͔ͬͨ • Server Action͕·ͩϕʔλͩͬͨͷͰɺAPI Route + getSSPʹ໭ͤΔΑ͏ʹ࡞ͬͨ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

AppRouterͷதͰ҆ఆͯͨ͠Β ࢼ͍ͨ͠ػೳ͸͋Δ͔ʁ • Mugi: ࢼ͍ͨ͠ػೳ͸ cache • ࡮৽ϓϩδΣΫτͷਐḿʹ΋Өڹ͢ΔͷͰ·ͩτϥΠͰ͖ͯͳ͍ • APIͷΩϟογϡ͕࢖͑Ε͹΋ͬͱૣ͘ͳΔ͸ͣ • APIαʔόଆͰcache͸͠ͳ͍ͷ͔ -> ະݕ౼ • Takepepe: • PPR Partial Pre Rendering • Pages Router ͷ SSR ࣌ʹ஗͍ͱ͍͏ϘτϧωοΫΛ෦෼తʹࣄલϨϯμϦϯάͯ͠ ղফͰ͖ͳ͍͔ͱࢥͬͯΔ •

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Next.js wishlist

Slide 14

Slide 14 text

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