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.9k
PWAに取り組む前に知っておきたい SPAとSEO
seya
February 01, 2020
Tweet
Share
More Decks by seya
See All by seya
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
3
1.6k
エンジニアにオススメの Figma 活用
kazuyaseki
16
13k
なぜ私はコードをデザインに使いたいのか
kazuyaseki
9
3.4k
フロントエンド開発のための Figma
kazuyaseki
20
24k
State of SEO for SPA 2018
kazuyaseki
8
4.8k
Selenium あるある
kazuyaseki
0
1.6k
Vue コンポーネント実装パターン
kazuyaseki
16
3.7k
Other Decks in Technology
See All in Technology
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
Classmethod Odyssey 登壇資料
yamahiro
0
390
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
920
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
506
110k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Designing with Data
zakiwarfel
96
5k
Writing Fast Ruby
sferik
623
60k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Navigating Team Friction
lara
181
13k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Thoughts on Productivity
jonyablonski
64
4.1k
Gamification - CAS2011
davidbonilla
78
4.9k
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