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
   

   View Slide

2. X(Twitter): @yosuke_furukawa
   
   
   Github: yosuke-furukawa
   

   View Slide

3. JSConf.jp ticket page
   is open.
   ࠓ೥͸ΦϑϥΠϯͱΦϯϥΠϯͷϋ
   ΠϒϦου։࠵༧ఆ
   
   
   ΦϯϥΠϯ͸10݄ࠒʹެ։͠·͢ɻ
   
   
   ઌߦͯ͠དྷͯ͘ΕΔํ͸ࠓͷϖʔδ
   ͔Βདྷ͍ͯͩ͘͞ʂ
   

   View Slide

4. Looong Long
   time ago...
   From 2014 ※
   

   View Slide

5. ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ
   
   
   ͱ͍͏λΠτϧͰ຋༁هࣄΛग़ͨ͠
   • Vercel ݱ CEO ͷ Guillermo Rauch ࢯ͕ॻ͍ͨهࣄΛ຋༁ͨ͠΋ͷ
   
   
   • ࠓͰ΋ࢀߟʹͳΔΑ͏ͳݪଇ
   

   View Slide

6. ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ
   1.αʔόʔ͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ͸ͳ͍ɻ
   
   
   2.Ϣʔβʔೖྗʹਝ଎ʹରԠ͠Α͏
   
   
   3.σʔλͷมߋʹ൓Ԡ͠Α͏
   
   
   4.σʔλมߋΛαʔόʔͱͱ΋ʹίϯτϩʔϧ͠Α͏
   
   
   5.historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ֦ு͠Α͏
   
   
   6.ίʔυͷߋ৽ΛPush͠Α͏
   
   
   7.ৼΔ෣͍Λ༧ଌ͠Α͏
   

   View Slide

7. ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ
   1.αʔόʔ͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ͸ͳ͍ɻ
   
   
   2.Ϣʔβʔೖྗʹਝ଎ʹରԠ͠Α͏
   
   
   3.σʔλͷมߋʹ൓Ԡ͠Α͏
   
   
   4.σʔλมߋΛαʔόʔͱͱ΋ʹίϯτϩʔϧ͠Α͏
   
   
   5.historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ֦ு͠Α͏
   
   
   6.ίʔυͷߋ৽ΛPush͠Α͏
   
   
   7.ৼΔ෣͍Λ༧ଌ͠Α͏ /FYUKT͸͜ΕΒͷݪଇΛ͍͔ͭ͘ୡ੒͍ͯ͠Δ
   

   View Slide

8. αʔόʔ͕ϖʔδΛϨϯμϦ
   ϯά͢Δͷ͸೚ҙͰ͸ͳ͍
   

   View Slide

9. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ
   ͸ͳ͍ɻ
   •೚ҙͰ͸ͳ͍ => ඞਢͰ͋Δ
   
   
   •ͭ·ΓϦονͳ΢ΣϒΞϓϦέʔγϣϯʹ͸ࣄલͷϨϯμϦϯά͕ඞ
   ਢͰ͋Δͱݴ͍ͬͯΔɻ
   
   
   •ͳ͔ͥʁ
   

   View Slide

10. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ
    ͸ͳ͍ɻ
    •ϥ΢ϯυτϦοϓʹ͔͔Δ࣌ؒΛ஌ͬͯ·͔͢ʁ
    
    
    •࣌ؒɿ
    
    
    •Stanford͔ΒBoston·Ͱޫͷ଎͞Ͱ΋43.2ms
    
    
    •ޫϑΝΠόʔͰߦ͘ͱ85ms͔͔Δ
    

    View Slide

11. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ
    ͸ͳ͍ɻ
    •ϥ΢ϯυτϦοϓճ਺Λ஌ͬͯ·͔͢ʁ
    
    
    •CSRͱSSRͰൺֱ͢Δ
    4FSWFS
    CSR
    ۭͷHTMLऔಘ
    JavaScriptऔಘ
    API fetch
    4FSWFS
    SSR
    HTMLऔಘ
    JavaScriptऔಘ
    

    View Slide

12. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ
    ͸ͳ͍ɻ
    •ϥ΢ϯυτϦοϓճ਺Λ஌ͬͯ·͔͢ʁ
    
    
    •CSRͱSSRͰൺֱ͢Δ
    4FSWFS
    CSR
    ۭͷHTMLऔಘ
    JavaScriptऔಘ
    API fetch
    4FSWFS
    SSR
    HTMLऔಘ
    $43ճ443ճ
    ˞ݫີͳ਺Ͱ͸ͳ͍ɻ5$1ͷϥ΢ϯυτϦοϓͱ͍͏ҙຯͰ͸ճ਺͸ҟͳΔɻ
    

    View Slide

13. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ
    ͸ͳ͍ɻ
    •ݴ͍͍ͨͷ͸:
    
    
    •ࣄલʹϨϯμϦϯά͠ͳ͍ͱϢʔβʔͷ଴ͪ࣌ؒ͸௕͘ͳͬͯ͠·
    ͏ͱ͍͏͜ͱ
    
    
    •SEOͱ͔ͦ͏͍͏͜ͱͱ͸ແؔ܎ʹ࠷దͳUXΛఏڙ͢ΔͳΒࣄલʹ
    ϨϯμϦϯάΛ͢Δํ͕ྑ͍
    

    View Slide

14. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ
    ͸ͳ͍ɻ
    •Next.js͸͢Ͱʹ͜ͷ෦෼ΛϨϯμϦϯάʹؔ͢ΔιϦϡʔγϣϯΛ͍
    ͔ͭ͘ఏڙ͢Δ͜ͱͰୡ੒͍ͯ͠Δɻ
    
    
    •SSR
    
    
    •SSG
    
    
    •ISR
    
    
    •͞Βʹ Vercel ͱ૊Έ߹ΘͤΔͱCDNͰͷΩϟογϡ΋༗ޮʹɻ
    

    View Slide

15. Ϣʔβͷೖྗʹਝ଎ʹ൓Ԡ͠
    Α͏
    

    View Slide

16. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͠Α͏
    •͖ͬ͞ͷϨϯμϦϯά͕දࣔ͢Δ·Ͱͷ࣌ؒʹରͯ͠ͷ࿩ͩͱ͢Δͱ
    ͬͪ͜͸ૢ࡞ʹରͯ͠ͷ࿩
    
    
    •ૢ࡞ͨ͜͠ͱʹରͯ͠ͷϑΟʔυόοΫΛૣ͘Ͱ͖ΔΑ͏ʹ͢Δ࿩
    

    View Slide

17. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͠Α͏
    •࣮͸਎ͷճΓʹ͋ΔΞϓϦέʔγϣϯ͸ΠϯλϥΫγϣϯʹରͯ͠ߴ
    ଎ʹ൓Ԡ͢ΔΑ͏ʹग़དྷ͍ͯΔɻGoogleͷྫ
    

    View Slide

18. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͠Α͏
    •્֐ͯ͠͠·͏ཁҼʹͳΔ΋ͷ͸ͳʹ͔
    
    
    •ڊେͳ JavaScript ϑΝΠϧ͕͋Δͱ࣮͸ૢ࡞Ͱ͖ΔΑ͏ʹͳΔ·Ͱ
    ͷ͕࣌ؒඇৗʹ௕͘ͳΔ
    
    
    •ͦ΋ͦ΋͜͏͍͏շదͳϑΟʔυόοΫΛ΋ͨΒ͢ͷ΋JSͷ࡞༻ʹ
    ΑΔӨڹ͕େ͖͍
    
    
    •ͳͷʹͰ͔͍JS͕͋ΔͱίϯύΠϧ=>࣮ߦͰ௕͘଴ͨ͞Εͯ͠·͏
    

    View Slide

19. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͠Α͏
    •Next.js͸ίʔυεϓϦοτ΋ϖʔδ୯ҐͰεϓϦοτͯ͘͠Ε͍ͯΔ
    
    
    •/settings ʹඞཁͳίʔυͱ /login ʹඞཁͳίʔυΛ෼͚ͯඞཁͳϖʔ
    δʹ͚ͩඞཁͳίʔυؚ͕·ΕΔΑ͏ʹ͍ͯ͠Δ
    
    
    •͔͠΋݁ߏ಄͕ྑ͍ɻ React / react-dom ͳͲͷසग़͢ΔϥΠϒϥϦͷ
    ΋ͷ͸Ͳ͜Ͱ΋ར༻͞ΕΔͷͰͦΕ͸ڞ௨Խ͞Εͨίʔυͱͯ͠࠶ར
    ༻͞Ε΍͘͢෼ׂ͞Ε͍ͯΔɻ
    

    View Slide

20. σʔλͷมߋʹ൓Ԡ͠Α͏
    

    View Slide

21. σʔλͷมߋʹ൓Ԡ͠Α͏
    •ϢʔβϏϦςΟͷ࿩
    
    
    •σʔλ͕มߋ͞Ε͍ͯΔͷʹΘ͟Θ͟ϦϩʔυϘλϯΛԡ͞ͳ͍ͱ͍
    ͚ͳ͍Α͏ͳ࡞Γʹ͢Δ΂͖Ͱ͸ͳ͍
    
    
    •Guillermo Rauchࢯͷ΋͏Ұͭͷஶ໊ϥΠϒϥϦ socket.io ͳͲΛར༻
    ͯ͠σʔλͷมߋʹଈ࠲ʹ൓Ԡ͢Δ΂͖ͱ͍͏࿩
    
    
    •͋Μ·ΓNext.js͸ؔ܎ͳ͍
    

    View Slide

22. σʔλͷมߋʹ൓Ԡ͠Α͏
    •ݴ͏͸қ͘ߦ͏͸೉͠
    
    
    •Firestoreͱ͔socket.ioͱ͔Λۦ࢖͢Δײ͡ʹͳΔ
    

    View Slide

23. σʔλมߋΛαʔόʔͱͱ΋
    ʹίϯτϩʔϧ͠Α͏
    

    View Slide

24. σʔλมߋΛαʔόʔͱͱ΋ʹίϯτ
    ϩʔϧ͠Α͏
    •͜Ε΋ϢʔβϏϦςΟͷ࿩
    
    
    •Service Worker ܥ
    
    
    •σʔλૹ৴ͱ͔ʹࣦഊͯ͠΋ϦτϥΠ͢Δ࢓૊ΈΛ࡞ͬͨΓ
    
    
    •όοΫάϥ΢ϯυͰσʔλಉظͯ͠ΩϟογϡΛΦϑϥΠϯͰ࢖͑Δ
    Α͏ʹ͠Α͏ͱ͍͏࿩
    
    
    •Next.js͸͋Μ·Γؔ܎ͳ͍
    

    View Slide

25. σʔλมߋΛαʔόʔͱͱ΋ʹίϯτ
    ϩʔϧ͠Α͏
    •͜͏͍͏ʮ͓΋ͯͳ͠ʯ͕͋Δͱྑ͍ͱ͍͏খ͍͚͞Ͳେࣄͳ࿩
    
    
    •ྫ͑͹ɿ
    
    
    •Ϣʔβʔ͕ΦϑϥΠϯʹͳ͔ͬͨͲ͏͔͸ navigator.onLine ͰଌΕΔɻΦϑϥΠϯʹ
    ͳͬͯΔͳΒͦΕΛදࣔͯ͋͛͠Δ΂͖
    
    
    •APIͷλΠϜΞ΢τͱ͔ϒϥ΢β೚ͤʹͯ͠ͳ͍͔ʁࣗ෼ͨͪͰࣄલʹλΠϜΞ΢τ΍
    ΩϟϯηϧΛ࣮૷ͨ͠΄͏͕ྑ͍
    
    
    •403ΤϥʔʢೝূΤϥʔʣ͕ൃੜ͍ͯ͠ΔͳΒϩάΠϯը໘Λݟͤͯ͋͛Δ΂͖
    
    
    •͏͔ͬΓϒϥ΢βดͨ࣌͡ʹ beforeUnload ͰҰճ֬ೝ͢Δͱ͔
    

    View Slide

