AppRouter Panel Talk

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

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͕΄͍͠