PWAに取り組む前に知っておきたい SPAとSEO

Transcript

1. PWAʹऔΓ૊Ήલʹ஌͓͖͍ͬͯͨ SPAͱSEO @PWA Conference 2020/02/01

2. ؔ ݑ໵ @sekikazu01 גࣜձࣾLinc’well ΤϯδχΞ

3. PWA SEO ✖

4. PWA ֓೦తʹ͸ͦΜͳʹؔ܎ͳ͍ SEO ✖

5. 18"Ͱ͸ΞϓϦϥΠΫͳମݧΛఏڙ͢ΔͨΊʹ
   ಈతʹίϯςϯπΛඳը͢Δ͜ͱ͕͠͹͠͹

6. 18"ʹऔΓ૊Ήલʹ 4&0ͷϦεΫΛֶͼ
   ϏδωεΛᆝଛ͠ͳ͍
   Α͏ʹ͠·͠ΐ͏ʂ

7. ຊ೔ͷ͓࿩ ࿩͢͜ͱ
   • SPAͷߏஙΛݕ౼͍ͯ͠Δ͜ͱΛલఏͱ͠ʮSEOͷ౔୆ͮ͘Γʯͷํ๏ʹ͍͓ͭͯ ࿩͠͠·͢ɻ • ͍ΘΏΔςΫχΧϧSEOͱݺ͹ΕΔ΋ͷͷҰ෦Ͱ͢ɻ ࿩͞ͳ͍͜ͱ
   • ϥϯΩϯάΛͲ͏্͍͔͛ͯ͘ͳͲ۩ମతͳSEOςΫχοΫʹ͍ͭͯ͸࿩͠·ͤΜ

   ·ͨɺલఏͱͯ͠ݕࡧΤϯδϯ͸
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   ͷΈΛߟྀ͍ͯ͠·͢

8. Agenda l4&0zͱ͸ͳʹ͔ 1 41"ʹ͓͚Δ4&0ͷ՝୊ ͲΜͳղܾࡦ͕͋Δͷ͔ ཁٻύλʔϯ͝ͱͷղܾࡦͷબͼํ 2 3 4

9. “SEO”ͱ͸ͳʹ͔ 01.

10. SEO = Search Engine Optimization

