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
150
複数の 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
5.1k
Selenium あるある
kazuyaseki
0
1.7k
Vue コンポーネント実装パターン
kazuyaseki
16
3.9k
Other Decks in Technology
See All in Technology
空が堕ち、大地が割れ、海が涸れた日~もしも愛用しているフレームワークが開発停止したら?~ #phperkaigi 2025
77web
2
1k
Riverpod & Riverpod Generatorを利用して状態管理部分の処理を書き換えてみる簡単な事例紹介
fumiyasac0921
0
100
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
420
ソフトウェアプロジェクトの成功率が上がらない原因-「社会価値を考える」ということ-
ytanaka5569
0
120
20250326_管理ツールの権限管理で改善したこと
sasata299
1
360
Restarting_SRE_Road_to_SRENext_.pdf
_awache
0
160
モンテカルロ木探索のパフォーマンスを予測する Kaggleコンペ解説 〜生成AIによる未知のゲーム生成〜
rist
4
1.1k
IAMのマニアックな話 2025 ~40分バージョン ~
nrinetcom
PRO
8
910
20250328_OpenAI製DeepResearchは既に一種のAGIだと思う話
doradora09
PRO
0
150
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.2k
SSH公開鍵認証による接続 / Connecting with SSH Public Key Authentication
kaityo256
PRO
2
220
LINE Notify互換のボットを作った話
kenichirokimura
0
170
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Bash Introduction
62gerente
611
210k
What's in a price? How to price your products and services
michaelherold
245
12k
How to Think Like a Performance Engineer
csswizardry
22
1.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
How to train your dragon (web standard)
notwaldorf
91
5.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
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