Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

seya
February 01, 2020

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

seya

February 01, 2020
Tweet

More Decks by seya

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. SEO = Search Engine Optimization

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ʮ4&0ͷ౔୆ʯΛ࡞ΔͨΊʹ͸࣍ͷ̎఺͕ඞཁ
    (PPHMFCPUʹΫϩʔϧ͞ΕΔ͜ͱ
    )5.-͕ద੾ʹղऍ͞ΕΔ͜ͱ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Կඵ·ͰͳΒ଴ͬͯ͘ΕΔͷ͔ʁ
    IUUQTNFEJVNDPN!MNVHOBJOJTQBBOETFPJTHPPHMFCPUBCMFUP
    SFOEFSBTJOHMFQBHFBQQMJDBUJPOGFBC
    ৄࡉʹݕূͯ͘͠Εͨํ͕͍ͨͷͰύΫΓ݁ՌΛ͓आΓ͠·͢
    લఏ

    &MNͰͰ͖ͨ41"αΠτ
    QVTI4UBUFͰϖʔδΛมߋ͍ͯ͠Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. IUUQTXXXZPVUVCFDPNXBUDI W:1U.#IZ6*

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. %ZOBNJD3FOEFSJOH QSFSFOEFS

    IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTEZOBNJDSFOEFSJOH
    QSFSFOEFSJP SFOEFSUSPO

    View full-size slide

  38. QSFSFOEFSJPͷྫ
    Prerender
    Service
    Google bot ?
    (UserAgentͰ൑ఆ)
    :FT
    DBDIF͞Εͯͳ͍
    )FBEMFTT$ISPNF
    DBDIF͞ΕͯΔ
    /P
    JOEFYIUNMͱ+4ฦ͢
    DBDIF
    DBDIF͢Δ

    View full-size slide

  39. %ZOBNJD3FOEFSJOH QSFSFOEFS

    IUUQTXXXZPVUVCFDPNXBUDI W1'X6CHWQEB2
    (PPHMF*0ʹͯ ଟ෼
    ॳΊͯ
    ʮ%ZOBNJD3FOEFSJOHʯ
    ͱ͍͏໊લ͕͍ͭͨɻ

    (PPHMF͓๽෇͖ͷख๏ɻ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. 443 4FSWFS4JEF3FOEFSJOH

    ϒϥ΢β
    αʔόଆͰ+4Λ࣮ߦͯ͠
    )5.-Λੜ੒

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. ߟ͑Δ͜ͱ1.
    සൟʹߋ৽͞ΕΔ & ͙͢ʹΠϯσοΫεͯ͠΄͍͔͠Ͳ͏͔
    ͜͜ͷ৴པੑΛٻΊΔͳΒ Dynamic Rendering ͢Δ͔͠ͳͦ͞͏
    - ݸਓతͳԾઆͱͯ͠͸ɺRender Queue ʹೖΕΒΕΔ͔Ͳ͏͔͸ λά<br/>͕͋Δ͔Ͳ͏͔Ͱ൑ఆ͍ͯ͠ΔͷͰ͸ͳ͔Ζ͏͔
<br/>ྲྀੴʹ͜Εͩͱର৅શ෦ʹͳͬͪΌ͏͔ΒϑΝΠϧαΠζͱ͔XHRϦΫΤετൃੜ͍ͯ͠Δ͔ͱ͔<br/>͔΋<br/>- Ծʹ্ه͕ਅͳ৔߹ɺSSR΍SSGͰ΋ෆ҆͸࢒ΔɻDynamic Renderingͩ<br/>ͱ script λάফͤͨΓ͢ΔͷͰ৺഑͸͍Βͳ͍<br/>

    View full-size slide

  50. ߟ͑Δ͜ͱ2.
    SSG or SSR ͢Δ͔ී௨ͷSPAͰߦ͔͘
    44(PS443 ૉͷ41"
    ϝϦοτ
    - ॳظදࣔ଎౓͕଎͘ͳΔ
    - SEOରࡦʹ͜ΕҎ֎ͷઃఆ͠
    ͳ͍͍ͯ͘
    - ։ൃ͕ൺֱ͢Δͱؾʹ͢Δ͜
    ͱݮָͬͯ
    σϝϦοτ - ։ൃ೉қ౓্͕͕Δ
    - FMPͷ޲্͕಄ଧͪʹͳΔ
    - ϏδωεཁٻʹΑͬͯ͸
    Dynamic Rendering΍Headͩ
    ͚SSRͳͲผ్ରԠ͕ඞཁ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. ߟ͑Δ͜ͱ3.
    SSR ʹ͢Δ͔ SSG ʹ͢Δ͔
    େମͷΞϓϦέʔγϣϯͰ͸SSGͷํ͕͍͍Μ͡Όͳ͍ʁͱࢥ͍ͬͯΔ
    - ։ൃ೉қ౓͕SSRͱൺֱ͢Δͱ௿͍͔Β
    - SSRͷ৔߹ϨϯμϦϯάαʔόʔͷεέʔϥϏϦςΟΛؾʹ͢Δඞཁ͕͋Δ
    ͕ɺSSGͰ͸ඞཁͳ͍
    - SEO͍ͨ͠ϖʔδ -> Ϣʔβݸਓͷ৘ใͳͲಈతʹੜ੒͢Δ΋ͷͰ͸ͳ͍
    (͜ͱ͕ଟ͍)ͷͰཁٻతʹ΋໰୊ͳ͍͔Β

    View full-size slide

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

    View full-size slide

  55. ·ͱΊ
    - සൟʹߋ৽͞ΕΔ & ͙͢ʹΠϯσοΫεͯ͠΄͍͔͠Ͳ͏͔

    → Dynamic Rendering͢΂͖͔ߟ͑Δ
    - SSR or SSG ͢Δ͔ී௨ͷSPAͰߦ͔͘

    → Ϣʔβମݧ΍νʔϜͷεΩϧɾ΍͍͖ͬͯΛݩʹߟ͑Δ
    - SSR ʹ͢Δ͔ SSG ʹ͢Δ͔

    → αʔόଆͰඳը͍ͨ͠ϖʔδʹεέʔϥϏϦςΟ͕ٻΊΒΕΔ͔ɺ

    νʔϜͷεΩϧɾ΍͍͖ͬͯͳͲΛݩʹߟ͑Δ

    View full-size slide

  56. CASE STUDY: ͱ͋ΔECαΠτͷྫ
    Next.jsΛ࢖ͬͨSSG Ͱߦ͘͜ͱʹͨ͠
    - Static Rendering͸FMP͕଎͘ͳΓϢʔβମݧʹ΋ϓϥε → কདྷతʹωο
    τϫʔΫ͕஗͍͔΋͠Εͳ͍ւ֎ల։΋͋ΓಘΔͨΊॏཁ
    - ࣄલʹඳը͓͖͍ͯͨ͠ϖʔδ͕TopɺΧςΰϦৄࡉɺ঎඼ৄࡉͷΈͰɺ
    ঎඼ϥΠϯφοϓ͕ͦ͜·Ͱ૿͑Δ͜ͱ͸ͳ͍͜ͱ͕໌Β͔ͩͬͨͨΊɺ͜
    ͜ʹର͢ΔεέʔϥϏϦςΟ͸͍Βͳ͍ -> SSR Ͱ͋Δඞཁ͸ͳ͍

    View full-size slide

  57. CASE STUDY: ͱ͋ΔECαΠτͷྫ
    - ΠϯσοΫεͷ଎౓͸ॏཁͰ͸ͳ͍͠ɺDynamic Rendering ͱ͔΋·͋·
    ͋ΊΜͲ͍ͷͰɺSSGͰ࡞Δํ͕ίετ͕௿͍ͱߟ͑ͨ
    - ·ͩϦϦʔε͍ͯ͠ͳ͍ஈ֊Ͱײ૝ड़΂ΔͷΞϨ͕ͩɺҰ෦ͷϥΠϒϥ
    ϦͷSSRͷઃఆ͕ΊΜͲ͔͚ͬͨͩ͘͞Ͱී௨ͷSPA։ൃͱൺ΂ͯͦ͜
    ·ͰେมͰ͸ͳ͍
    - Ή͠Ζ Next.js ͷΤίγεςϜʹ৐͔ͬΕΔͳͲͷར఺΋͋Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  60. Thank you for listening!!

    View full-size slide

  61. 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

    View full-size slide

  62. 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

    View full-size slide

  63. 6TFGVM3FTPVSDFT
    4UBUJD4JUF(FOFSBUPS
    <αʔόʔαΠυͷਓʹ΋఻͍͑ͨ+".4UBDLͱ੩తαΠτͷΠϚNPUUPYCMPH> IUUQTNPUUPYDPN
    QPTUT OPDBDIF

    View full-size slide

  64. 6TFGVM3FTPVSDFT
    ࣄྫ
    <3BJMT3FBDUͳ41"αΠτͰ4&0Λ͠Α͏ͱͯ͠Ϳ͔ͭͬͨนΦ΢νʔϊ։ൃऀϒϩά> IUUQT
    EFWFMPQFSTPVDDJOPDPNFOUSZ

    <443ແ͠ͷ3FBDUɾ"OHVMBS੡ͷ41"αΠτ͸(PPHMFCPUʹͲΕ͘Β͍ೝࣝ͞ΕΔͷ͔ʁจܥϓϩάϥϚʹΑ
    Δ5*14ϒϩά> IUUQTXXXCVOLFJQSPHSBNNFSOFUFOUSZ

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

    View full-size slide