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
32k
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, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
8
3.7k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
230
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
400
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
810
Other Decks in Programming
See All in Programming
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
1
130
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
720
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
Create a website using Spatial Web
akkeylab
0
290
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
110
C++20 射影変換
faithandbrave
0
490
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
300
Passkeys for Java Developers
ynojima
3
870
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
greenflagproject
1
120
A2A プロトコルを試してみる
azukiazusa1
2
660
赤裸々に公開。 TSKaigiのオフシーズン
takezoux2
0
140
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
How GitHub (no longer) Works
holman
314
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
GraphQLとの向き合い方2022年版
quramy
46
14k
What's in a price? How to price your products and services
michaelherold
245
12k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing for humans not robots
tammielis
253
25k
4 Signs Your Business is Dying
shpigford
184
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
RailsConf 2023
tenderlove
30
1.1k
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 !!!