Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PWAに取り組む前に知っておきたい SPAとSEO
Search
seya
February 01, 2020
Technology
10
3.8k
PWAに取り組む前に知っておきたい SPAとSEO
seya
February 01, 2020
Tweet
Share
More Decks by seya
See All by seya
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
240
エンジニアにオススメの Figma 活用
kazuyaseki
15
12k
なぜ私はコードをデザインに使いたいのか
kazuyaseki
9
3.3k
フロントエンド開発のための Figma
kazuyaseki
19
24k
State of SEO for SPA 2018
kazuyaseki
8
4.6k
Selenium あるある
kazuyaseki
0
1.6k
Vue コンポーネント実装パターン
kazuyaseki
16
3.6k
Other Decks in Technology
See All in Technology
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
140
なんで私に登壇依頼が?! ~頼られるエンジニアになるためには~ /
mixi_engineers
PRO
2
200
Getting started with controlling LEGO using Swift
hcrane
0
130
KTC_DBRE.pdf
_awache
0
290
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.7k
CI/CDがあたりまえの今の時代にAPIテスティングツールに求められていること / CI/CD Test Night #7
k1low
12
2.9k
エバンジェリスト活動を7年やってきて見えてきた、コミュニティとエバンジェリストの関係
soracom
PRO
1
200
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
実務への応用例から考える 変更に強いオブジェクト指向設計 / 20240324-ooc2024
bengo4com
7
5.3k
沒想過的前端錯誤處理可能比你有做的還多
line_developers_tw
PRO
0
2k
Azureコストは水道代/The_47th_Tokyo_Jazug
aeonpeople
3
360
Autopsy of a Cascading Outage from a MySQL Crashing Bug
jfg956
0
200
Featured
See All Featured
Statistics for Hackers
jakevdp
789
220k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
The Invisible Side of Design
smashingmag
293
49k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
The Brand Is Dead. Long Live the Brand.
mthomps
48
21k
Designing with Data
zakiwarfel
94
4.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Transcript
PWAʹऔΓΉલʹ͓͖͍ͬͯͨ SPAͱSEO @PWA Conference 2020/02/01
ؔ ݑ @sekikazu01 גࣜձࣾLinc’well ΤϯδχΞ
PWA SEO ✖
PWA ֓೦తʹͦΜͳʹؔͳ͍ SEO ✖
18"ͰΞϓϦϥΠΫͳମݧΛఏڙ͢ΔͨΊʹ ಈతʹίϯςϯπΛඳը͢Δ͜ͱ͕͠͠
18"ʹऔΓΉલʹ 4&0ͷϦεΫΛֶͼ ϏδωεΛᆝଛ͠ͳ͍ Α͏ʹ͠·͠ΐ͏ʂ
ຊͷ͓ ͢͜ͱ • SPAͷߏஙΛݕ౼͍ͯ͠Δ͜ͱΛલఏͱ͠ʮSEOͷͮ͘Γʯͷํ๏ʹ͍͓ͭͯ ͠͠·͢ɻ • ͍ΘΏΔςΫχΧϧSEOͱݺΕΔͷͷҰ෦Ͱ͢ɻ ͞ͳ͍͜ͱ • ϥϯΩϯάΛͲ͏্͍͔͛ͯ͘ͳͲ۩ମతͳSEOςΫχοΫʹ͍ͭͯ͠·ͤΜ
·ͨɺલఏͱͯ͠ݕࡧΤϯδϯͷΈΛߟྀ͍ͯ͠·͢
Agenda l4&0zͱͳʹ͔ 1 41"ʹ͓͚Δ4&0ͷ՝ ͲΜͳղܾࡦ͕͋Δͷ͔ ཁٻύλʔϯ͝ͱͷղܾࡦͷબͼํ 2 3 4
“SEO”ͱͳʹ͔ 01.
SEO = Search Engine Optimization
ʮ4&0ͷʯͦͦͷͱͯ͠(PPHMFCPUʹΠϯσοΫε͞ΕΔ͜ͱ ͦͷͨΊʹ࣍ͷ͕̎ඞཁ (PPHMFCPUʹΫϩʔϧ͞ΕΔ͜ͱ )5.-͕దʹղऍ͞ΕΔ͜ͱ
ʮ4&0ͷʯͦͦͷͱͯ͠(PPHMFCPUʹΠϯσοΫε͞ΕΔ͜ͱ ͦͷͨΊʹ࣍ͷ͕̎ඞཁ (PPHMFCPUʹΫϩʔϧ͞ΕΔ͜ͱ )5.-͕దʹղऍ͞ΕΔ͜ͱ ˞͜Εʹ͍ͭͯTJUFNBQͱ͔ؤுͬͯ ͘ΕͬͯͳͷͰࠓ৮Ε·ͤΜ
'BDFCPPL0(1 5XJUUFS$BSE 'BDFCPPLͷ0(15XJUUFS$BSEͳͲz4&0zͷจ຺ͰޠΒΕΔ͜ͱ͕͋Δ ࣮ࡍશͬͯ͘4&0Ͱͳ͍ͷ͕ͩɺҰॹʹޠΒΕΔͷ͕ͨΓલͷੈͷதʹͳͬ ͯ͠·ͬͨͷͰຊτʔΫͰ߹Θͤͯड़Δɻ
ߏԽσʔλ ݕࡧ݁ՌͰͷදࣔΛϦονʹͯ͘͠ΕΔͷ IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTTFBSDIHBMMFSZ
ߏԽσʔλͷྫ ".1 “ಡΈࠐΈ͕΄΅ҰॠͰྃ͠εϜʔζʹදࣔ͞Ε ΔັྗతͳΣϒϖʔδΛ؆୯ʹ࡞Ͱ͖ΔΦʔ ϓϯιʔε ϥΠϒϥϦ” - ߴԽʹͱ͜ͱΜͩ͜Θ༷ͬͨ - ಠࣗͷJSΛ࣮ߦͰ͖ͳ͍ͳͲͷ੍͕͋Δ
ࢀߟIUUQTXXXBNQQSPKFDUPSHKBEPDT
ߏԽσʔλͷྫಈը IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTEBUBUZQFTWJEFP IMKB
·ͱΊ ʮ4&0ʯͱ͍͏ݴ༿͕ΘΕΔ࣌ʹ࣍ͷೋͭͷจ຺͕͋Δ (PPHMFͷݕࡧ݁ՌͰΑΓ্Ґʹදࣔ͞ΕΔͨΊͷࢪࡦ 0(15XJUUFS$BSEɺ".1ͳͲͷߏԽσʔλͷදࣔ ˞ຊτʔΫͰ͜ΕҎ߱શ෦ͻͬ͘ΔΊͯʮϝλใʯͱݺͼ·͢ ҰൠతͳݺͼํͰͳ͍Ͱ͢ ʮ4&0ͷʯΛ࡞ΔͨΊʹ࣍ͷ͕̎ඞཁ
(PPHMFCPUʹΫϩʔϧ͞ΕΔ͜ͱ )5.-͕దʹղऍ͞ΕΔ͜ͱ
SPAʹ͓͚Δ SEOͷ՝ 02.
None
ͳʹରࡦ͍ͯ͠ͳ͍41"ͷૉͷ)5.-͜Μͳײ͡
՝λΠϜΞτ ͨΓલ͚ͩͲͣͬͱͬͯ͘ΕΔΘ͚Ͱͳ͍ ϦΫΤετʹ͕͔͔࣌ؒΓ͗͢ΔͱͦͦΠϯσοΫεͯ͘͠Εͳ͔ͬͨΓ த్ͳͱ͜ΖͰϨϯμϦϯά͕ଧͪΒΕͯ͠·ͬͨΓ͢Δ
Կඵ·ͰͳΒͬͯ͘ΕΔͷ͔ʁ IUUQTNFEJVNDPN!MNVHOBJOJTQBBOETFPJTHPPHMFCPUBCMFUP SFOEFSBTJOHMFQBHFBQQMJDBUJPOGFBC ৄࡉʹݕূͯ͘͠Εͨํ͕͍ͨͷͰύΫΓ݁ՌΛ͓आΓ͠·͢ લఏ &MNͰͰ͖ͨ41"αΠτ QVTI4UBUFͰϖʔδΛมߋ͍ͯ͠Δ
Կඵ·ͰͳΒͬͯ͘ΕΔͷ͔ʁ ݕূ༰ ҎԼͷ̏ύλʔϯΛΞοϓσʔτ͢Δ͜ͱʹΑͬͯλΠϜΞτʹ͔͔Δ࣌ؒͷݕূ ࣌ؒͷදه UJUMF EFTDSJQUJPO ϖʔδͷςΩετ ຖඵมԽ
5ZQF" ඵͷEFMBZΛ࣋ͬͨϦΫΤετ 5ZQF# ඵͷEFMBZޙʹϦΫΤετ
Կඵ·ͰͳΒͬͯ͘ΕΔͷ͔ʁ ݕূͷ֬ೝํ๏ 'FUDIBT(PPHMFͱl/BUVSBMzͳ(PPHMFͷΠϯσοΫεͰ֬ೝ͢Δ
Կඵ·ͰͳΒͬͯ͘ΕΔͷ͔ʁ ݁Ռ 'FUDIBT(PPHMFͰඵͬͯ͘ΕΔ l/BUVSBMzͳ(PPHMFCPUͰඵͬͯ͘ΕΔ ˞ͪͳΈʹવͷ͜ͱͳ͕Β(PPHMF͕ͲΜͳڥ ճઢϚγϯύϫʔ ͰϨϯμ Ϧϯά͍ͯ͠Δͷ͔ෆ໌Ͱ͢ɻ
Կඵ·ͰͳΒͬͯ͘ΕΔͷ͔ʁ தͷਓͷ͓ݴ༿ˏ+BWB4DSJQU4JUFTJO4FBSDI8PSLJOH(SPVQ CZ+PIO.VFMMFS
ٙλΠϜΞτͨ͠ΒΠϯσοΫεͯ͘͠Εͳ͍ͷ͔ʁ ઌ΄Ͳͷݕূ͕͍ࣔͯ͠Δ௨ΓλΠϜΞτͯ͠ɺͦΕ·ͰʹϨϯμϦϯάͨ͠ ͷʹؔͯ͠ΠϯσοΫε͞Ε͍ͯΔɻ ͓ͦΒ͘Ұ1BJOUʹࢸΔ·ͰʹλΠϜΞτΤϥʔ͕ى͖Δͷ͕ذͳͷͰɻ ˞ະݕূͷԾઆͰ͢ɻࢀߟఔʹཹΊ͍ͯͩ͘͞ɻ GSBNF
՝ϝλใαʔό͔Βฦ࣌͢Ͱ)5.- ʹؚ·Ε͍ͯΔඞཁ͕͋Δ ͦͦ+4Λ࣮ߦͯ͘͠Εͳ͍ͷͰɺ αʔό͔Βฦͬͯ͘Δ࣌Ͱ)5.-ʹؚ·Ε͍ͯͳ͍ͱղऍͯ͘͠Εͳ͍ ͪͳΈʹ".1ͩͱϝλใʹݶΒͣશͯαʔόଆͰඳը͢Δඞཁ͕͋Δ ❌
՝3FOEFS2VFVFʹΑΔΠϯσοΫεͷԆ +4Λ࣮ߦ͢ΔαΠτ)5.-͚ͩͷ੩తͳαΠτͱҟͳΓɺ͙͢ʹΠϯσοΫε͞ΕΔ༁Ͱͳ͘ɺ Ұ3FOEFS2VFVFͱ͍͏ͷʹॲཧ͕Ҡৡ͞ΕΔ
IUUQTXXXZPVUVCFDPNXBUDI W:1U.#IZ6* ि͔͔ؒΔ͜ͱʂ ͳͷͰίϯςϯπͷߋ৽͕සൟͳαΠτͰʹͳΔ
ͪͳΈʹʜ͜ΕΒͷ՝ʹ Ͳ͏ߟ͍͑ͯΔͷͰ͠ΐ͏͔ʁ
IUUQTXXXZPVUVCFDPNXBUDI W:1U.#IZ6*
ʮ3FOEFS2VFVFʹΑΔΠϯσοΫεͷԆʯ ʹؔͯ͠কདྷతʹղܾ͞Εͦ͏
ੲͷจݙړͬͯΔͱ(PPHMFCPU͕ѻ͍ͬͯΔϨϯ μϦϯάΤϯδϯ$ISPNF૬Έ͍ͨͳ ใग़ͯ͘Δͱࢥ͍·͕͢ IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTSFOEFSJOH ˞$ISPNF݄ࠒʹग़ͨϒϥβ
˞$ISPNF݄ࠒʹग़ͨϒϥβ ͱݴ͏Α͏ͳ͜ͱ͕ 20195݄Ҏདྷ࠷৽ͷChromeͱಉ͡όʔδϣϯ ͷػೳͰϨϯμϦϯά͢ΔΑ͏ʹͳΓ·ͨ͠ɻ https://webmasters.googleblog.com/2019/05/ the-new-evergreen-googlebot.html ͱ͍͑ Fetch as Google
Ͱͷ දࣔ֬ೝ͘Β͍͠ͱ͍ͨํ͕҆৺͔ͳ…
·ͱΊ 41"Ͱ4&0ͷΛ࡞ΔͨΊʹ࣍ͷ՝Λೝࣝ͢Δ λΠϜΞτʹΑΓ ͦͦΠϯσοΫε͞Εͳ͍ ෆશͳใ͕ΠϯσοΫε͞Εͯ͠·͏ ϝλใαʔόଆͰϨϯμϦϯά͢Δඞཁ͕͋Δ 3FOEFS2VFVFʹΑΔΠϯσοΫεͷԆ
ͲΜͳղܾࡦ ͕͋Δͷ͔ 03.
ϝλใ͚ͩ443 *OEFYIUNM ϒϥβ ϝλใͷ෦͚ͩ 63-ʹԠͯ͡ॻ͖͑ ϝλใ͑͞ө͞ΕΕʜͦΜͳϛχϚϜͳରԠΛ͍ͨ͋͠ͳͨʹɻ
%ZOBNJD3FOEFSJOH QSFSFOEFS IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTEZOBNJDSFOEFSJOH QSFSFOEFSJP SFOEFSUSPO
QSFSFOEFSJPͷྫ Prerender Service Google bot ? (UserAgentͰఆ) :FT DBDIF͞Εͯͳ͍ )FBEMFTT$ISPNF
DBDIF͞ΕͯΔ /P JOEFYIUNMͱ+4ฦ͢ DBDIF DBDIF͢Δ
%ZOBNJD3FOEFSJOH QSFSFOEFS IUUQTXXXZPVUVCFDPNXBUDI W1'X6CHWQEB2 (PPHMF*0ʹͯ ଟ ॳΊͯ ʮ%ZOBNJD3FOEFSJOHʯ ͱ͍͏໊લ͕͍ͭͨɻ
(PPHMF͓͖ͷख๏ɻ
ΫϩʔΩϯάʹ͍ͭͯ ϒϥοΫϋοτ4&0ͷҰͭɻCPUͱϢʔβʹҧ͏ίϯςϯπΛฦ͢͜ͱΛࢦ͢ όϨΔͱϖφϧςΟ͕ՊͤΒΕΔ Σϒ αΠτ Google bot Ϣʔβ
ΫϩʔΩϯάʹ͍ͭͯ 'FUDIBT(PPHMFͰݟΕΔ௨Γ(PPHMFͳΜΒ͔ͷํ๏ͰϢʔβ͕࣮ࡍʹݟΔ ը໘Λ࠶ݱ͍ͯ͠ΔɻΘ͟Θ͟(PPHMF͕ࣗ%ZOBNJD3FOEFSJOHΛਪ͍ͯ͠ Δ͜ͱ͔Βɺ6"Ͱग़͚͍ͯͯ͋͠ΔఔಉҰͳΒେৎͳͣ ଟ ɻ
·ͩհ͍ͯ͠ͳ͍ख๏͋Γ·͕͢ɺ ର4&0ʹؔͯ͜͠ͷ%ZOBNJD3FOEFSJOH͕ສೳͷιϦϡʔγϣϯͰ͢ɻ λΠϜΞτ ϝλใ 3FOEFS2VFVF ˠΩϟογϡ͔Βฦ͢ͷͰແ ˠαʔόଆͰඳը͢ΔͷͰ0,
ˠ+4࣮ߦ͠ͳ͍ͷͰ3FOEFS2VFVFʹೖΒͳ͍
4UBUJD4JUF(FOFSBUPS ࣄલʹ)5.-Λੜ 3FBDU7VFͳͲͷ41"ϥΠϒϥϦͰߏங
࣍ͷΑ͏ͳͷ͚ͩΫϥΠΞϯταΠυʹͤΔͱ͔Ͱ͖ΔͷͰΣϒΞϓϦʹҰ෦͏ ͱ͔Ͱ͖Δɻ ɾϩάΠϯͨ͠ϢʔβͷΈݟΒΕΔ ɾϢʔβΧελϚΠζ͞ΕͨϨίϝϯυΛग़͢ ͋ͱͰৄࡉʹ৮ΕΔ͕ɺϢʔβମݧ্͛ͭͭ(FMPͷ্) ͦ͜·Ͱ։ൃΛେมʹͤ͞ͳ͍ͰSEOͷ৺ݮΒͤΔख๏ͱͯ͠ ͳ͔ͳ͔ے͕͍͍ͱࢥ͍ͬͯΔ
443 4FSWFS4JEF3FOEFSJOH ϒϥβ αʔόଆͰ+4Λ࣮ߦͯ͠ )5.-Λੜ
ҙ44(443ͰλΠϜΞτ͋ΓಘΔ Φνʔϊ༷ͷࣄྫ IUUQTEFWFMPQFSTPVDDJOPDPNFOUSZ Rails+ReactͳSPAαΠτͰSEOΛ͠Α͏ͱͯ͠Ϳ͔ͭͬͨน
ཁٻύλʔϯ͝ͱͷ ղܾࡦͷબͼํ 04.
ٕज़બఆʹؔΘΔཁૉ ʮͱΓ͋͑ͣ͜Εʹ͓͚ͯ͠ϤγʂʯΈ͍ͨͳۜͷؙͳ͍ɻ Ϗδωεཁٻ͋Εɺͦͷ৫ͷٕज़ྗεΩϧηοτʹؔΘΔͱ͜Ζ͕ େ͖͍ͷͰɺࣗͷঢ়گΛؑΈͯదͳҙࢥܾఆ͕Ͱ͖ΔΑ͏ʹ͠·͠ΐ͏
ߟ͑Δ͜ͱ1. සൟʹߋ৽͞ΕΔ & ͙͢ʹΠϯσοΫεͯ͠΄͍͔͠Ͳ͏͔ ͜͜ͷ৴པੑΛٻΊΔͳΒ Dynamic Rendering ͢Δ͔͠ͳͦ͞͏ - ݸਓతͳԾઆͱͯ͠ɺRender
Queue ʹೖΕΒΕΔ͔Ͳ͏͔ <script> λά ͕͋Δ͔Ͳ͏͔Ͱఆ͍ͯ͠ΔͷͰͳ͔Ζ͏͔ ྲྀੴʹ͜Εͩͱରશ෦ʹͳͬͪΌ͏͔ΒϑΝΠϧαΠζͱ͔XHRϦΫΤετൃੜ͍ͯ͠Δ͔ͱ͔ ͔ - Ծʹ্ه͕ਅͳ߹ɺSSRSSGͰෆ҆ΔɻDynamic Renderingͩ ͱ script λάফͤͨΓ͢ΔͷͰ৺͍Βͳ͍
ߟ͑Δ͜ͱ2. SSG or SSR ͢Δ͔ී௨ͷSPAͰߦ͔͘ 44(PS443 ૉͷ41" ϝϦοτ - ॳظද͕ࣔ͘ͳΔ
- SEOରࡦʹ͜ΕҎ֎ͷઃఆ͠ ͳ͍͍ͯ͘ - ։ൃ͕ൺֱ͢Δͱؾʹ͢Δ͜ ͱݮָͬͯ σϝϦοτ - ։ൃқ্͕͕Δ - FMPͷ্͕಄ଧͪʹͳΔ - ϏδωεཁٻʹΑͬͯ Dynamic RenderingHeadͩ ͚SSRͳͲผ్ରԠ͕ඞཁ
SSGSSRͷ։ൃқʹؔͯ͠ ΊΜͲ͍͘͞ͱ͜Ζ - ᷖᮣʹϒϥβʹ͔͠ଘࡏ͠ͳ͍ΦϒδΣΫτ(windowͱ͔)͏ͱϏϧυ ͕͚͜Δ(͕ࣗؾΛ͚͍ͯͯ͏ϥΠϒϥϦ͕ରԠͯ͠ͳ͚ͯͯ͘͜ Πϥοͱ͖ͨΓ͢Δ) - hydration(αʔόαΠυͰඳըͨ࣌͠ͷঢ়ଶͱΫϥΠΞϯτଆͷঢ়ଶΛಉ ظͤ͞Δ)্͕ख͍͔͘ͳͯ͘༁͔ΒΜόάग़ͨΓ͢Δ
SSGSSRͷ։ൃқʹؔͯ͠ - ϑϩϯτ։ൃ׳ΕͯΔਓ͕͍ͳ͍ͱ৭ʑΊΜͲ͍ͷͰɺϏδωεཁٻతʹ ڧ͍ඞવੑ͕͋Δ͔ɺཁٻ͕ബ͘ɺ͍Δϝϯόʔͦͦ͜͜ϑϩϯτ։ൃ ͷܦݧ͋Δ͔ΒʮͱΓ͋͑ͣ͘ͳΔ͠SSG or SSRͰ࡞ͬͱ͔͘ʯͱݴ ͏ͷ͕OKͳ߹ʹબΜͩΒ͍͍ͷͰ
ߟ͑Δ͜ͱ3. SSR ʹ͢Δ͔ SSG ʹ͢Δ͔ େମͷΞϓϦέʔγϣϯͰSSGͷํ͕͍͍Μ͡Όͳ͍ʁͱࢥ͍ͬͯΔ - ։ൃқ͕SSRͱൺֱ͢Δͱ͍͔Β - SSRͷ߹ϨϯμϦϯάαʔόʔͷεέʔϥϏϦςΟΛؾʹ͢Δඞཁ͕͋Δ
͕ɺSSGͰඞཁͳ͍ - SEO͍ͨ͠ϖʔδ -> ϢʔβݸਓͷใͳͲಈతʹੜ͢ΔͷͰͳ͍ (͜ͱ͕ଟ͍)ͷͰཁٻతʹͳ͍͔Β
ͨͩɺSSRͷํ͕ϕλʔͳέʔε͋ͬͯɺSEO͍ͨ͠ϖʔδ͕ಈతͳͷɻ ྫ͑ϢʔβߘܕͷϒϩάαΠτͳͲ - ରͷϖʔδʹมߋೖͬͨΓهࣄ͕૿͑ΔʹશهࣄϏϧυΒͤΔͷ· ͋·͙͍͋͑ - ϦΫΤετʹԠͯ͡SSRͯ͠CDNΩϟογϡͤ͞Δํ͕ΑΓཁٻʹରͯ͠ے ͕ྑͦ͞͏
·ͱΊ - සൟʹߋ৽͞ΕΔ & ͙͢ʹΠϯσοΫεͯ͠΄͍͔͠Ͳ͏͔ → Dynamic Rendering͖͔͢ߟ͑Δ - SSR
or SSG ͢Δ͔ී௨ͷSPAͰߦ͔͘ → ϢʔβମݧνʔϜͷεΩϧɾ͍͖ͬͯΛݩʹߟ͑Δ - SSR ʹ͢Δ͔ SSG ʹ͢Δ͔ → αʔόଆͰඳը͍ͨ͠ϖʔδʹεέʔϥϏϦςΟ͕ٻΊΒΕΔ͔ɺ νʔϜͷεΩϧɾ͍͖ͬͯͳͲΛݩʹߟ͑Δ
CASE STUDY: ͱ͋ΔECαΠτͷྫ Next.jsΛͬͨSSG Ͱߦ͘͜ͱʹͨ͠ - Static RenderingFMP͕͘ͳΓϢʔβମݧʹϓϥε → কདྷతʹωο
τϫʔΫ͕͍͔͠Εͳ͍ւ֎ల։͋ΓಘΔͨΊॏཁ - ࣄલʹඳը͓͖͍ͯͨ͠ϖʔδ͕TopɺΧςΰϦৄࡉɺৄࡉͷΈͰɺ ϥΠϯφοϓ͕ͦ͜·Ͱ૿͑Δ͜ͱͳ͍͜ͱ͕໌Β͔ͩͬͨͨΊɺ͜ ͜ʹର͢ΔεέʔϥϏϦςΟ͍Βͳ͍ -> SSR Ͱ͋Δඞཁͳ͍
CASE STUDY: ͱ͋ΔECαΠτͷྫ - ΠϯσοΫεͷॏཁͰͳ͍͠ɺDynamic Rendering ͱ͔·͋· ͋ΊΜͲ͍ͷͰɺSSGͰ࡞Δํ͕ίετ͕͍ͱߟ͑ͨ - ·ͩϦϦʔε͍ͯ͠ͳ͍ஈ֊Ͱײड़ΔͷΞϨ͕ͩɺҰ෦ͷϥΠϒϥ
ϦͷSSRͷઃఆ͕ΊΜͲ͔͚ͬͨͩ͘͞Ͱී௨ͷSPA։ൃͱൺͯͦ͜ ·ͰେมͰͳ͍ - Ή͠Ζ Next.js ͷΤίγεςϜʹ͔ͬΕΔͳͲͷར͋Δ
͓ΘΓʹϢʔβʹͱͬͯʮ͍͍ͷʯΛ࡞͍ͬͯ͜͏ ʮFirst and foremost, we focus on the user.ʯ IUUQTXXXCMPHHPPHMFQSPEVDUTTFBSDIJNQSPWJOHTFBSDIOFYUZFBST
ਆӠͬͨɻ
͓ΘΓʹϢʔβʹͱͬͯʮ͍͍ͷʯΛ࡞͍ͬͯ͜͏ ٕज़తͳ੍͔ΒࠓճͷΑ͏ͳzରࡦzΛ͋Δఔ͠ͳͯ͘ͳΒͳ͍ͷ͔֬ Ͱ͕͢ɺͦΕҎ֎ʮϢʔβʹྑ࣭ͳίϯςϯπΛఏڙ͢Δ͜ͱʯ͕4&0ͷ ίΞͱͳͬͯ͘Δ͜ͱؒҧ͍ͳ͍Ͱ͠ΐ͏ɻ (PPHMFͷʮ%POUCFFWJMʯΛ৴͡·͠ΐ͏
Thank you for listening!!
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
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
6TFGVM3FTPVSDFT 4UBUJD4JUF(FOFSBUPS <αʔόʔαΠυͷਓʹ͍͑ͨ+".4UBDLͱ੩తαΠτͷΠϚNPUUPYCMPH> IUUQTNPUUPYDPN QPTUT OPDBDIF
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