26. ɾσʔλͷมߋʹ൓Ԡ͠Α͏
    
    
    ɾσʔλมߋΛαʔόʔͱͱ΋ʹίϯτϩʔϧ
    ͠Α͏
    
    
    ͜ͷ̎ͭͷݪଇ͸Next.jsؔ܎ͳ͍
    
    
    ͚ͩͲɺ࣮૷ͷ্ͰؾΛ͚ͭΔ΂͖ϙΠϯτ
    

    View Slide

27. historyΛյ͢΂͖͡Όͳ͍ɺ
    historyΛ֦ு͠Α͏
    

    View Slide

28. historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ
    ֦ு͠Α͏
    •Single Page Application ͋Δ͋Δɺhistory͕յΕͨUI
    
    
    •
    FYBNQMFDPN
    FYBNQMFDPN
    FYBNQMFDPN
    εΫϩʔϧ͢Δ
    ϦϯΫΛΫϦοΫͯ͠ભҠ
    ͢Δ ભҠޙʹ໭Δ
    εΫϩʔϧҐஔ͕
    
    
    ࠷ॳʹ໭Δ
    

    View Slide

29. historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ
    ֦ு͠Α͏
    •ଞʹ΋:
    
    
    •͍͍Ͷ͚ͨ͠Ͳɺ͍͍Ͷ͕໭ͬͨΒফ͑ͯͨʢ࣮ࡍʹ͸௥Ճ͞Εͯ
    Δʣ
    
    
    •ΞίʔσΟΦϯ։͍ͨޙʹϖʔδભҠͯ͠໭ͬͨΒΞίʔσΟΦϯ
    ดͯͯ͡ભҠ͕յΕΔͱ͔
    

    View Slide

30. historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ
    ֦ு͠Α͏
    •͜ΕԿͰى͖Δ͔ͱݴ͏ͱɿෳ߹తͳཁҼ
    
    
    •ϖʔδભҠલʹ͍ΔҐஔΛϒϥ΢β͸ຊ౰ͳΒ֮͑ͯΔ
    
    
    •͚ͩͲ໭ͬͨ࣌ʹ history api Λ࢖ͬͯͯ໭Δͷ͕ૣͯ͘ίϯςϯπ
    ͕·ͩͳ͍ͱ͔ͦ͏͍͏࣌ʹى͖Δ
    
    
    •BFCacheͱ͔Navigation API ͱ͔ Scroll Resolution API ͱ͔ͦ͏͍
    ͏ϒϥ΢β͔Βͷαϙʔτ͸૿͑ͯΔ͕·ͩ࢖͑ͳ͍؀ڥ΋ଟ͍ͷ
    Ͱɺ࣮ࡍʹ͸݁ߏͪ͜ΒଆͰͳΜͱ͔͠ͳ͍ͱ͍͚ͳ͍໰୊
    

    View Slide

31. historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ
    ֦ு͠Α͏
    •Next.jsͩͱεΫϩʔϧҐஔΛ໭͢ͱ͍͏ҙຯͰ͸ɾɾɾ
    
    
    •Page router ͸εΫϩʔϧҐஔΛ֮͑ͯ͘Εͯͯɺϖʔδ͕ϨϯμϦϯά͞Ε͔ͯΒεΫϩʔϧͯ͠
    ͘ΕΔ
    
    
    •Experimental Ͱ Scroll Restoration ϓϩύςΟͰͷ੍ޚ΋ͯ͘͠ΕΔɻ
    
    
    •App router͸ݱ࣌఺ͩͱͦͷ͋ͨΓͷ͜ͱ͸Ωϟογϡʹ೚ͤͯΔʢϒϥ΢βʹ೚ͤͯΔײ͡ʁʣ
    
    
    •εΫϩʔϧճؼҎ֎ͷ͜ͱ͸Կ΋ͯ͠ͳ͍ͷͰɺ࣮૷ʹ͸ؾΛ͚ͭͳ͍ͱ͍͚ͳ͍
    
    
    •ࣾ಺Ͱ͸OSSͰϥΠϒϥϦ࡞ͬͯղܾ͢Δਓͨͪ΋νϥϗϥ
    
    
    •https://github.com/recruit-tech/location-state
    

    View Slide

32. ίʔυͷมߋΛPush͠Α͏
    

    View Slide

33. ίʔυͷมߋΛPush͠Α͏
    •σʔλ͕ߋ৽͞Εͨʹ΋͔͔ΘΒͣɺίʔυ͕ͦͷ··ͩͱͲ͏ͳΔ
    ͔
    
    
    •ϨϯμϦϯά͕͏·͘ߦ͔ͳ͍Մೳੑ͕͋Δ
    
    
    •ը໘͕ΤϥʔʹͳΔ
    
    
    •த్൒୺ͳঢ়ଶͰϨϯμϦϯά͞ΕΔՄೳੑ͕͋Δ
    
    
    •͜͏͍͏ͷΛආ͚ͳ͚Ε͹͍͚ͳ͍ɻ
    

    View Slide

34. ίʔυͷมߋΛPush͠Α͏
    •։ൃ؀ڥͩͱ Hot code reload ͳͲͷํ๏ͰίʔυͷมߋΛpushͯ͘͠
    ΔͷͰΘ͔Γ΍͍͢
    
    
    •ຊ൪؀ڥͩͱ࣮͸ͳ͔ͳ͔೉͍͠
    
    
    •Τϥʔʹͳͬͨ࣌ʹҰճ৽͘͠ϖʔδΛϋʔυϦϩʔυͤ͞Δͱ͔ͷख
    ΋͋ΔͬͪΌ͋Δɻ
    
    
    •ਅ໘໨ʹ΍Ζ͏ͱ͢ΔͱversionͷࠩҟΛݕ஌ͯ͠Ͳ͏͢Δ͔Λ࣮૷͠
    ͳ͍ͱ͍͚ͳ͍ɻΤϥʔ͕ى͖͚ͨͩͰ൑அ͢ΔͱϦϩʔυ͕ଟ͘ͳΔ
    

    View Slide

35. ίʔυͷมߋΛPush͠Α͏
    •Next.js ͩͱ getServerSideProps ͳͲͷ૊ΈࠐΈͷσʔλ fetch ؔ਺Λ࢖ͬͯΔ৔߹ʹෆ੔
    ߹͕͋ΔͱversionࠩҟΛݕ஌ͯ͠Ϧϩʔυͯ͘͠ΕΔ
    
    
    •ͨͩ͜ͷػೳ͸΋ͪΖΜ PageRouter ͷΈ
    
    
    •App Router ͩͱ Vercel ͕ఏڙͯ͘͠Ε͍ͯΔ Skew Protection Λ࢖͏ඞཁ͕͋Δʢ΋͘͠
    ͸ࣗલͰ࣮૷ʣ
    
    
    •
    

    View Slide

36. ৼΔ෣͍Λ༧ଌ͠Α͏
    

    View Slide

