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

    Queue ʹೖΕΒΕΔ͔Ͳ͏͔͸ <script> λά ͕͋Δ͔Ͳ͏͔Ͱ൑ఆ͍ͯ͠ΔͷͰ͸ͳ͔Ζ͏͔
 ྲྀੴʹ͜Εͩͱର৅શ෦ʹͳͬͪΌ͏͔ΒϑΝΠϧαΠζͱ͔XHRϦΫΤετൃੜ͍ͯ͠Δ͔ͱ͔ ͔΋ - Ծʹ্ه͕ਅͳ৔߹ɺSSR΍SSGͰ΋ෆ҆͸࢒ΔɻDynamic Renderingͩ ͱ script λάফͤͨΓ͢ΔͷͰ৺഑͸͍Βͳ͍
  2. ߟ͑Δ͜ͱ2. SSG or SSR ͢Δ͔ී௨ͷSPAͰߦ͔͘ 44(PS443 ૉͷ41" ϝϦοτ - ॳظදࣔ଎౓͕଎͘ͳΔ

    - SEOରࡦʹ͜ΕҎ֎ͷઃఆ͠ ͳ͍͍ͯ͘ - ։ൃ͕ൺֱ͢Δͱؾʹ͢Δ͜ ͱݮָͬͯ σϝϦοτ - ։ൃ೉қ౓্͕͕Δ - FMPͷ޲্͕಄ଧͪʹͳΔ - ϏδωεཁٻʹΑͬͯ͸ Dynamic Rendering΍Headͩ ͚SSRͳͲผ్ରԠ͕ඞཁ
  3. ·ͱΊ - සൟʹߋ৽͞ΕΔ & ͙͢ʹΠϯσοΫεͯ͠΄͍͔͠Ͳ͏͔
 → Dynamic Rendering͢΂͖͔ߟ͑Δ - SSR

    or SSG ͢Δ͔ී௨ͷSPAͰߦ͔͘
 → Ϣʔβମݧ΍νʔϜͷεΩϧɾ΍͍͖ͬͯΛݩʹߟ͑Δ - SSR ʹ͢Δ͔ SSG ʹ͢Δ͔
 → αʔόଆͰඳը͍ͨ͠ϖʔδʹεέʔϥϏϦςΟ͕ٻΊΒΕΔ͔ɺ
 νʔϜͷεΩϧɾ΍͍͖ͬͯͳͲΛݩʹߟ͑Δ
  4. CASE STUDY: ͱ͋ΔECαΠτͷྫ Next.jsΛ࢖ͬͨSSG Ͱߦ͘͜ͱʹͨ͠ - Static Rendering͸FMP͕଎͘ͳΓϢʔβମݧʹ΋ϓϥε → কདྷతʹωο

    τϫʔΫ͕஗͍͔΋͠Εͳ͍ւ֎ల։΋͋ΓಘΔͨΊॏཁ - ࣄલʹඳը͓͖͍ͯͨ͠ϖʔδ͕TopɺΧςΰϦৄࡉɺ঎඼ৄࡉͷΈͰɺ ঎඼ϥΠϯφοϓ͕ͦ͜·Ͱ૿͑Δ͜ͱ͸ͳ͍͜ͱ͕໌Β͔ͩͬͨͨΊɺ͜ ͜ʹର͢ΔεέʔϥϏϦςΟ͸͍Βͳ͍ -> SSR Ͱ͋Δඞཁ͸ͳ͍
  5. CASE STUDY: ͱ͋ΔECαΠτͷྫ - ΠϯσοΫεͷ଎౓͸ॏཁͰ͸ͳ͍͠ɺDynamic Rendering ͱ͔΋·͋· ͋ΊΜͲ͍ͷͰɺSSGͰ࡞Δํ͕ίετ͕௿͍ͱߟ͑ͨ - ·ͩϦϦʔε͍ͯ͠ͳ͍ஈ֊Ͱײ૝ड़΂ΔͷΞϨ͕ͩɺҰ෦ͷϥΠϒϥ

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