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
4.2k
PWAに取り組む前に知っておきたい SPAとSEO
seya
February 01, 2020
Tweet
Share
More Decks by seya
See All by seya
継続的な評価基準と評価の実行の仕方をアップデートするワークフロー
kazuyaseki
2
130
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
3
2.1k
エンジニアにオススメの Figma 活用
kazuyaseki
16
14k
なぜ私はコードをデザインに使いたいのか
kazuyaseki
9
3.6k
フロントエンド開発のための Figma
kazuyaseki
20
25k
State of SEO for SPA 2018
kazuyaseki
8
5k
Selenium あるある
kazuyaseki
0
1.7k
Vue コンポーネント実装パターン
kazuyaseki
16
3.8k
Other Decks in Technology
See All in Technology
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
300
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
180
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
720
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
OPENLOGI Company Profile
hr01
0
60k
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.7k
Windows の新しい管理者保護モード
murachiakira
0
200
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
330
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
230
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
110
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
Optimizing for Happiness
mojombo
376
70k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
A Tale of Four Properties
chriscoyier
158
23k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
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