11. ʮ4&0ͷ౔୆ʯ
    
    
    ͦ΋ͦ΋ͷ࿩ͱͯ͠(PPHMF
    CPUʹΠϯσοΫε͞ΕΔ͜ͱ
    ͦͷͨΊʹ͸࣍ͷ̎఺͕ඞཁ
     (PPHMF
    CPUʹΫϩʔϧ͞ΕΔ͜ͱ
     )5.-͕ద੾ʹղऍ͞ΕΔ͜ͱ

12. ʮ4&0ͷ౔୆ʯ
    
    
    ͦ΋ͦ΋ͷ࿩ͱͯ͠(PPHMF
    CPUʹΠϯσοΫε͞ΕΔ͜ͱ
    ͦͷͨΊʹ͸࣍ͷ̎఺͕ඞཁ
     (PPHMF
    CPUʹΫϩʔϧ͞ΕΔ͜ͱ
     )5.-͕ద੾ʹղऍ͞ΕΔ͜ͱ ˞͜Εʹ͍ͭͯ͸TJUFNBQͱ͔ؤுͬͯ
    ͘Εͬͯ࿩ͳͷͰࠓ೔͸৮Ε·ͤΜ

13. 'BDFCPPL
    0(1
    5XJUUFS
    $BSE 'BDFCPPLͷ0(1΍5XJUUFS
    $BSEͳͲ΋
    z4&0z
    ͷจ຺ͰޠΒΕΔ͜ͱ͕͋Δ
    ࣮ࡍ͸શ͘΋ͬͯ4&0Ͱ͸ͳ͍ͷ͕ͩɺҰॹʹޠΒΕΔͷ͕౰ͨΓલͷੈͷதʹͳͬ ͯ͠·ͬͨͷͰຊτʔΫͰ͸߹Θͤͯड़΂Δɻ

14. ߏ଄Խσʔλ ݕࡧ݁ՌͰͷදࣔΛϦονʹͯ͘͠ΕΔ΋ͷ
    IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTTFBSDIHBMMFSZ

15. ߏ଄Խσʔλͷྫ
    ".1 “ಡΈࠐΈ͕΄΅ҰॠͰ׬ྃ͠εϜʔζʹදࣔ͞Ε Δັྗతͳ΢ΣϒϖʔδΛ؆୯ʹ࡞੒Ͱ͖ΔΦʔ ϓϯιʔε ϥΠϒϥϦ” - ߴ଎Խʹͱ͜ͱΜͩ͜Θͬͨ࢓༷ - ಠࣗͷJSΛ࣮ߦͰ͖ͳ͍ͳͲͷ੍໿͕͋Δ

    ࢀߟ
    IUUQTXXXBNQQSPKFDUPSHKBEPDT

16. ߏ଄Խσʔλͷྫ
    ಈը IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTEBUBUZQFTWJEFP IMKB

17. ·ͱΊ ʮ4&0ʯͱ͍͏ݴ༿͕࢖ΘΕΔ࣌ʹ͸࣍ͷೋͭͷจ຺͕͋Δ
     (PPHMFͷݕࡧ݁ՌͰΑΓ্Ґʹදࣔ͞ΕΔͨΊͷࢪࡦ
     0(1΍5XJUUFS
    $BSEɺ".1ͳͲͷߏ଄Խσʔλͷදࣔ
    
    
    
    
    
    
    ˞ຊτʔΫͰ͸͜ΕҎ߱શ෦ͻͬ͘ΔΊͯʮϝλ৘ใʯͱݺͼ·͢ ஫
    ҰൠతͳݺͼํͰ͸ͳ͍Ͱ͢ ʮ4&0ͷ౔୆ʯ
    Λ࡞ΔͨΊʹ͸࣍ͷ̎఺͕ඞཁ
    

    (PPHMF
    CPUʹΫϩʔϧ͞ΕΔ͜ͱ
     )5.-͕ద੾ʹղऍ͞ΕΔ͜ͱ

18. SPAʹ͓͚Δ SEOͷ՝୊ 02.

19. None

20. ͳʹ΋ରࡦ͍ͯ͠ͳ͍41"ͷૉͷ)5.-͸͜Μͳײ͡

21. ՝୊
    λΠϜΞ΢τ ౰ͨΓલ͚ͩͲͣͬͱ଴ͬͯ͘ΕΔΘ͚Ͱ͸ͳ͍
    ϦΫΤετʹ͕͔͔࣌ؒΓ͗͢Δͱͦ΋ͦ΋ΠϯσοΫεͯ͘͠Εͳ͔ͬͨΓ
    த్൒୺ͳͱ͜ΖͰϨϯμϦϯά͕ଧͪ੾ΒΕͯ͠·ͬͨΓ͢Δ

22. Կඵ·ͰͳΒ଴ͬͯ͘ΕΔͷ͔ʁ IUUQTNFEJVNDPN!MNVHOBJOJTQBBOETFPJTHPPHMFCPUBCMFUP SFOEFSBTJOHMFQBHFBQQMJDBUJPOGFBC ৄࡉʹݕূͯ͘͠Εͨํ͕͍ͨͷͰύΫΓ݁ՌΛ͓आΓ͠·͢
    લఏ
    
    
    
    
    
    
    
    
    
    
    &MNͰͰ͖ͨ41"αΠτ
     QVTI4UBUFͰϖʔδΛมߋ͍ͯ͠Δ

23. Կඵ·ͰͳΒ଴ͬͯ͘ΕΔͷ͔ʁ ݕূ಺༰
    ҎԼͷ̏ύλʔϯΛΞοϓσʔτ͢Δ͜ͱʹΑͬͯλΠϜΞ΢τʹ͔͔Δ࣌ؒͷݕূ
     ࣌ؒͷදه UJUMF
    EFTDSJQUJPO
    ϖʔδ಺ͷςΩετ
    
    ຖඵมԽ
    

    5ZQF
    "
    
    
    
    
    ඵͷEFMBZΛ࣋ͬͨϦΫΤετ
     5ZQF
    #
    
    
    
    
    ඵͷEFMBZޙʹϦΫΤετ

24. Կඵ·ͰͳΒ଴ͬͯ͘ΕΔͷ͔ʁ ݕূͷ֬ೝํ๏
    'FUDI
    BT
    (PPHMF
    ͱ
    l/BUVSBMzͳ(PPHMFͷΠϯσοΫεͰ֬ೝ͢Δ

25. Կඵ·ͰͳΒ଴ͬͯ͘ΕΔͷ͔ʁ ݁Ռ
     'FUDI
    BT
    (PPHMFͰ͸໿ඵ଴ͬͯ͘ΕΔ
     l/BUVSBMzͳ(PPHMF
    CPUͰ͸໿ඵ଴ͬͯ͘ΕΔ
    ˞ͪͳΈʹ౰વͷ͜ͱͳ͕Β(PPHMF͕ͲΜͳ؀ڥ ճઢ଎౓΍Ϛγϯύϫʔ ͰϨϯμ Ϧϯά͍ͯ͠Δͷ͔͸ෆ໌Ͱ͢ɻ

26. Կඵ·ͰͳΒ଴ͬͯ͘ΕΔͷ͔ʁ தͷਓͷ͓ݴ༿ˏ+BWB4DSJQU
    4JUFT
    JO
    4FBSDI
    8PSLJOH
    (SPVQ CZ
    +PIO
    .VFMMFS

27. ٙ໰
    λΠϜΞ΢τͨ͠ΒΠϯσοΫεͯ͘͠Εͳ͍ͷ͔ʁ ઌ΄Ͳͷݕূ͕͍ࣔͯ͠Δ௨ΓλΠϜΞ΢τͯ͠΋ɺͦΕ·ͰʹϨϯμϦϯάͨ͠΋ ͷʹؔͯ͠͸ΠϯσοΫε͞Ε͍ͯΔɻ
    ͓ͦΒ͘Ұ౓1BJOUʹࢸΔ·ͰʹλΠϜΞ΢τ΍Τϥʔ͕ى͖Δͷ͕෼ذ఺ͳͷͰ͸ɻ ˞ະݕূͷԾઆͰ͢ɻࢀߟఔ౓ʹཹΊ͍ͯͩ͘͞ɻ 
    GSBNF

28. ՝୊
    ϝλ৘ใ͸αʔό͔Βฦ࣌͢఺Ͱ)5.- ʹؚ·Ε͍ͯΔඞཁ͕͋Δ ͦ΋ͦ΋+4Λ࣮ߦͯ͘͠Εͳ͍ͷͰɺ
    αʔό͔Βฦͬͯ͘Δ࣌఺Ͱ)5.-ʹؚ·Ε͍ͯͳ͍ͱղऍͯ͘͠Εͳ͍
    ͪͳΈʹ".1ͩͱϝλ৘ใʹݶΒͣશͯαʔόଆͰඳը͢Δඞཁ͕͋Δ ❌

29. ՝୊
    3FOEFS
    2VFVFʹΑΔΠϯσοΫεͷ஗Ԇ +4Λ࣮ߦ͢ΔαΠτ͸)5.-͚ͩͷ੩తͳαΠτͱ͸ҟͳΓɺ͙͢ʹΠϯσοΫε͞ΕΔ༁Ͱ͸ͳ͘ɺ
    Ұ౓
    3FOEFS
    2VFVF
    ͱ͍͏΋ͷʹॲཧ͕Ҡৡ͞ΕΔ

30. IUUQTXXXZPVUVCFDPNXBUDI W:1U.#IZ6* ि͔͔ؒΔ͜ͱ΋ʂ ͳͷͰίϯςϯπͷߋ৽͕සൟͳαΠτͰ͸໰୊ʹͳΔ

31. ͪͳΈʹʜ͜ΕΒͷ՝୊ʹ
    
    
    
    
    
    
    
    
    
    
    
    
    ͸Ͳ͏ߟ͍͑ͯΔͷͰ͠ΐ͏͔ʁ

32. IUUQTXXXZPVUVCFDPNXBUDI W:1U.#IZ6*

33. ʮ3FOEFS
    2VFVFʹΑΔΠϯσοΫεͷ஗Ԇʯ
    ʹؔͯ͠͸কདྷతʹղܾ͞Εͦ͏

34. ੲͷจݙړͬͯΔͱ(PPHMF
    CPU͕ѻ͍ͬͯΔϨϯ μϦϯάΤϯδϯ͸$ISPNF
    
    ૬౰Έ͍ͨͳ
    ৘ใग़ͯ͘Δͱࢥ͍·͕͢ IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTSFOEFSJOH ˞$ISPNF
    ͸
    ೥݄ࠒʹग़ͨϒϥ΢β

35. ˞$ISPNF
    ͸
    ೥݄ࠒʹग़ͨϒϥ΢β ͱݴ͏Α͏ͳ͜ͱ͕ 2019೥5݄Ҏདྷ࠷৽ͷChromeͱಉ͡όʔδϣϯ ͷػೳͰϨϯμϦϯά͢ΔΑ͏ʹͳΓ·ͨ͠ɻ https://webmasters.googleblog.com/2019/05/ the-new-evergreen-googlebot.html ͱ͸͍͑ Fetch as Google

    Ͱͷ
 දࣔ֬ೝ͘Β͍͸͠ͱ͍ͨํ͕҆৺͔ͳ…

36. ·ͱΊ 41"Ͱ4&0ͷ౔୆Λ࡞ΔͨΊʹ͸࣍ͷ՝୊Λೝࣝ͢Δ
    
    λΠϜΞ΢τʹΑΓ
     ͦ΋ͦ΋ΠϯσοΫε͞Εͳ͍
     ෆ׬શͳ৘ใ͕ΠϯσοΫε͞Εͯ͠·͏
    
    ϝλ৘ใ͸αʔόଆͰϨϯμϦϯά͢Δඞཁ͕͋Δ
    
    3FOEFS
    2VFVFʹΑΔΠϯσοΫεͷ஗Ԇ
    

37. ͲΜͳղܾࡦ ͕͋Δͷ͔ 03.

38. 
    ϝλ৘ใ͚ͩ443 *OEFYIUNM ϒϥ΢β ϝλ৘ใͷ෦෼͚ͩ
    63-ʹԠͯ͡ॻ͖׵͑ ϝλ৘ใ͑͞൓ө͞ΕΕ͹ʜͦΜͳϛχϚϜͳରԠΛ͍ͨ͋͠ͳͨʹɻ

39. 
    %ZOBNJD
    3FOEFSJOH QSFSFOEFS IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTEZOBNJDSFOEFSJOH QSFSFOEFSJP
    SFOEFSUSPO

40. QSFSFOEFSJPͷྫ Prerender Service Google bot ? (UserAgentͰ൑ఆ) :FT DBDIF͞Εͯͳ͍ )FBEMFTT
    $ISPNF

    DBDIF͞ΕͯΔ /P JOEFYIUNM
    ͱ
    +4ฦ͢ DBDIF DBDIF͢Δ

41. 
    %ZOBNJD
    3FOEFSJOH QSFSFOEFS IUUQTXXXZPVUVCFDPNXBUDI W1'X6CHWQEB2 (PPHMF
    *0
    ʹͯ ଟ෼ ॳΊͯ
    ʮ%ZOBNJD
    3FOEFSJOHʯ
    ͱ͍͏໊લ͕͍ͭͨɻ
    
    

    (PPHMF͓๽෇͖ͷख๏ɻ

42. ΫϩʔΩϯάʹ͍ͭͯ ϒϥοΫϋοτ4&0ͷҰͭɻCPU
    ͱϢʔβʹҧ͏ίϯςϯπΛฦ͢͜ͱΛࢦ͢
    όϨΔͱϖφϧςΟ͕ՊͤΒΕΔ ΢Σϒ αΠτ Google bot Ϣʔβ

43. ΫϩʔΩϯάʹ͍ͭͯ 'FUDI
    BT
    (PPHMFͰݟΕΔ௨Γ(PPHMF͸ͳΜΒ͔ͷํ๏ͰϢʔβ͕࣮ࡍʹݟΔ ը໘Λ࠶ݱ͍ͯ͠ΔɻΘ͟Θ͟(PPHMFࣗ਎͕%ZOBNJD
    3FOEFSJOHΛਪ͍ͯ͠ Δ͜ͱ͔Βɺ6"Ͱग़͠෼͚͍ͯͯ΋͋Δఔ౓ಉҰͳΒେৎ෉ͳ͸ͣ ଟ෼ ɻ
    

44. ·ͩ঺հ͍ͯ͠ͳ͍ख๏΋͋Γ·͕͢ɺ
    ର4&0ʹؔͯ͠͸͜ͷ%ZOBNJD
    3FOEFSJOH͕ສೳͷιϦϡʔγϣϯͰ͢ɻ  λΠϜΞ΢τ
     ϝλ৘ใ
    
    
    
     3FOEFS
    2VFVF
    ˠ
    
    Ωϟογϡ͔Βฦ͢ͷͰແ໰୊
    ˠ
    
    αʔόଆͰඳը͢ΔͷͰ0,
    

    ˠ
    
    +4࣮ߦ͠ͳ͍ͷͰ3FOEFS
    2VFVFʹೖΒͳ͍

45. 
    4UBUJD
    4JUF
    (FOFSBUPS ࣄલʹ)5.-Λੜ੒ 3FBDU΍7VFͳͲͷ41"ϥΠϒϥϦͰߏங

46. ࣍ͷΑ͏ͳ΋ͷ͚ͩΫϥΠΞϯταΠυʹ೚ͤΔͱ͔͸Ͱ͖ΔͷͰ΢ΣϒΞϓϦʹҰ෦࢖͏ ͱ͔΋Ͱ͖Δɻ
    ɾϩάΠϯͨ͠ϢʔβͷΈݟΒΕΔ
    ɾϢʔβΧελϚΠζ͞ΕͨϨίϝϯυΛग़͢ ͋ͱͰৄࡉʹ৮ΕΔ͕ɺϢʔβମݧ΋্͛ͭͭ(FMPͷ޲্) ͦ͜·Ͱ։ൃΛେมʹͤ͞ͳ͍ͰSEOͷ৺഑΋ݮΒͤΔख๏ͱͯ͠ ͳ͔ͳ͔ے͕͍͍ͱࢥ͍ͬͯΔ

47. 
    443 4FSWFS
    4JEF
    3FOEFSJOH ϒϥ΢β αʔόଆͰ+4Λ࣮ߦͯ͠
    )5.-Λੜ੒

48. ஫ҙ఺
    44(΍443Ͱ΋λΠϜΞ΢τ͸͋ΓಘΔ Φ΢νʔϊ༷ͷࣄྫ
    IUUQTEFWFMPQFSTPVDDJOPDPNFOUSZ Rails+ReactͳSPAαΠτͰSEOΛ͠Α͏ͱͯ͠Ϳ͔ͭͬͨน

49. ཁٻύλʔϯ͝ͱͷ ղܾࡦͷબͼํ 04.

50. ٕज़બఆʹؔΘΔཁૉ ʮͱΓ͋͑ͣ͜Εʹ͓͚ͯ͠͹ϤγʂʯΈ͍ͨͳۜͷ஄ؙ͸ͳ͍ɻ Ϗδωεཁٻ΋͋Ε͹ɺͦͷ૊৫ͷٕज़ྗ΍εΩϧηοτʹ΋ؔΘΔͱ͜Ζ͕ େ͖͍ͷͰɺࣗ਎ͷঢ়گΛؑΈͯద੾ͳҙࢥܾఆ͕Ͱ͖ΔΑ͏ʹ͠·͠ΐ͏

51. ߟ͑Δ͜ͱ1. සൟʹߋ৽͞ΕΔ & ͙͢ʹΠϯσοΫεͯ͠΄͍͔͠Ͳ͏͔ ͜͜ͷ৴པੑΛٻΊΔͳΒ Dynamic Rendering ͢Δ͔͠ͳͦ͞͏ - ݸਓతͳԾઆͱͯ͠͸ɺRender

    Queue ʹೖΕΒΕΔ͔Ͳ͏͔͸ <script> λά ͕͋Δ͔Ͳ͏͔Ͱ൑ఆ͍ͯ͠ΔͷͰ͸ͳ͔Ζ͏͔
 ྲྀੴʹ͜Εͩͱର৅શ෦ʹͳͬͪΌ͏͔ΒϑΝΠϧαΠζͱ͔XHRϦΫΤετൃੜ͍ͯ͠Δ͔ͱ͔ ͔΋ - Ծʹ্ه͕ਅͳ৔߹ɺSSR΍SSGͰ΋ෆ҆͸࢒ΔɻDynamic Renderingͩ ͱ script λάফͤͨΓ͢ΔͷͰ৺഑͸͍Βͳ͍

52. ߟ͑Δ͜ͱ2. SSG or SSR ͢Δ͔ී௨ͷSPAͰߦ͔͘ 44(
    PS
    443 ૉͷ41" ϝϦοτ - ॳظදࣔ଎౓͕଎͘ͳΔ

    - SEOରࡦʹ͜ΕҎ֎ͷઃఆ͠ ͳ͍͍ͯ͘ - ։ൃ͕ൺֱ͢Δͱؾʹ͢Δ͜ ͱݮָͬͯ σϝϦοτ - ։ൃ೉қ౓্͕͕Δ - FMPͷ޲্͕಄ଧͪʹͳΔ - ϏδωεཁٻʹΑͬͯ͸ Dynamic Rendering΍Headͩ ͚SSRͳͲผ్ରԠ͕ඞཁ

53. SSG΍SSRͷ։ൃ೉қ౓ʹؔͯ͠ ΊΜͲ͍͘͞ͱ͜Ζ - ᷖᮣʹϒϥ΢βʹ͔͠ଘࡏ͠ͳ͍ΦϒδΣΫτ(windowͱ͔)࢖͏ͱϏϧυ ͕͚͜Δ(ࣗ෼͕ؾΛ෇͚͍ͯͯ΋࢖͏ϥΠϒϥϦ͕ରԠͯ͠ͳ͚ͯͯ͘͜ Πϥοͱ͖ͨΓ͢Δ) - hydration(αʔόαΠυͰඳըͨ࣌͠ͷঢ়ଶͱΫϥΠΞϯτଆͷঢ়ଶΛಉ ظͤ͞Δ)্͕ख͍͔͘ͳͯ͘༁෼͔ΒΜόάग़ͨΓ͢Δ

54. SSG΍SSRͷ։ൃ೉қ౓ʹؔͯ͠ - ϑϩϯτ։ൃ׳ΕͯΔਓ͕͍ͳ͍ͱ৭ʑΊΜͲ͍ͷͰɺϏδωεཁٻతʹ ڧ͍ඞવੑ͕͋Δ͔ɺཁٻ͕ബ͘ɺ͍Δϝϯόʔ΋ͦͦ͜͜ϑϩϯτ։ൃ ͷܦݧ͋Δ͔ΒʮͱΓ͋͑ͣ଎͘ͳΔ͠SSG or SSRͰ࡞ͬͱ͔͘ʯͱݴ ͏ͷ͕OKͳ৔߹ʹબΜͩΒ͍͍ͷͰ͸

55. ߟ͑Δ͜ͱ3. SSR ʹ͢Δ͔ SSG ʹ͢Δ͔ େମͷΞϓϦέʔγϣϯͰ͸SSGͷํ͕͍͍Μ͡Όͳ͍ʁͱࢥ͍ͬͯΔ - ։ൃ೉қ౓͕SSRͱൺֱ͢Δͱ௿͍͔Β - SSRͷ৔߹ϨϯμϦϯάαʔόʔͷεέʔϥϏϦςΟΛؾʹ͢Δඞཁ͕͋Δ

    ͕ɺSSGͰ͸ඞཁͳ͍ - SEO͍ͨ͠ϖʔδ -> Ϣʔβݸਓͷ৘ใͳͲಈతʹੜ੒͢Δ΋ͷͰ͸ͳ͍ (͜ͱ͕ଟ͍)ͷͰཁٻతʹ΋໰୊ͳ͍͔Β

56. ͨͩɺSSRͷํ͕ϕλʔͳέʔε΋͋ͬͯɺSEO͍ͨ͠ϖʔδ͕ಈతͳ΋ͷɻ ྫ͑͹Ϣʔβ౤ߘܕͷϒϩάαΠτͳͲ - ର৅ͷϖʔδʹมߋೖͬͨΓهࣄ͕૿͑Δ౓ʹશهࣄϏϧυ૸ΒͤΔͷ͸· ͋·͙͍͋͑ - ϦΫΤετʹԠͯ͡SSRͯ͠CDNΩϟογϡͤ͞Δํ͕ΑΓཁٻʹରͯ͠ے ͕ྑͦ͞͏

57. ·ͱΊ - සൟʹߋ৽͞ΕΔ & ͙͢ʹΠϯσοΫεͯ͠΄͍͔͠Ͳ͏͔
 → Dynamic Rendering͢΂͖͔ߟ͑Δ - SSR

    or SSG ͢Δ͔ී௨ͷSPAͰߦ͔͘
 → Ϣʔβମݧ΍νʔϜͷεΩϧɾ΍͍͖ͬͯΛݩʹߟ͑Δ - SSR ʹ͢Δ͔ SSG ʹ͢Δ͔
 → αʔόଆͰඳը͍ͨ͠ϖʔδʹεέʔϥϏϦςΟ͕ٻΊΒΕΔ͔ɺ
 νʔϜͷεΩϧɾ΍͍͖ͬͯͳͲΛݩʹߟ͑Δ

58. CASE STUDY: ͱ͋ΔECαΠτͷྫ Next.jsΛ࢖ͬͨSSG Ͱߦ͘͜ͱʹͨ͠ - Static Rendering͸FMP͕଎͘ͳΓϢʔβମݧʹ΋ϓϥε → কདྷతʹωο

    τϫʔΫ͕஗͍͔΋͠Εͳ͍ւ֎ల։΋͋ΓಘΔͨΊॏཁ - ࣄલʹඳը͓͖͍ͯͨ͠ϖʔδ͕TopɺΧςΰϦৄࡉɺ঎඼ৄࡉͷΈͰɺ ঎඼ϥΠϯφοϓ͕ͦ͜·Ͱ૿͑Δ͜ͱ͸ͳ͍͜ͱ͕໌Β͔ͩͬͨͨΊɺ͜ ͜ʹର͢ΔεέʔϥϏϦςΟ͸͍Βͳ͍ -> SSR Ͱ͋Δඞཁ͸ͳ͍

59. CASE STUDY: ͱ͋ΔECαΠτͷྫ - ΠϯσοΫεͷ଎౓͸ॏཁͰ͸ͳ͍͠ɺDynamic Rendering ͱ͔΋·͋· ͋ΊΜͲ͍ͷͰɺSSGͰ࡞Δํ͕ίετ͕௿͍ͱߟ͑ͨ - ·ͩϦϦʔε͍ͯ͠ͳ͍ஈ֊Ͱײ૝ड़΂ΔͷΞϨ͕ͩɺҰ෦ͷϥΠϒϥ

    ϦͷSSRͷઃఆ͕ΊΜͲ͔͚ͬͨͩ͘͞Ͱී௨ͷSPA։ൃͱൺ΂ͯͦ͜ ·ͰେมͰ͸ͳ͍ - Ή͠Ζ Next.js ͷΤίγεςϜʹ৐͔ͬΕΔͳͲͷར఺΋͋Δ

60. ͓ΘΓʹ
    Ϣʔβʹͱͬͯʮ͍͍΋ͷʯΛ࡞͍ͬͯ͜͏ ʮFirst and foremost, we focus on the user.ʯ IUUQTXXXCMPHHPPHMFQSPEVDUTTFBSDIJNQSPWJOHTFBSDIOFYUZFBST

    ਆ͸Ӡͬͨɻ

61. ͓ΘΓʹ
    Ϣʔβʹͱͬͯʮ͍͍΋ͷʯΛ࡞͍ͬͯ͜͏ ٕज़తͳ੍໿͔ΒࠓճͷΑ͏ͳzରࡦzΛ͋Δఔ౓͠ͳͯ͘͸ͳΒͳ͍ͷ͸͔֬ Ͱ͕͢ɺͦΕҎ֎͸ʮϢʔβʹྑ࣭ͳίϯςϯπΛఏڙ͢Δ͜ͱʯ͕4&0ͷ ίΞͱͳͬͯ͘Δ͜ͱ͸ؒҧ͍ͳ͍Ͱ͠ΐ͏ɻ
    (PPHMFͷʮ%POU
    CF
    FWJMʯΛ৴͡·͠ΐ͏

62. Thank you for listening!!

63. 6TFGVM
    3FTPVSDFT +4
    TJUFͷ4&0৘ใ
    <+BWB4DSJQU
    4JUFT
    JO
    4FBSDI
    8PSLJOH
    (SPVQ> IUUQTHSPVQTHPPHMFDPNGPSVNGPSVNKTTJUFTXH
    <:PV5VCF
    
    (PPHMF8FCNBTUFS> IUUQTXXXZPVUVCFDPNVTFS(PPHMF8FCNBTUFS)FMQ
    <ւ֎4&0৘ใϒϩά
    
    ւ֎ͷ4&0ରࡦͰۃΊΔΞΫηεΞοϓज़> IUUQTXXXTV[VLJLFOJDIJDPNCMPH

    
    
    ͜ͷαΠτ͸ϚδͰ͍͢͝Ͱ͢ɻଚܟͱײँ͔͠ͳ͍Ͱ͢ɻ
    %ZOBNJD
    3FOEFSJOH
    <)FBEMFTT
    $ISPNF
    BO
    BOTXFS
    UP
    TFSWFSTJEF
    SFOEFSJOH
    +4
    TJUFT
    
    c
    
    5PPMT
    GPS
    8FC
    %FWFMPQFST
    
    c
    
    (PPHMF
    %FWFMPQFST> IUUQTEFWFMPQFSTHPPHMFDPNXFCUPPMTQVQQFUFFSBSUJDMFTTTS
    

64. 6TFGVM
    3FTPVSDFT (PPHMFͷϨϯμϦϯάࣄ৘
    <(PPHMF
    ݕࡧͰͷϨϯμϦϯά
    
    c
    
    ݕࡧ
    
    c
    
    (PPHMF
    %FWFMPQFST> IUUQTEFWFMPQFSTHPPHMFDPNTFBSDI EPDTHVJEFTSFOEFSJOH
    <41"
    BOE
    4&0
    (PPHMF
    (PPHMFCPU
    QSPQFSMZ
    SFOEFST
    4JOHMF
    1BHF
    "QQMJDBUJPO
    BOE
    FYFDVUF
    "KBY
    DBMMT> IUUQTNFEJVNDPN!MNVHOBJOJTQBBOETFPJTHPPHMFCPUBCMFUPSFOEFSBTJOHMFQBHF

    BQQMJDBUJPOGFBC
    ϝλ৘ใͷ443
    <("ʹͳͬͨ-BNCEB!&EHFΛ࢖ͬͯ41"Λ443ແ͠Ͱ0(1ͱ͔ʹରԠͤͯ͞ΈΔ> IUUQTRJJUBDPNLJJEB JUFNTFGGEEC
    <-BNCEB!&EHF
    r
    *OUFMMJHFOU
    1SPDFTTJOH
    PG
    )551
    3FRVFTUT
    BU
    UIF
    &EHF
    c
    "84
    /FXT
    #MPH> IUUQT BXTBNB[PODPNKQCMPHTBXTMBNCEBFEHFJOUFMMJHFOUQSPDFTTJOHPGIUUQSFRVFTUTBUUIFFEHF
    

65. 6TFGVM
    3FTPVSDFT 4UBUJD
    4JUF
    (FOFSBUPS
    <αʔόʔαΠυͷਓʹ΋఻͍͑ͨ+".
    4UBDLͱ੩తαΠτͷΠϚ
    
    NPUUPY
    CMPH> IUUQTNPUUPYDPN QPTUT OPDBDIF
    

66. 6TFGVM
    3FTPVSDFT ࣄྫ
    <3BJMT 3FBDUͳ41"αΠτͰ4&0Λ͠Α͏ͱͯ͠Ϳ͔ͭͬͨน
    
    Φ΢νʔϊ։ൃऀϒϩά> IUUQT EFWFMPQFSTPVDDJOPDPNFOUSZ
    <443ແ͠ͷ3FBDUɾ"OHVMBS੡ͷ41"αΠτ͸(PPHMFCPUʹͲΕ͘Β͍ೝࣝ͞ΕΔͷ͔ʁ
    
    จܥϓϩάϥϚʹΑ Δ5*14ϒϩά> IUUQTXXXCVOLFJQSPHSBNNFSOFUFOUSZ

    
    <αʔόϨεΞʔΩςΫνϟ
    
    41"Ͱ
    443ͳ͠ͷ4&0ରࡦͨ͠࿩
    
    4QFBLFS
    %FDL> IUUQT TQFBLFSEFDLDPNNBUTOPXTBCBSFTVBLJUFLVUJZBQMVTTQBEFTTSOBTJGBMTFTFPEVJDFTJUBIVB TMJEF