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
CSR / SSR / SSGの動向2020
Search
Kazuki Shibata
June 21, 2020
Technology
2
1.7k
CSR / SSR / SSGの動向2020
チャリティーカンファレンス沖縄2020 Vol.1の発表資料です。
Kazuki Shibata
June 21, 2020
Tweet
Share
More Decks by Kazuki Shibata
See All by Kazuki Shibata
microCMSでif文を作る
shibe97
1
1.2k
SvelteKitでJamstackを試す
shibe97
1
1.2k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.9k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.2k
Jamstack×microCMS 実装編
shibe97
4
980
SentryでSPAのエラーログを収集する
shibe97
1
1.7k
useRefについて調べてみた
shibe97
1
170
フロントエンドエンジニアのキャリアパス
shibe97
9
3.9k
Containerどこに置く?
shibe97
1
1.9k
Other Decks in Technology
See All in Technology
AWSにおけるTrend Vision Oneの効果について
shimak
0
130
Where will it converge?
ibknadedeji
0
190
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
220
実装で解き明かす並行処理の歴史
zozotech
PRO
1
420
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
180
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
430
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
220
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
940
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
280
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Embracing the Ebb and Flow
colly
88
4.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Scaling GitHub
holman
463
140k
Transcript
CSR / SSR / SSG ͷಈ2020 ࣲా ف - Wanta,
Inc νϟϦςΟʔΧϯϑΝϨϯεԭೄ 2020 Vol.1 Frontendฤ
ࣲా ف / Kazuki Shibata Υϯλגࣜձࣾͷڞಉۀऀ $00ɻ NJDSP$.4ͷσβΠϯɺϑϩϯτ ։ൃΛ͍ͯ͠·͢ɻ +BNTUBDL/FYU/VYU͕͖ɻ
!TIJCF
None
microCMSͷհ • ຊͷϔουϨεCMS • ඇΤϯδχΞͰ͍͍͢ཧը໘ • ίϯςϯπAPIܦ༝Ͱऔಘ • ॊೈͳݖݶཧ •
Jamstackͱͷ૬ੑ˕
CSR ΫϥΠΞϯταΠυϨϯμϦϯά
ΫϥΠΞϯταΠυϨϯμϦϯά • ΫϥΠΞϯταΠυͰϖʔδΛߏங͢Δ • SPAʢγϯάϧϖʔδΞϓϦέʔγϣϯʣ͕ίϨʹ͋ͨΔ • αʔόʔϨεSPA͕ΠέͯΔ • ExpressͳͲαʔόʔαΠυϑϨʔϜϫʔΫ༻͠ͳ͍ •
ϒϥβͱσʔλͷΓऔΓΛߦ͏APIͯ͢Cloud FunctionΛ༻͍Δ • microCMSαʔόʔϨεSPAߏ
αʔόʔϨεSPAߏʢAWS൛ʣ ϒϥβ CloudFront ʢCDNʣ S3 ʢStorageʣ Lambda ʢCloud Functionʣ HTML
/ JS / CSS / ը૾ औಘɺૹ৴ɺݕࡧ Ωϟογϡ DynamoDB ʢDatabaseʣ CognitoʢIdentityʣ ೝ ূ σʔλ API Gateway JSON
αʔόʔϨεSPAͷϝϦοτ • ϖʔδભҠ࣌JSONͷΓऔΓͷΈͰࡁΉͷͰ͍ • Webαʔόʔͷཧ͕ෆཁ • େྔΞΫηε͞ΕͯΦʔτεέʔϧ͢ΔͷͰ৺ͳ͠ →ϩάΠϯ͕ඞཁͳWebΞϓϦέʔγϣϯ͖
αʔόʔϨεSPAͷσϝϦοτ • ϝσΟΞͳͲݕࡧIndex͕ඞਢͳഔମʹ͔ͳ͍ • ҰԠGoogleIndexͯ͘͠ΕΔ͕ɺTwitterSlackͰͷOGPల։ ͞Εͳ͍
SSR + CSR αʔόʔαΠυϨϯμϦϯά
αʔόʔαΠυϨϯμϦϯά + CSR • ॳظϩʔυ࣌ͷΈαʔόʔαΠυͰHTMLΛߏங͠ɺϖʔδભҠҎ߱ CSRʢΫϥΠΞϯτϨϯμϦϯάʣΛߦ͏ΈΛࢦ͢ • SPAͷSEOܽɺॳظϩʔυΛิͬͨߏ • ͱͱ࣮͕͔ͳΓେม͕ͩͬͨɺNext
/ Nuxt ͷొͰ͍ͩͿ ෑډ͕Լ͕ͬͨ
αʔόʔαΠυϨϯμϦϯάͷϝϦοτ • SEOͳ͠ • ॳظϩʔυΊ
αʔόʔαΠυϨϯμϦϯάͷσϝϦοτ • Webαʔόʔ͕ඞਢ ʢྫ͑ϗεςΟϯάαʔόʔ͚ͩͰಈ͔ͤͳ͍ʣ • ࣮қ͕ߴ͍
SSG ελςΟοΫαΠτδΣωϨʔτ
ελςΟοΫαΠτδΣωϨʔτ • ੩తϖʔδΛࣄલʹੜ͠ɺ৴͢Δ • ୯ͳΔ੩తϖʔδͳͷͰ͍͠ηΩϡΞ • Movable TypeɺHugoɺJekyllɺHexoɺNextɺNuxtɺetc…
Jamstack SSG + CSR
None
Jamstack • ࣄલϏϧυͨ͠੩తϑΝΠϧΛ৴ʢʴAPIʹΑΔॲཧʣ • SSG + CSRͷϋΠϒϦου • ॳظϖʔδࣄલϏϧυͨ͠੩తϑΝΠϧΛϩʔυ͠ɺϖʔδભҠ࣌ CSRΛߦ͏
• ϝσΟΞͳͲɺ੩తίϯςϯπͷଟ͍αΠτʹ͍͍ͯΔ
Α͋͘ΔJamstackͷߏ
JamstackͷϝϦοτ • ඞཁͳͷ੩తϑΝΠϧͷϗεςΟϯάͷΈ • NetlifyɺGitHub PagesɺS3ɺVercelͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ • APIίʔϧϏϧυ࣌ͷΈ • APIϦΫΤετͷ੍ݶ͕͋ͬͯ҆৺
• ສ͕ҰɺAPI͕མͪͯ҆৺ • ηΩϡΞˍϋΠύϑΥʔϚϯεˍ͍҆
JamstackͷσϝϦοτ • ϖʔδ͕ଟ͍ͱϏϧυʹຖճ͕͔͔࣌ؒͬͯ͠·͏ • ϓϨϏϡʔͷ࣮͕ͪΐͬͱ໘ • εςʔδϯάڥΛͲ͏ͬͯߏங͢Δ͔ɺݟ͕·ͩগͳ͍
Ϗϧυͷ࠷దԽ Build Optimization
JamstackϏϧυ͕9ׂ • JamstackͰ࠷େࣄͳͷϏϧυʂͱݴͬͯաݴͰͳ͍ • جຊతʹͯ͢ͷॲཧΛϏϧυ࣌ʹࡁ·͢ • ϖʔδੜʹ͔͔Δ࣌ؒΛͰ͖ΔݶΓݮΒ͢ͷ͕ॏཁ • ϖʔδੜ࣌ͷAPIϦΫΤετΛ࠷খݶʹ͑Δ •
ແବͳॲཧΛݮΒ͢
Nuxt Generateͷݕূ • MacBookProʢ13-inch, 2017ʣʹͯݕূ • macOS Catalinaʢ10.15.3ʣ • 3.1GHz
Core i5 • ϝϞϦ 16GB • هࣄͷຊจʹʮͪΌΜʯͷ಄5,000จࣈΛදࣔ • هࣄʢ10, 100, 1000, 10000, 100000ʣͷ5छྨͰݕূ
None
ܭଌ݁Ռ هࣄ
ฏۉʢඵʣ தԝʢඵʣ https://microcms.io/blog/nuxt-measure-build-time/
NuxtͷpayloadʹΑΔ ಈతϧʔςΟϯάੜͷߴԽ • Ϗϧυ࣌ͷAPIϦΫΤετΛݮ͢Δ ͨΊʹɺpayloadΛ༗ޮతʹ͏ • ϧʔςΟϯά࡞࣌ʹίʔϧ͢ΔҰཡ APIͷதΛ֤ϖʔδʹpayloadͱͯ͠ ͢ •
APIϦΫΤετ100ຊˠ1ຊ
Next.js ͷ Incremental Static Regeneration • SSR / SSG /
CSR ͷϋΠϒϦου • ॳճΞΫηε࣌SSR • ୭͔͕ҰͰΞΫηε͢ΕɺͦͷλΠϛϯάͰSSG͕͞ΕΔ • ϖʔδભҠ࣌CSR • TwitterͷσϞ https://static-tweet.now.sh/
• Next.jsΛ։ൃ͍ͯ͠ΔVercel͕ࣾఏڙ͍ͯ͠ΔϗεςΟϯάαʔϏε • αʔόʔαΠυॲཧಈ࡞͢Δ • ඞཁ࠷ݶͳՕॴΛSSR͠ɺͰ͖ΔݶΓSSGͯ͠ύϑΥʔϚϯεͷ ࠷େԽΛਤΔͱ͍͏ํ͕͋Γͦ͏ • Next.jsʹαʔόʔαΠυ༻ͷػೳ͕݁ߏ͋ΔͷͰɺNetlifyS3Ͱ ेʹ͍͜ͳͤͳ͍
Gatsby ͷ Incremental Builds • Gatsby CloudʢGatsbyࣾͷϗεςΟϯάαʔϏεʣ্ͰࠩϏϧυ Λߦ͏͜ͱ͕Ͱ͖Δ • ॳճϏϧυ͚͔͔ͩ࣌ؒΔ͕ɺ2ճҎ߱ߴʢඵʣ
Gatsby ͷ Conditional Page Builds • ͪ͜ΒࠩϏϧυ༻ͷઃఆ • Gatsby Cloud্Ͱͳͯ͑ͦ͘͏ʢະ֬ೝʣ
• https://www.gatsbyjs.org/docs/conditional-page-builds/
Լॻ͖ϓϨϏϡʔ Preview
Jamstackʹ͓͚ΔϓϨϏϡʔಛघ • ϔουϨεCMSʹϏϡʔ͕ͳ͍ͨΊɺϓϨϏϡʔڥΛผͰ ༻ҙ͢Δඞཁ͕͋Δ • CMS্ͰهࣄΛԼॻ͖อଘͨ͠ॠؒʹϓϨϏϡʔ͍ͨ͠ → ຖճϏϧυͯͨ͠Β͔͔࣌ؒΔ → ϓϨϏϡʔը໘෦ͷΈSSR·ͨCSRͰߏங͢Δ
εςʔδϯάڥߏஙͷྫ • ຊ൪ڥJamstackɺεςʔδϯάڥSPAͱͯ͠༻ҙ͢Δ • NuxtͰ͍͏ͱɺڥมͰ mode Λ universal / spa
ͰΓସ͑Δ
Next.js ͷ Preview Mode ػೳ • Next.jsʹαʔόʔϨεؔΛىಈͰ͖ΔAPI Routesͱ͍͏ػೳ͕͋Δ • ͜ΕΛར༻͠ɺϓϨϏϡʔ༻ͷΤϯυϙΠϯτʹΞΫηεͨ͠ࡍʹ֘هࣄʹରͯ͠ϦμΠ
ϨΫτΛ͔͚Δ • ͦͷࡍʹPreview༻ͷCookie͕༩͞ΕΔ • هࣄଆͰCookieͷ༗ແΛఆͯ͠ɺԼॻ͖༻ίϯςϯπΛදࣔ͢Δ • SPAڥͳͲͷผڥΛ༻ҙͤͣͱηΩϡΞʹϓϨϏϡʔ͕Մೳ • ৄͪ͘͜͠ΒͰղઆ • https://microcms.io/blog/nextjs-preview-mode/
גࣜձࣾΫϥυϫʔΫε༷ͷࣄྫ • ίʔϙϨʔτϖʔδͷϦχϡʔΞϧͰmicroCMSΛ࠾༻ • NuxtͰߏஙɺJamstack • χϡʔεهࣄ3000݅͑ • Ϗϧυ࣌ؒʓʓ •
ৄ͘͠ɺTAMੁՈ͞ΜͷηογϣϯͰ
·ͱΊ Summary
্खʹ͍͚Λ͢Δ • ϩάΠϯ͕͋ΔΑ͏ͳWebΞϓϦέʔγϣϯ͚ʹSPA • ϝσΟΞͳͲ੩తίϯςϯπଟΊͷWEBαΠτʹJamstack • Ͳ͏ͯ͠αʔόʔαΠυͰॲཧΛڬΈ͔ͨͬͨΒSSR
࠷ޙʹϫʔΫγϣοϓͷએ • 14:00 - 16:00ʹϧʔϜCͰϫʔΫγϣοϓΓ·͢ • ʮmicroCMS + NuxtͰJamstackϒϩάΛ࡞ͬͯΈΑ͏ʯ •
ϫʔΫγϣοϓதʹࢀՃऀશһ͕Jamstackϒϩά͕࡞ΕΔΑ͏αϙʔ τ͠·͢ • RemoͰ։࠵
Thanks :) !TIJCF