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
1k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.8k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.1k
Jamstack×microCMS 実装編
shibe97
4
860
SentryでSPAのエラーログを収集する
shibe97
1
1.6k
useRefについて調べてみた
shibe97
1
140
フロントエンドエンジニアのキャリアパス
shibe97
9
3.6k
Containerどこに置く?
shibe97
1
1.9k
Other Decks in Technology
See All in Technology
10分でわかるfreee エンジニア向け会社説明資料
freee
18
520k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
生成AIとAWS CDKで実現! 自社ブログレビューの効率化
ymae
2
330
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
150
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
170
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
27
12k
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
510
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
4.6k
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
Amazon FSx for NetApp ONTAPを利用するにあたっての要件整理と設計のポイント
non97
1
160
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Gamification - CAS2011
davidbonilla
80
5k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Raft: Consensus for Rubyists
vanstee
136
6.6k
BBQ
matthewcrist
85
9.3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
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