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.5k
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
1k
SvelteKitでJamstackを試す
shibe97
1
1.1k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.8k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.1k
Jamstack×microCMS 実装編
shibe97
4
870
SentryでSPAのエラーログを収集する
shibe97
1
1.6k
useRefについて調べてみた
shibe97
1
140
フロントエンドエンジニアのキャリアパス
shibe97
9
3.7k
Containerどこに置く?
shibe97
1
1.9k
Other Decks in Technology
See All in Technology
Taming you application's environments
salaboy
0
190
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
630
FlutterアプリにおけるSLI/SLOを用いたユーザー体験の可視化と計測基盤構築
ostk0069
0
100
第1回 国土交通省 データコンペ参加者向け勉強会③- Snowflake x estie編 -
estie
0
130
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
180
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
430
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
890
Lexical Analysis
shigashiyama
1
150
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
420
OTelCol_TailSampling_and_SpanMetrics
gumamon
1
200
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.5k
Gamification - CAS2011
davidbonilla
80
5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
A better future with KSS
kneath
238
17k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Automating Front-end Workflow
addyosmani
1366
200k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
GitHub's CSS Performance
jonrohan
1030
460k
BBQ
matthewcrist
85
9.3k
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