37. ৼΔ෣͍Λ༧ଌ͠Α͏
    •Ϣʔβʔ͕࣍ʹԿΛ͢Δͷ͔Λ༧ଌͯ͠proactiveʹৼΔ෣͏
    
    
    •ྫ͑͹ Google Map ͸੢΁ɺ੢΁ͱਐΉͱ࣍ʹ੢ͷํ޲ʹϦΫΤετ
    ͕དྷΔͱ༧ଌͯ͠ઌճΓͯ͠σʔλΛऔಘ͢Δ
    
    
    •Google ݕࡧ͸༧ଌݕࡧͷ݁ՌΛ prefetch ͯ͠Δ
    
    
    •͜͏͍͏ಈ͖ΛೖΕΔ΂͖ͩͱ͍͏࿩ɹ
    

    View Slide

38. ৼΔ෣͍Λ༧ଌ͠Α͏
    •एׯ೉ͦ͠͏ʹݟ͑Δ
    
    
    •΍Γ͗͢ΔͱσʔλΛ༨෼ʹऔΓͦ͏͕ͩɺαʔό΁ͷϦιʔεΛ౤
    ػతʹ࢖͍ͭͭɺϢʔβ΁ͷ͓΋ͯͳ͠Λߦ͏ͱ͍͏όϥϯεΛͲ͏
    औΔ͔
    
    
    •ͪͳΈʹ Next.js ͸େ෼Ϣʔβʔ΁ͷ͓΋ͯͳ͠ʹدͬͯΔɻ
    

    View Slide

39. ৼΔ෣͍Λ༧ଌ͠Α͏
    •Next.js ͸ next/link Λ࢖͏ͱϢʔβͷviewport಺ʹೖͬͨॠؒʹ
    prefetch͠ʹ͍͘
    
    
    •େ෼౤ػత͕ͩɺͦΕ͕ Next.js Λ࢖ͬͨαʔϏε͕ߴ଎ʹݟ͑Δཧ༝
    ͩͬͨΓ͢Δ
    
    
    •ҰํͰؾΛ͚ͭͳ͍ͱϢʔβͷΪΨ͸ୣͬͯͦ͏ͩ͠ɺαʔόʹ΋ෛ
    ՙ͸͔͔ͬͯΔɺαʔό΁ͷϦΫΤετ͕૿͑ͯͯίετ͕͔͔ͬͯ
    ͳ͍͔֬ೝ͓ͯ͘͠ͱྑ͍
    

    View Slide

40. ·ͱΊ
    

    View Slide

41. ·ͱΊ
    1.αʔόʔ͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ͸ͳ͍ɻ
    

    => SSR/SSG/ISRͳͲιϦϡʔγϣϯଟ਺
    
    
    2.Ϣʔβʔೖྗʹਝ଎ʹରԠ͠Α͏
    

    => ίʔυεϓϦοτ͕σϑΥϧτͰ࣮૷͞ΕͯΔ
    
    
    3.σʔλͷมߋʹ൓Ԡ͠Α͏
    

    => Next.js ͰͷରԠ͸ͳ͍͕ɺsocket.ioͳͲͱ૊Έ߹Θ࣮ͤͯ૷Ͱ͖
    Δ
    

    View Slide

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ͯ͘͠ΕΔ
    

    View Slide

43. ·ͱΊ
    • ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇΛվΊͯ঺հͭͭ͠ɺ
    Next.jsͷػೳΛ঺հͨ͠ɻ
    
    
    • Next.js ͳΜͰ࢖͏Μ͚ͩͬʁͬͯͳͬͨ࣌ʹʮϦονͳΞϓϦέʔγϣ
    ϯͷͨΊͷݪଇʯʹै͏ͨΊͩͱ͍͏ҙݟͰઆಘࡐྉʹ࢖͑Δͱࢥ͏ɻ
    
    
    • ΋ͪΖΜࣗ෼ͨͪͰ͜ΕΒΛ࣮૷Ͱ͖Δͱࢥ͏ͷͰઈରͷඞཁ৚݅ʹ͸
    ͳΓಘͳ͍ɻ
    
    
    • ͜Ε͔Β΋৭ʑΞοϓσʔτ͞Ε͍ͯ͘ͱࢥ͏ͷͰ஫ࢹ͍ͯ͘͠༧ఆ
    

    View Slide