7 principles for rich web apps And how next.js achieves these principles

ジャムスタックチョットデキル 2023/09/09

Transcript

1. 7 principles for rich web apps And how next.js achieves these principles @ δϟϜελοΫνϣοτσΩϧΧϯϑΝϨϯε in த໺ yosuke_furukawa / 2023-09-09
2. X(Twitter): @yosuke_furukawa Github: yosuke-furukawa
3. JSConf.jp ticket page is open. ࠓ೥͸ΦϑϥΠϯͱΦϯϥΠϯͷϋ ΠϒϦου։࠵༧ఆ ΦϯϥΠϯ͸10݄ࠒʹެ։͠·͢ɻ ઌߦͯ͠དྷͯ͘ΕΔํ͸ࠓͷϖʔδ ͔Βདྷ͍ͯͩ͘͞ʂ
4. Looong Long time ago... From 2014 ※
5. ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ ͱ͍͏λΠτϧͰ຋༁هࣄΛग़ͨ͠ • Vercel ݱ CEO ͷ Guillermo Rauch ࢯ͕ॻ͍ͨهࣄΛ຋༁ͨ͠΋ͷ • ࠓͰ΋ࢀߟʹͳΔΑ͏ͳݪଇ
6. ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ 1.αʔόʔ͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ͸ͳ͍ɻ 2.Ϣʔβʔೖྗʹਝ଎ʹରԠ͠Α͏ 3.σʔλͷมߋʹ൓Ԡ͠Α͏ 4.σʔλมߋΛαʔόʔͱͱ΋ʹίϯτϩʔϧ͠Α͏ 5.historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ֦ு͠Α͏ 6.ίʔυͷߋ৽ΛPush͠Α͏ 7.ৼΔ෣͍Λ༧ଌ͠Α͏
7. ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ 1.αʔόʔ͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ͸ͳ͍ɻ 2.Ϣʔβʔೖྗʹਝ଎ʹରԠ͠Α͏ 3.σʔλͷมߋʹ൓Ԡ͠Α͏ 4.σʔλมߋΛαʔόʔͱͱ΋ʹίϯτϩʔϧ͠Α͏ 5.historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ֦ு͠Α͏ 6.ίʔυͷߋ৽ΛPush͠Α͏ 7.ৼΔ෣͍Λ༧ଌ͠Α͏ /FYUKT͸͜ΕΒͷݪଇΛ͍͔ͭ͘ୡ੒͍ͯ͠Δ
8. αʔόʔ͕ϖʔδΛϨϯμϦ ϯά͢Δͷ͸೚ҙͰ͸ͳ͍
9. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ ͸ͳ͍ɻ •೚ҙͰ͸ͳ͍ => ඞਢͰ͋Δ •ͭ·ΓϦονͳ΢ΣϒΞϓϦέʔγϣϯʹ͸ࣄલͷϨϯμϦϯά͕ඞ ਢͰ͋Δͱݴ͍ͬͯΔɻ •ͳ͔ͥʁ
10. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ ͸ͳ͍ɻ •ϥ΢ϯυτϦοϓʹ͔͔Δ࣌ؒΛ஌ͬͯ·͔͢ʁ •࣌ؒɿ •Stanford͔ΒBoston·Ͱޫͷ଎͞Ͱ΋43.2ms •ޫϑΝΠόʔͰߦ͘ͱ85ms͔͔Δ
11. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ ͸ͳ͍ɻ •ϥ΢ϯυτϦοϓճ਺Λ஌ͬͯ·͔͢ʁ •CSRͱSSRͰൺֱ͢Δ 4FSWFS CSR ۭͷHTMLऔಘ JavaScriptऔಘ API fetch 4FSWFS SSR HTMLऔಘ JavaScriptऔಘ
12. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ ͸ͳ͍ɻ •ϥ΢ϯυτϦοϓճ਺Λ஌ͬͯ·͔͢ʁ •CSRͱSSRͰൺֱ͢Δ 4FSWFS CSR ۭͷHTMLऔಘ JavaScriptऔಘ API fetch 4FSWFS SSR HTMLऔಘ $43
    ճ
    
    443
    ճ
    ˞ݫີͳ਺Ͱ͸ͳ͍ɻ5$1ͷϥ΢ϯυτϦοϓͱ͍͏ҙຯͰ͸ճ਺͸ҟͳΔɻ
13. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ ͸ͳ͍ɻ •ݴ͍͍ͨͷ͸: •ࣄલʹϨϯμϦϯά͠ͳ͍ͱϢʔβʔͷ଴ͪ࣌ؒ͸௕͘ͳͬͯ͠· ͏ͱ͍͏͜ͱ •SEOͱ͔ͦ͏͍͏͜ͱͱ͸ແؔ܎ʹ࠷దͳUXΛఏڙ͢ΔͳΒࣄલʹ ϨϯμϦϯάΛ͢Δํ͕ྑ͍
14. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ ͸ͳ͍ɻ •Next.js͸͢Ͱʹ͜ͷ෦෼ΛϨϯμϦϯάʹؔ͢ΔιϦϡʔγϣϯΛ͍ ͔ͭ͘ఏڙ͢Δ͜ͱͰୡ੒͍ͯ͠Δɻ •SSR •SSG •ISR •͞Βʹ Vercel ͱ૊Έ߹ΘͤΔͱCDNͰͷΩϟογϡ΋༗ޮʹɻ
15. Ϣʔβͷೖྗʹਝ଎ʹ൓Ԡ͠ Α͏
16. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͠Α͏ •͖ͬ͞ͷϨϯμϦϯά͕දࣔ͢Δ·Ͱͷ࣌ؒʹରͯ͠ͷ࿩ͩͱ͢Δͱ ͬͪ͜͸ૢ࡞ʹରͯ͠ͷ࿩ •ૢ࡞ͨ͜͠ͱʹରͯ͠ͷϑΟʔυόοΫΛૣ͘Ͱ͖ΔΑ͏ʹ͢Δ࿩
17. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͠Α͏ •࣮͸਎ͷճΓʹ͋ΔΞϓϦέʔγϣϯ͸ΠϯλϥΫγϣϯʹରͯ͠ߴ ଎ʹ൓Ԡ͢ΔΑ͏ʹग़དྷ͍ͯΔɻGoogleͷྫ
18. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͠Α͏ •્֐ͯ͠͠·͏ཁҼʹͳΔ΋ͷ͸ͳʹ͔ •ڊେͳ JavaScript ϑΝΠϧ͕͋Δͱ࣮͸ૢ࡞Ͱ͖ΔΑ͏ʹͳΔ·Ͱ ͷ͕࣌ؒඇৗʹ௕͘ͳΔ •ͦ΋ͦ΋͜͏͍͏շదͳϑΟʔυόοΫΛ΋ͨΒ͢ͷ΋JSͷ࡞༻ʹ ΑΔӨڹ͕େ͖͍ •ͳͷʹͰ͔͍JS͕͋ΔͱίϯύΠϧ=>࣮ߦͰ௕͘଴ͨ͞Εͯ͠·͏
19. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͠Α͏ •Next.js͸ίʔυεϓϦοτ΋ϖʔδ୯ҐͰεϓϦοτͯ͘͠Ε͍ͯΔ •/settings ʹඞཁͳίʔυͱ /login ʹඞཁͳίʔυΛ෼͚ͯඞཁͳϖʔ δʹ͚ͩඞཁͳίʔυؚ͕·ΕΔΑ͏ʹ͍ͯ͠Δ •͔͠΋݁ߏ಄͕ྑ͍ɻ React / react-dom ͳͲͷසग़͢ΔϥΠϒϥϦͷ ΋ͷ͸Ͳ͜Ͱ΋ར༻͞ΕΔͷͰͦΕ͸ڞ௨Խ͞Εͨίʔυͱͯ͠࠶ར ༻͞Ε΍͘͢෼ׂ͞Ε͍ͯΔɻ
20. σʔλͷมߋʹ൓Ԡ͠Α͏
21. σʔλͷมߋʹ൓Ԡ͠Α͏ •ϢʔβϏϦςΟͷ࿩ •σʔλ͕มߋ͞Ε͍ͯΔͷʹΘ͟Θ͟ϦϩʔυϘλϯΛԡ͞ͳ͍ͱ͍ ͚ͳ͍Α͏ͳ࡞Γʹ͢Δ΂͖Ͱ͸ͳ͍ •Guillermo Rauchࢯͷ΋͏Ұͭͷஶ໊ϥΠϒϥϦ socket.io ͳͲΛར༻ ͯ͠σʔλͷมߋʹଈ࠲ʹ൓Ԡ͢Δ΂͖ͱ͍͏࿩ •͋Μ·ΓNext.js͸ؔ܎ͳ͍
22. σʔλͷมߋʹ൓Ԡ͠Α͏ •ݴ͏͸қ͘ߦ͏͸೉͠ •Firestoreͱ͔socket.ioͱ͔Λۦ࢖͢Δײ͡ʹͳΔ
23. σʔλมߋΛαʔόʔͱͱ΋ ʹίϯτϩʔϧ͠Α͏
24. σʔλมߋΛαʔόʔͱͱ΋ʹίϯτ ϩʔϧ͠Α͏ •͜Ε΋ϢʔβϏϦςΟͷ࿩ •Service Worker ܥ •σʔλૹ৴ͱ͔ʹࣦഊͯ͠΋ϦτϥΠ͢Δ࢓૊ΈΛ࡞ͬͨΓ •όοΫάϥ΢ϯυͰσʔλಉظͯ͠ΩϟογϡΛΦϑϥΠϯͰ࢖͑Δ Α͏ʹ͠Α͏ͱ͍͏࿩ •Next.js͸͋Μ·Γؔ܎ͳ͍
25. σʔλมߋΛαʔόʔͱͱ΋ʹίϯτ ϩʔϧ͠Α͏ •͜͏͍͏ʮ͓΋ͯͳ͠ʯ͕͋Δͱྑ͍ͱ͍͏খ͍͚͞Ͳେࣄͳ࿩ •ྫ͑͹ɿ •Ϣʔβʔ͕ΦϑϥΠϯʹͳ͔ͬͨͲ͏͔͸ navigator.onLine ͰଌΕΔɻΦϑϥΠϯʹ ͳͬͯΔͳΒͦΕΛදࣔͯ͋͛͠Δ΂͖ •APIͷλΠϜΞ΢τͱ͔ϒϥ΢β೚ͤʹͯ͠ͳ͍͔ʁࣗ෼ͨͪͰࣄલʹλΠϜΞ΢τ΍ ΩϟϯηϧΛ࣮૷ͨ͠΄͏͕ྑ͍ •403ΤϥʔʢೝূΤϥʔʣ͕ൃੜ͍ͯ͠ΔͳΒϩάΠϯը໘Λݟͤͯ͋͛Δ΂͖ •͏͔ͬΓϒϥ΢βดͨ࣌͡ʹ beforeUnload ͰҰճ֬ೝ͢Δͱ͔
26. ɾσʔλͷมߋʹ൓Ԡ͠Α͏ ɾσʔλมߋΛαʔόʔͱͱ΋ʹίϯτϩʔϧ ͠Α͏ ͜ͷ̎ͭͷݪଇ͸Next.jsؔ܎ͳ͍ ͚ͩͲɺ࣮૷ͷ্ͰؾΛ͚ͭΔ΂͖ϙΠϯτ
27. historyΛյ͢΂͖͡Όͳ͍ɺ historyΛ֦ு͠Α͏
28. historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ ֦ு͠Α͏ •Single Page Application ͋Δ͋Δɺhistory͕յΕͨUI • FYBNQMFDPN FYBNQMFDPN FYBNQMFDPN εΫϩʔϧ͢Δ ϦϯΫΛΫϦοΫͯ͠ભҠ ͢Δ ભҠޙʹ໭Δ εΫϩʔϧҐஔ͕ ࠷ॳʹ໭Δ
29. historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ ֦ு͠Α͏ •ଞʹ΋: •͍͍Ͷ͚ͨ͠Ͳɺ͍͍Ͷ͕໭ͬͨΒফ͑ͯͨʢ࣮ࡍʹ͸௥Ճ͞Εͯ Δʣ •ΞίʔσΟΦϯ։͍ͨޙʹϖʔδભҠͯ͠໭ͬͨΒΞίʔσΟΦϯ ดͯͯ͡ભҠ͕յΕΔͱ͔
30. historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ ֦ு͠Α͏ •͜ΕԿͰى͖Δ͔ͱݴ͏ͱɿෳ߹తͳཁҼ •ϖʔδભҠલʹ͍ΔҐஔΛϒϥ΢β͸ຊ౰ͳΒ֮͑ͯΔ •͚ͩͲ໭ͬͨ࣌ʹ history api Λ࢖ͬͯͯ໭Δͷ͕ૣͯ͘ίϯςϯπ ͕·ͩͳ͍ͱ͔ͦ͏͍͏࣌ʹى͖Δ •BFCacheͱ͔Navigation API ͱ͔ Scroll Resolution API ͱ͔ͦ͏͍ ͏ϒϥ΢β͔Βͷαϙʔτ͸૿͑ͯΔ͕·ͩ࢖͑ͳ͍؀ڥ΋ଟ͍ͷ Ͱɺ࣮ࡍʹ͸݁ߏͪ͜ΒଆͰͳΜͱ͔͠ͳ͍ͱ͍͚ͳ͍໰୊
31. historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ ֦ு͠Α͏ •Next.jsͩͱεΫϩʔϧҐஔΛ໭͢ͱ͍͏ҙຯͰ͸ɾɾɾ •Page router ͸εΫϩʔϧҐஔΛ֮͑ͯ͘Εͯͯɺϖʔδ͕ϨϯμϦϯά͞Ε͔ͯΒεΫϩʔϧͯ͠ ͘ΕΔ •Experimental Ͱ Scroll Restoration ϓϩύςΟͰͷ੍ޚ΋ͯ͘͠ΕΔɻ •App router͸ݱ࣌఺ͩͱͦͷ͋ͨΓͷ͜ͱ͸Ωϟογϡʹ೚ͤͯΔʢϒϥ΢βʹ೚ͤͯΔײ͡ʁʣ •εΫϩʔϧճؼҎ֎ͷ͜ͱ͸Կ΋ͯ͠ͳ͍ͷͰɺ࣮૷ʹ͸ؾΛ͚ͭͳ͍ͱ͍͚ͳ͍ •ࣾ಺Ͱ͸OSSͰϥΠϒϥϦ࡞ͬͯղܾ͢Δਓͨͪ΋νϥϗϥ •https://github.com/recruit-tech/location-state
32. ίʔυͷมߋΛPush͠Α͏
33. ίʔυͷมߋΛPush͠Α͏ •σʔλ͕ߋ৽͞Εͨʹ΋͔͔ΘΒͣɺίʔυ͕ͦͷ··ͩͱͲ͏ͳΔ ͔ •ϨϯμϦϯά͕͏·͘ߦ͔ͳ͍Մೳੑ͕͋Δ •ը໘͕ΤϥʔʹͳΔ •த్൒୺ͳঢ়ଶͰϨϯμϦϯά͞ΕΔՄೳੑ͕͋Δ •͜͏͍͏ͷΛආ͚ͳ͚Ε͹͍͚ͳ͍ɻ
34. ίʔυͷมߋΛPush͠Α͏ •։ൃ؀ڥͩͱ Hot code reload ͳͲͷํ๏ͰίʔυͷมߋΛpushͯ͘͠ ΔͷͰΘ͔Γ΍͍͢ •ຊ൪؀ڥͩͱ࣮͸ͳ͔ͳ͔೉͍͠ •Τϥʔʹͳͬͨ࣌ʹҰճ৽͘͠ϖʔδΛϋʔυϦϩʔυͤ͞Δͱ͔ͷख ΋͋ΔͬͪΌ͋Δɻ •ਅ໘໨ʹ΍Ζ͏ͱ͢ΔͱversionͷࠩҟΛݕ஌ͯ͠Ͳ͏͢Δ͔Λ࣮૷͠ ͳ͍ͱ͍͚ͳ͍ɻΤϥʔ͕ى͖͚ͨͩͰ൑அ͢ΔͱϦϩʔυ͕ଟ͘ͳΔ
35. ίʔυͷมߋΛPush͠Α͏ •Next.js ͩͱ getServerSideProps ͳͲͷ૊ΈࠐΈͷσʔλ fetch ؔ਺Λ࢖ͬͯΔ৔߹ʹෆ੔ ߹͕͋ΔͱversionࠩҟΛݕ஌ͯ͠Ϧϩʔυͯ͘͠ΕΔ •ͨͩ͜ͷػೳ͸΋ͪΖΜ PageRouter ͷΈ •App Router ͩͱ Vercel ͕ఏڙͯ͘͠Ε͍ͯΔ Skew Protection Λ࢖͏ඞཁ͕͋Δʢ΋͘͠ ͸ࣗલͰ࣮૷ʣ •
36. ৼΔ෣͍Λ༧ଌ͠Α͏
37. ৼΔ෣͍Λ༧ଌ͠Α͏ •Ϣʔβʔ͕࣍ʹԿΛ͢Δͷ͔Λ༧ଌͯ͠proactiveʹৼΔ෣͏ •ྫ͑͹ Google Map ͸੢΁ɺ੢΁ͱਐΉͱ࣍ʹ੢ͷํ޲ʹϦΫΤετ ͕དྷΔͱ༧ଌͯ͠ઌճΓͯ͠σʔλΛऔಘ͢Δ •Google ݕࡧ͸༧ଌݕࡧͷ݁ՌΛ prefetch ͯ͠Δ •͜͏͍͏ಈ͖ΛೖΕΔ΂͖ͩͱ͍͏࿩ɹ
38. ৼΔ෣͍Λ༧ଌ͠Α͏ •एׯ೉ͦ͠͏ʹݟ͑Δ •΍Γ͗͢ΔͱσʔλΛ༨෼ʹऔΓͦ͏͕ͩɺαʔό΁ͷϦιʔεΛ౤ ػతʹ࢖͍ͭͭɺϢʔβ΁ͷ͓΋ͯͳ͠Λߦ͏ͱ͍͏όϥϯεΛͲ͏ औΔ͔ •ͪͳΈʹ Next.js ͸େ෼Ϣʔβʔ΁ͷ͓΋ͯͳ͠ʹدͬͯΔɻ
39. ৼΔ෣͍Λ༧ଌ͠Α͏ •Next.js ͸ next/link Λ࢖͏ͱϢʔβͷviewport಺ʹೖͬͨॠؒʹ prefetch͠ʹ͍͘ •େ෼౤ػత͕ͩɺͦΕ͕ Next.js Λ࢖ͬͨαʔϏε͕ߴ଎ʹݟ͑Δཧ༝ ͩͬͨΓ͢Δ •ҰํͰؾΛ͚ͭͳ͍ͱϢʔβͷΪΨ͸ୣͬͯͦ͏ͩ͠ɺαʔόʹ΋ෛ ՙ͸͔͔ͬͯΔɺαʔό΁ͷϦΫΤετ͕૿͑ͯͯίετ͕͔͔ͬͯ ͳ͍͔֬ೝ͓ͯ͘͠ͱྑ͍
40. ·ͱΊ
41. ·ͱΊ 1.αʔόʔ͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ͸ͳ͍ɻ 
 => SSR/SSG/ISRͳͲιϦϡʔγϣϯଟ਺ 2.Ϣʔβʔೖྗʹਝ଎ʹରԠ͠Α͏ 
 => ίʔυεϓϦοτ͕σϑΥϧτͰ࣮૷͞ΕͯΔ 3.σʔλͷมߋʹ൓Ԡ͠Α͏ 
 => Next.js ͰͷରԠ͸ͳ͍͕ɺsocket.ioͳͲͱ૊Έ߹Θ࣮ͤͯ૷Ͱ͖ Δ
