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

Dc5be06c50fdfe681913540a3effdcc8?s=47 seya
February 01, 2020

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

Dc5be06c50fdfe681913540a3effdcc8?s=128

seya

February 01, 2020
Tweet

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ͷ౔୆ʯͦ΋ͦ΋ͷ࿩ͱͯ͠(PPHMFCPUʹΠϯσοΫε͞ΕΔ͜ͱ ͦͷͨΊʹ͸࣍ͷ̎఺͕ඞཁ  (PPHMFCPUʹΫϩʔϧ͞ΕΔ͜ͱ  )5.-͕ద੾ʹղऍ͞ΕΔ͜ͱ

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

  13. 'BDFCPPL0(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ͷ౔୆ʯΛ࡞ΔͨΊʹ͸࣍ͷ̎఺͕ඞཁ 

    (PPHMFCPUʹΫϩʔϧ͞ΕΔ͜ͱ  )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. Կඵ·ͰͳΒ଴ͬͯ͘ΕΔͷ͔ʁ ݕূͷ֬ೝํ๏ 'FUDIBT(PPHMFͱl/BUVSBMzͳ(PPHMFͷΠϯσοΫεͰ֬ೝ͢Δ

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

  26. Կඵ·ͰͳΒ଴ͬͯ͘ΕΔͷ͔ʁ தͷਓͷ͓ݴ༿ˏ+BWB4DSJQU4JUFTJO4FBSDI8PSLJOH(SPVQ CZ+PIO.VFMMFS

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

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

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

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

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

  32. IUUQTXXXZPVUVCFDPNXBUDI W:1U.#IZ6*

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

  34. ੲͷจݙړͬͯΔͱ(PPHMFCPU͕ѻ͍ͬͯΔϨϯ μϦϯάΤϯδϯ͸$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ͷ౔୆Λ࡞ΔͨΊʹ͸࣍ͷ՝୊Λೝࣝ͢Δ λΠϜΞ΢τʹΑΓ  ͦ΋ͦ΋ΠϯσοΫε͞Εͳ͍  ෆ׬શͳ৘ใ͕ΠϯσοΫε͞Εͯ͠·͏ ϝλ৘ใ͸αʔόଆͰϨϯμϦϯά͢Δඞཁ͕͋Δ 3FOEFS2VFVFʹΑΔΠϯσοΫεͷ஗Ԇ

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

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

  39. %ZOBNJD3FOEFSJOH QSFSFOEFS IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTEZOBNJDSFOEFSJOH QSFSFOEFSJP SFOEFSUSPO

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

    DBDIF͞ΕͯΔ /P JOEFYIUNMͱ+4ฦ͢ DBDIF DBDIF͢Δ
  41. %ZOBNJD3FOEFSJOH QSFSFOEFS IUUQTXXXZPVUVCFDPNXBUDI W1'X6CHWQEB2 (PPHMF*0ʹͯ ଟ෼ ॳΊͯ ʮ%ZOBNJD3FOEFSJOHʯ ͱ͍͏໊લ͕͍ͭͨɻ 

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

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

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

    ˠ+4࣮ߦ͠ͳ͍ͷͰ3FOEFS2VFVFʹೖΒͳ͍
  45. 4UBUJD4JUF(FOFSBUPS ࣄલʹ)5.-Λੜ੒ 3FBDU΍7VFͳͲͷ41"ϥΠϒϥϦͰߏங

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

  47. 443 4FSWFS4JEF3FOEFSJOH ϒϥ΢β αʔόଆͰ+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(PS443 ૉͷ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ͷʮ%POUCFFWJMʯΛ৴͡·͠ΐ͏

  62. Thank you for listening!!

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

     ͜ͷαΠτ͸ϚδͰ͍͢͝Ͱ͢ɻଚܟͱײँ͔͠ͳ͍Ͱ͢ɻ %ZOBNJD3FOEFSJOH <)FBEMFTT$ISPNFBOBOTXFSUPTFSWFSTJEFSFOEFSJOH+4TJUFTc5PPMTGPS8FC%FWFMPQFSTc (PPHMF%FWFMPQFST> IUUQTEFWFMPQFSTHPPHMFDPNXFCUPPMTQVQQFUFFSBSUJDMFTTTS 
  64. 6TFGVM3FTPVSDFT (PPHMFͷϨϯμϦϯάࣄ৘ <(PPHMFݕࡧͰͷϨϯμϦϯάcݕࡧc(PPHMF%FWFMPQFST> IUUQTEFWFMPQFSTHPPHMFDPNTFBSDI EPDTHVJEFTSFOEFSJOH  <41"BOE4&0(PPHMF (PPHMFCPU QSPQFSMZSFOEFST4JOHMF1BHF"QQMJDBUJPOBOEFYFDVUF"KBYDBMMT> IUUQTNFEJVNDPN!MNVHOBJOJTQBBOETFPJTHPPHMFCPUBCMFUPSFOEFSBTJOHMFQBHF

    BQQMJDBUJPOGFBC  ϝλ৘ใͷ443 <("ʹͳͬͨ-BNCEB!&EHFΛ࢖ͬͯ41"Λ443ແ͠Ͱ0(1ͱ͔ʹରԠͤͯ͞ΈΔ> IUUQTRJJUBDPNLJJEB JUFNTFGGEEC  <-BNCEB!&EHFr*OUFMMJHFOU1SPDFTTJOHPG)5513FRVFTUTBUUIF&EHFc"84/FXT#MPH> IUUQT BXTBNB[PODPNKQCMPHTBXTMBNCEBFEHFJOUFMMJHFOUQSPDFTTJOHPGIUUQSFRVFTUTBUUIFFEHF 
  65. 6TFGVM3FTPVSDFT 4UBUJD4JUF(FOFSBUPS <αʔόʔαΠυͷਓʹ΋఻͍͑ͨ+".4UBDLͱ੩తαΠτͷΠϚNPUUPYCMPH> IUUQTNPUUPYDPN QPTUT OPDBDIF 

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

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