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.3k
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
Kubernetes self-healing of your workload
hwchiu
0
580
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
150
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
250
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
1
570
OPENLOGI Company Profile for engineer
hr01
1
45k
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
340
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
450
マルチエージェントのチームビルディング_2025-10-25
shinoyamada
0
200
What's new in OpenShift 4.20
redhatlivestreaming
0
320
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
330
知覚とデザイン
rinchoku
1
610
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Producing Creativity
orderedlist
PRO
347
40k
The Pragmatic Product Professional
lauravandoore
36
7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The Language of Interfaces
destraynor
162
25k
Why Our Code Smells
bkeepers
PRO
340
57k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Fireside Chat
paigeccino
41
3.7k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
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