42. ·ͱΊ 4.σʔλมߋΛαʔόʔͱͱ΋ʹίϯτϩʔϧ͠Α͏ 
 => Next.js ͰͷରԠ͸ͳ͍͕ɺService WorkerͳͲͱ૊Έ߹ΘͤΑ͏ 5.historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ֦ு͠Α͏ 
 => Page Router ͷ৔߹ɺ࠷௿ݶͷεΫϩʔϧҐஔΛ֮͑ͯΔɺ App Router ͸Ωϟογϡ͕ڧ͍ͷͰ ͦΕʹ೚ͤͯΔ 6.ίʔυͷߋ৽ΛPush͠Α͏ 
 => Next.js ͸ page router Ͱ͸૊ΈࠐΈͷσʔλϑΣονؔ਺Λ࢖͑͹ݕ஌ͯ͘͠ΕΔ͕ɺ app router ͷ৔߹͸ vercel ʹཔΔܗʹͳΔ͔΋ʢSkew Protectionʣ 7.ৼΔ෣͍Λ༧ଌ͠Α͏ 
 => next/link Ͱ౤ػతʹσʔλΛprefetchͯ͘͠ΕΔ
43. ·ͱΊ • ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇΛվΊͯ঺հͭͭ͠ɺ Next.jsͷػೳΛ঺հͨ͠ɻ • Next.js ͳΜͰ࢖͏Μ͚ͩͬʁͬͯͳͬͨ࣌ʹʮϦονͳΞϓϦέʔγϣ ϯͷͨΊͷݪଇʯʹै͏ͨΊͩͱ͍͏ҙݟͰઆಘࡐྉʹ࢖͑Δͱࢥ͏ɻ • ΋ͪΖΜࣗ෼ͨͪͰ͜ΕΒΛ࣮૷Ͱ͖Δͱࢥ͏ͷͰઈରͷඞཁ৚݅ʹ͸ ͳΓಘͳ͍ɻ • ͜Ε͔Β΋৭ʑΞοϓσʔτ͞Ε͍ͯ͘ͱࢥ͏ͷͰ஫ࢹ͍ͯ͘͠༧ఆ