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
You Need to know SSR
Search
Yosuke Furukawa
PRO
June 17, 2017
Programming
26
31k
You Need to know SSR
ng-japan で発表した Server Side Rendering の資料です。
Yosuke Furukawa
PRO
June 17, 2017
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js v22 で変わること
yosuke_furukawa
PRO
10
3.6k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
22
8.2k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
2.9k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.1k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
16
9.7k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.3k
Deep Dive International Conference
yosuke_furukawa
PRO
0
100
フロントエンドのDXと今後
yosuke_furukawa
PRO
6
3.8k
フロントエンドリアーキテクトの話
yosuke_furukawa
PRO
18
8.9k
Other Decks in Programming
See All in Programming
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Goのmultiple errorsについて (2024年4月版)
syumai
4
1k
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
2
130
Netty Chicago Java User Group 2024-04-17
sullis
0
190
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
Milestoner
bkuhlmann
1
410
GitHub Copilotのススメ
marcy731
1
200
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
460
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
260
新宿ダンジョンを可視化してみた
satoshi7190
2
270
Fast JSX: Don't clone props object #28768
yossydev
1
140
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Featured
See All Featured
Designing with Data
zakiwarfel
96
4.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Six Lessons from altMBA
skipperchong
21
3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Gamification - CAS2011
davidbonilla
76
4.6k
Fireside Chat
paigeccino
21
2.6k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Adopting Sorbet at Scale
ufuk
68
8.6k
A designer walks into a library…
pauljervisheath
200
23k
Side Projects
sachag
451
41k
Transcript
You need to know SSR 2017/06/17 ng-japan @ Shinagawa MS
Office
Twitter: @yosuke_furukawa Github: yosuke-furukawa
8FC %#13&44݄߸
None
None
͍ͭ3FBDUͷਓ͚ͩͲ "OHVMBSʹࠢചΓ·ͨ͠ʂʂ
Server Side Rendering
Server Side Rendering 4FSWFS 1BHF3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI%BUB %#"1* 3FOEFS)5.-
(FUQBHFQBSUT
Server Side Rendering 4FSWFS 1BHF3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI%BUB %#"1* 3FOEFS)5.-
(FUQBHFQBSUT 3FOEFSFS $PNQPOFOUT 5FNQMBUFT 3FOEFS)5.-XJUITBNF DMJFOUTFSWFSSFOEFSMPHJD
Why we need Server Side Rendering?
SEO
SEO
SEO Ϋϩʔϥ͕+4Λ࣮ߦͰ͖Δͱ ͍͑ɺͦͷ+4͕ͪΌΜͱಈ͘อ ূͳ͍ɻ
SEOॏཁɺͰຊ࣍
First View Performance
ͦͦFirst ViewͱҰޱʹ ݴͬͯछྨ͕͋Δ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU
'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE
First View Performance • SSR ʹ͓͚Δ First View ͷվળͱɺ͜ͷ First
Meaningful Paint ·ͰΛࢦ͢ɻ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU
First View Performance • First Meaningful PaintҎ߱ͷվળService WorkerHTTP2ͳͲผͳΓํ͕͋Δɻ 'JSTU.FBOJOHGVM 1BJOU
7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE
Client Side Rendering ͷΈͰͷಈ͖
Client Side Rendering ͷΈͷ ߹ • First Meaningful Paint ͱ
Time To Interact ͷ λΠϛϯά͕΄ͱΜͲಉ͡ɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading..
Client Side Rendering ͷΈͷ ߹ • ݴ͍͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful
Paint ·Ͱ͕͘ͳΔɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading..
Client Side Rendering ͷΈͷ ߹ • ݴ͍͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful
Paint ·Ͱ͕͘ͳΔɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading.. Ϣʔβʔݟ͔͑ͯΒૢ࡞͢Δ 'JSTU.FBOJOHGVM1BJOU͕ग़͔ͯΒ*OUFSBDU ͢Δ ͷͰɺ͜ͷ$MJFOU4JEF3FOEFSJOH͚ͩͰ࣌ؒతʹແବ͕ଟ͍ɻ
ͦ͜Ͱ Server Side Rendering
/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU ࠷ॳ͔ΒσʔλΛຒΊࠐΜͩঢ়ଶͰ)5.-ʹ͢Δ ʢ4FSWFS4JEF3FOEFSJOHʣ
DEMO
͡Ό͋ SSR ʹ͢Ε͍͍͔ͱ ͍͏ͱ࣮ͦ͏୯७Ͱͳ͍
Server Side Rendering Critical Points • HTMLੜ͕CPUΠϯςϯγϒλεΫʹͳΔɻ • ·ͨNode.jsͰ࣮ߦ͢ΔͱϝΠϯϧʔϓΛϒϩοΫ͢Δ(গͳ͘ͱݱ࣌ ͷReactͰɺAngularಉ༷)ɻ
• ͔ͨ͠͠ΒϒϩοΩϯά࣍ͷReactͷΞοϓσʔτͰͳΜͱ͔ͳ Δ͔(https://github.com/facebook/react/pull/9710)ʁ • CPUΠϯςϯγϒλεΫʹͳΓɺCPUෛՙ͕ߴ·Δͱαʔό͕ॲཧ͖͠ Εͳ͘ͳΔʢෛՙܰݮ͢ΔͨΊʹαʔό૿͞ͳ͍ͱ͍͚ͳ͘ͳΔʣ
Server Side Rendering Critical Points https://speakerdeck.com/yoshidan/nodefest2016
Server Side Rendering Critical Points
Server Side Rendering Critical Points ComponentࢦͰ͖ͪΜͱComponentΛ͚ͯ ࣮͢Ε͢Δ΄ͲHTMLੜίετ͕ߴ͘ͳΔ
Server Side Rendering Critical Points • React ͷ߹ɿ • renderToString
ͷ࣌ʹҰͭҰͭͷComponentͷΠϯελϯεΛੜ͠ɺreact- idΛ߱Γɺ࠷ޙʹHTMLͷνΣοΫαϜΛܭࢉͤ͞Δඞཁ͕͋Δ(Clientͷ Virtual DOM ͱͷ߹ੑΛ߹ΘͤΔͨΊ)ɻ • Angular ͷ߹ɿ • VDOMͰͳ͍ͷͰɺidΛৼΔඞཁͳ͍͕ɺrenderModuleFactory ͷ࣌ʹຖ ճHTMLύʔεॲཧͯ͠ΔʢϓϦίϯύΠϧ͢ΕίετݮΔʣ • rxjs ͷ subscribeToResult ͕ॏͦ͏ (Routerͷॲཧ?)
Server Side Rendering Critical Points • React ͷ߹ɿ • renderToString
ͷ࣌ʹҰͭҰͭͷComponentͷΠϯελϯεΛੜ͠ɺ react-idΛ߱Γɺ࠷ޙʹHTMLͷνΣοΫαϜΛܭࢉͤ͞Δඞཁ͕͋Δ (ClientͷVirtual DOM ͱͷ߹ੑΛ߹ΘͤΔͨΊ)ɻ • Angular ͷ߹ɿ • VDOMͰͳ͍ͷͰɺidΛৼΔඞཁͳ͍͕ɺrenderModuleFactory ͷ ࣌ʹຖճHTMLύʔεॲཧͯ͠Δʢಉ͘͡ComponentࢦͰׂ͞ΕΕ ͞ΕΔ΄ͲɺCPUෛՙ͕ߴͦ͏ʣ ͭ·ΓɺͲͬͪಉ͡Α͏ʹCPUෛՙ͕͔͔Δɻ
ݱ࣮ղ
ݱ࣮Ͱͷઓུ2ͭ • HTMLੜ݁ՌΛΩϟογϡͤ͞Δ • above the fold (εΫϩʔϧ͠ͳ͍ͰݟΕΔൣ ғ)͚ͩHTMLΛϨϯμϦϯάͯ͠ฦ͢
ݱ࣮Ͱͷઓུ2ͭ • HTMLੜ݁ՌΛΩϟογϡͤ͞Δ • above the fold (εΫϩʔϧ͠ͳ͍ͰݟΕΔൣ ғ)͚ͩHTMLΛϨϯμϦϯάͯ͠ฦ͢ ͨͩ͜͠Ε྆ํڞɺॾਕͷ
Ωϟογϡ
Ωϟογϡ • ੜࡁΈͷHTMLΛ࡞ͬͨޙͰΩϟογϡ͢Δ • CPUίετͷߴ͍ॲཧ͍͍ͤͥ࠷ॳͷҰ ͚ͩ 3FEJT.FNEJO NFNPSZ$BDIF
Ωϟογϡ • Ωϟογϡͨ͠ใΛ͍ͭpurge͢Δͷ͔ ʢߋ৽සߴ͍ͷΩϟογϡແҙຯʣ • Redis/Memcached/LRU CacheͳͲͲ͜ʹอ ଘ͢Δͷ͔ • ͦͦಈతͳίϯςϯπΩϟογϡͰ͖
ͳ͍
Ωϟογϡ • Ωϟογϡͨ͠ใΛ͍ͭpurge͢Δͷ͔ ʢߋ৽සߴ͍ͷΩϟογϡແҙຯʣ • Redis/Memcached/LRU CacheͳͲͲ͜ʹอ ଘ͢Δͷ͔ • ͦͦಈతͳίϯςϯπΩϟογϡͰ͖
ͳ͍ ͜ͷลۜͷؙͳ͍ɺαʔϏεʹΑͬͯಛੑ͕ҧ ͏ͷͰͦΕͧΕαʔϏε͝ͱʹؤுΔඞཁ͋Γɻ
above the fold rendering
above the fold rendering • ݟ͑Δൣғ͚ͩαʔόαΠυϨϯμϦϯάͯ͠ɺ ݟ͑ͯͳ͍ൣғΫϥΠΞϯταΠυϨϯμ Ϧϯά͢Δɻ 443 $43
above the fold rendering • ͜Εݟ͑ͯͳ͍෦࣮SEO͕ͪΌΜͱ ࣮ߦ͞ΕΔͱݶΒͳ͍ɻ • Time To
Interact Ͱ͖Δ·Ͱ εΫϩʔϧ͢Δͱ Կͳ͍ঢ়ଶʹͳΔɻ ✗
above the fold rendering • ͜Εݟ͑ͯͳ͍෦࣮SEO͕ͪΌΜͱ ࣮ߦ͞ΕΔͱݶΒͳ͍ɻ • Time To
Interact Ͱ͖Δ·Ͱ εΫϩʔϧ͢Δͱ Կͳ͍ঢ়ଶʹͳΔɻ ͜ΕαʔϏεಛੑͰڐ༰Ͱ͖Δͷͳͷ͔ݕ౼ ͷ༨͋Γ
Server Side Rendering͕Ͱ ͖ΕFirst Meaningful Paint ΛߴԽͰ͖Δ͕ɺ࠷దԽ͢ Δʹ໘ଟ͍
ٯʹݴ͑ɺ"ͪΌΜͱ" ࣮ࢪ͢Δͱ First Meaningful Paint Λߴ Խͭͭ͠ɺSPAͷྑ͍ॴͲ Γ͕࣮ݱͰ͖Δɻ
Users Voice
Users Voice Ͳͷҙݟཁ͢ΔͱɺFirst Meaningful Paint ࣺͯͯͦͷޙͷTime To Interact·ͰΛߴԽ͢Ε OKͰ͠ΐʁͱ͍͏(͘͠ະདྷͷWebͷظ)
͜ΕΒͷAnswer: First Meaningful Paint Λ ࣺͯͯྑ͍ͳΒSSR Βͳͯ͘OK
First Meaningful Paint Λ ߴԽ͢Δ͖͔Ͳ͏͔ αʔϏεಛੑʹґଘ͢Δ ʢ༧ࡁΈͷډञͱ͔ඒ༰ Ӄ୳ͯ͠Δ࣌ʹද͍ࣔͱக ໋తʣ
͋ͱݸਓతʹύϑΥʔϚϯ εͰଥڠͨ͘͠ͳ͍
PerformanceऴΘΓ͕ͳ͍ ֤ॴͰৗʹվળͷඞཁ͕͋Δ
࠷ۙͷWebͷτϨϯυ First Meaningful Paint ͷߴԽͪΖΜɺͦͩ͜ ͚͡Όͳ͘ͳ͖͍ͬͯͯΔɻ
'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE 'JSTU.FBOJOHGVM1BJOU͔Β5JNF5P*OUFSBDUJWF͕Ε͗͢Δͱ
ࠓݟ͑ͯΔͷʹૢ࡞Ͱ͖ͳ͍͕࣌ؒ૿͑ͯετϨεʹܨ͕Δ https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2- page-load-performance-33b932d97cf2
'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE ͳͷͰɺ࠷ۙ$PEF4QMJUUJOHͯ͠ͳΔ͘+4ࣗମΛܰ͘͢Δɺ)551ͷ
164)Λ͏·ͬͯ࣍͘ͷϦιʔεΛࣄલΩϟογϡ͓ͯ͘͠ͳͲͷ5JNF5P *OUFSBDU·ͰΛԿʹ͘͢Δ͔ͷվળࡦ͕ग़͍ͯΔɻ https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2- page-load-performance-33b932d97cf2
͜Ε͚ͩ͡Όͳ͍
/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU 4FSWFSͰͷϨεϙϯεվળ %#ΫΤϦνϡʔχϯάωοτϫʔΫվળ
/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU $SJUJDBM3FOEFSJOH$44Ͱͷௐɺ -PBEJOH*OEJDBUPSʹΑΔͨͤͳ͍
/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU ॳظσʔλΛGFUDI͢ΔͷͰͳ͘ɺ+40/ͱͯ͠ຒΊࠐΉ ͘͠ɺॳظσʔλΛ)5.-ʹ͢Δ ʢ4FSWFS4JEF3FOEFSJOHʣ
'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE BCPWFUIFGPME֎ͷը૾ͷԆಡΈࠐΈ
ޮతͳϑΥʔϚοτͷબఆ
'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE +4ͷԆϩʔυɺ+4DPEFTQMJUUJOHͳͲͰͷෆཁͳίʔυ
ͷআ
'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE )5513FTPVSDF)JOUTʹΑΔϩʔυվળ
'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE )5513FTPVSDF)JOUTʹΑΔϩʔυվળ
ύϑΥʔϚϯεͷվળେมʂʂʂ Ͱͦ͜ʹݸਓతʹଥڠͨ͘͠ͳ͍
·ͱΊ
·ͱΊ • Server Side Rendering SEO ͚ͩ͡Όͳ͍ɺॳظදࣔ( First Meaningful
Paint )ʹޮՌతͳࢪࡦ • ࣮ࡍʹ͓͏ͱ͢ΔͱɺCPUෛՙ͕ߴ͍ॲཧͳͷͰɺαʔόଆ Ͱ৭ʑHack͕ඞཁ (ΩϟογϡATFϨϯμϦϯά) • Server Side Rendering αʔϏεͷಛੑ࣍ୈͰ͠ͳͯ͘ྑ͍ • ύϑΥʔϚϯεʹݶΓ͕ͳ͍ɺݸਓతʹ͔ͩΒͱ͍ͬͯଥ ڠͨ͘͠ͳ͍ɻ
Thank you !!!