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
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
22
8.1k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
2.8k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
980
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
16
9.6k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.2k
Deep Dive International Conference
yosuke_furukawa
PRO
0
99
フロントエンドのDXと今後
yosuke_furukawa
PRO
6
3.8k
フロントエンドリアーキテクトの話
yosuke_furukawa
PRO
18
8.9k
new_urlparser.pdf
yosuke_furukawa
PRO
1
430
Other Decks in Programming
See All in Programming
プールにゆこう
irof
2
120
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
1
200
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
250
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
ONE WEDGE_company_guide
1wedge_one
0
380
Ruby製社内ツールのGo移行
bgpat
2
330
ログラスを支える設計標準について / loglass-design-standards
urmot
10
2.1k
Ruby Pattern Matching
bkuhlmann
0
920
ゆるい個人開発のススメ
kuroppe1819
10
940
PostmanでAPIの動作確認が楽になった話
h455h1
0
130
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
Happy Clients
brianwarren
91
6.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Optimizing for Happiness
mojombo
370
69k
The Invisible Side of Design
smashingmag
294
49k
Infographics Made Easy
chrislema
237
18k
Web development in the modern age
philhawksworth
202
10k
Web Components: a chance to create the future
zenorocha
305
41k
4 Signs Your Business is Dying
shpigford
175
21k
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 !!!