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.3k
PWAに取り組む前に知っておきたい SPAとSEO
seya
February 01, 2020
Tweet
Share
More Decks by seya
See All by seya
継続的な評価基準と評価の実行の仕方をアップデートするワークフロー
kazuyaseki
2
250
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
3
2.3k
エンジニアにオススメの Figma 活用
kazuyaseki
16
14k
なぜ私はコードをデザインに使いたいのか
kazuyaseki
9
3.7k
フロントエンド開発のための Figma
kazuyaseki
20
26k
State of SEO for SPA 2018
kazuyaseki
8
5.2k
Selenium あるある
kazuyaseki
0
1.8k
Vue コンポーネント実装パターン
kazuyaseki
16
3.9k
Other Decks in Technology
See All in Technology
Claude Code x Androidアプリ 開発
kgmyshin
1
570
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
2
110
広島銀行におけるAWS活用の取り組みについて
masakimori
0
130
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.1k
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
180
Postman MCP 関連機能アップデート / Postman MCP feature updates
yokawasa
0
140
アジャイルテストで高品質のスプリントレビューを
takesection
0
110
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
5
650
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
3
780
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
300
あとはAIに任せて人間は自由に生きる
kentaro
3
1.1k
Browser
recruitengineers
PRO
3
250
Featured
See All Featured
Embracing the Ebb and Flow
colly
87
4.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
4 Signs Your Business is Dying
shpigford
184
22k
How to Ace a Technical Interview
jacobian
279
23k
Agile that works and the tools we love
rasmusluckow
329
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
A designer walks into a library…
pauljervisheath
207
24k
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