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
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
3.8k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
190
Removing Corepack
yosuke_furukawa
PRO
9
1.5k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.6k
Strip Types と Storage
yosuke_furukawa
PRO
4
370
Module Harmony について
yosuke_furukawa
PRO
3
1.6k
LTのやり方
yosuke_furukawa
PRO
16
2.4k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
750
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.8k
Other Decks in Programming
See All in Programming
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
120
Formの複雑さに立ち向かう
bmthd
1
940
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
900
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
170
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
540
AIプログラミング雑キャッチアップ
yuheinakasaka
19
4.7k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
1.1k
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
910
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
150
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
710
PEPCは何を変えようとしていたのか
ken7253
3
270
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building a Scalable Design System with Sketch
lauravandoore
461
33k
It's Worth the Effort
3n
184
28k
Designing for Performance
lara
604
68k
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 !!!