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
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.2k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
260
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
AIでLINEスタンプを作ってみた
eycjur
1
230
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
170
個人軟體時代
ethanhuang13
0
320
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.5k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
220
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
600
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
1.7k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
540
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
270
Laravel Boost 超入門
fire_arlo
3
220
Featured
See All Featured
How to Ace a Technical Interview
jacobian
279
23k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Facilitating Awesome Meetings
lara
55
6.5k
Automating Front-end Workflow
addyosmani
1370
200k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
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 !!!