You Need to know SSR - Speaker Deck

You Need to know SSR

by Yosuke Furukawa

Slide 1

Slide 1 text

You need to know SSR 2017/06/17 ng-japan @ Shinagawa MS Ofﬁce

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

8FC%#13&44݄߸

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

͍ͭ΋͸3FBDUͷਓ͚ͩͲ "OHVMBSʹࠢചΓ·ͨ͠ʂʂ

Slide 7

Slide 7 text

Server Side Rendering

Slide 8

Slide 8 text

Server Side Rendering 4FSWFS 1BHF3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI%BUB %#"1* 3FOEFS)5.- (FUQBHFQBSUT

Slide 9

Slide 9 text

Server Side Rendering 4FSWFS 1BHF3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI%BUB %#"1* 3FOEFS)5.- (FUQBHFQBSUT 3FOEFSFS $PNQPOFOUT 5FNQMBUFT 3FOEFS)5.-XJUITBNF DMJFOUTFSWFSSFOEFSMPHJD

Slide 10

Slide 10 text

Why we need Server Side Rendering?

Slide 11

Slide 11 text

SEO

Slide 12

Slide 12 text

SEO

Slide 13

Slide 13 text

SEO Ϋϩʔϥ͕+4Λ࣮ߦͰ͖Δͱ͸ ͍͑ɺͦͷ+4͕ͪΌΜͱಈ͘อ ূ͸ͳ͍ɻ

Slide 14

Slide 14 text

SEO͸ॏཁɺͰ΋ຊ୊͸࣍

Slide 15

Slide 15 text

First View Performance

Slide 16

Slide 16 text

ͦ΋ͦ΋First ViewͱҰޱʹ ݴͬͯ΋छྨ͕͋Δ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU 'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE

Slide 17

Slide 17 text

First View Performance • SSR ʹ͓͚Δ First View ͷվળͱ͸ɺ͜ͷ First Meaningful Paint ·ͰΛࢦ͢ɻ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU

Slide 18

Slide 18 text

First View Performance • First Meaningful PaintҎ߱ͷվળ͸Service Worker΍HTTP2ͳͲผͳ΍Γํ͕͋Δɻ 'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE

Slide 19

Slide 19 text

Client Side Rendering ͷΈͰͷಈ͖

Slide 20

Slide 20 text

Client Side Rendering ͷΈͷ ৔߹ • First Meaningful Paint ͱ Time To Interact ͷ λΠϛϯά͕΄ͱΜͲಉ͡ɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading..

Slide 21

Slide 21 text

Client Side Rendering ͷΈͷ ৔߹ • ݴ͍׵͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful Paint ·Ͱ͕௕͘ͳΔɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading..

Slide 22

Slide 22 text

Client Side Rendering ͷΈͷ ৔߹ • ݴ͍׵͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful Paint ·Ͱ͕௕͘ͳΔɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading.. Ϣʔβʔ͸ݟ͔͑ͯΒૢ࡞͢Δ 'JSTU.FBOJOHGVM1BJOU͕ग़͔ͯΒ*OUFSBDU ͢Δ ͷͰɺ͜ͷ$MJFOU4JEF3FOEFSJOH͚ͩͰ͸࣌ؒతʹແବ͕ଟ͍ɻ

Slide 23

Slide 23 text

ͦ͜Ͱ Server Side Rendering

Slide 24

Slide 24 text

/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU ࠷ॳ͔ΒσʔλΛຒΊࠐΜͩঢ়ଶͰ)5.-ʹ͢Δ ʢ4FSWFS4JEF3FOEFSJOHʣ

Slide 25

Slide 25 text

DEMO

Slide 26

Slide 26 text

͡Ό͋ SSR ʹ͢Ε͹͍͍͔ͱ ͍͏ͱ࣮͸ͦ͏୯७Ͱ΋ͳ͍

Slide 27

Slide 27 text

Server Side Rendering Critical Points • HTMLੜ੒͕CPUΠϯςϯγϒλεΫʹͳΔɻ • ·ͨNode.jsͰ࣮ߦ͢ΔͱϝΠϯϧʔϓΛϒϩοΫ͢Δ(গͳ͘ͱ΋ݱ࣌ ఺ͷReactͰ͸ɺAngular΋ಉ༷)ɻ • ΋͔ͨ͠͠ΒϒϩοΩϯά͸࣍ͷReactͷΞοϓσʔτͰͳΜͱ͔ͳ Δ͔΋(https://github.com/facebook/react/pull/9710)ʁ • CPUΠϯςϯγϒλεΫʹͳΓɺCPUෛՙ͕ߴ·Δͱαʔό͕ॲཧ͖͠ Εͳ͘ͳΔʢෛՙܰݮ͢ΔͨΊʹαʔό୆਺૿΍͞ͳ͍ͱ͍͚ͳ͘ͳΔʣ

Slide 28

Slide 28 text

Server Side Rendering Critical Points https://speakerdeck.com/yoshidan/nodefest2016

Slide 29

Slide 29 text

Server Side Rendering Critical Points

Slide 30

Slide 30 text

Server Side Rendering Critical Points Componentࢦ޲Ͱ͖ͪΜͱComponentΛ෼͚ͯ ࣮૷͢Ε͹͢Δ΄ͲHTMLੜ੒ίετ͕ߴ͘ͳΔ

Slide 31

Slide 31 text

Server Side Rendering Critical Points • React ͷ৔߹ɿ • renderToString ͷ࣌ʹҰͭҰͭͷComponentͷΠϯελϯεΛੜ੒͠ɺreact- idΛ߱Γɺ࠷ޙʹHTMLͷνΣοΫαϜΛܭࢉͤ͞Δඞཁ͕͋Δ(Clientͷ Virtual DOM ͱͷ੔߹ੑΛ߹ΘͤΔͨΊ)ɻ • Angular ͷ৔߹ɿ • VDOMͰ͸ͳ͍ͷͰɺidΛৼΔඞཁ͸ͳ͍͕ɺrenderModuleFactory ͷ࣌ʹຖ ճHTMLύʔεॲཧͯ͠ΔʢϓϦίϯύΠϧ͢Ε͹ίετݮΔʣ • rxjs ͷ subscribeToResult ͕ॏͦ͏ (Routerͷॲཧ?)

Slide 32

Slide 32 text

Server Side Rendering Critical Points • React ͷ৔߹ɿ • renderToString ͷ࣌ʹҰͭҰͭͷComponentͷΠϯελϯεΛੜ੒͠ɺ react-idΛ߱Γɺ࠷ޙʹHTMLͷνΣοΫαϜΛܭࢉͤ͞Δඞཁ͕͋Δ (ClientͷVirtual DOM ͱͷ੔߹ੑΛ߹ΘͤΔͨΊ)ɻ • Angular ͷ৔߹ɿ • VDOMͰ͸ͳ͍ͷͰɺidΛৼΔඞཁ͸ͳ͍͕ɺrenderModuleFactory ͷ ࣌ʹຖճHTMLύʔεॲཧͯ͠Δʢಉ͘͡Componentࢦ޲Ͱ෼ׂ͞ΕΕ͹ ͞ΕΔ΄ͲɺCPUෛՙ͕ߴͦ͏ʣ ͭ·ΓɺͲͬͪ΋ಉ͡Α͏ʹCPUෛՙ͕͔͔Δɻ

Slide 33

Slide 33 text

ݱ࣮ղ

Slide 34

Slide 34 text

ݱ࣮Ͱͷઓུ͸2ͭ • HTMLੜ੒݁ՌΛΩϟογϡͤ͞Δ • above the fold (εΫϩʔϧ͠ͳ͍ͰݟΕΔൣ ғ)͚ͩHTMLΛϨϯμϦϯάͯ͠ฦ͢

Slide 35

Slide 35 text

ݱ࣮Ͱͷઓུ͸2ͭ • HTMLੜ੒݁ՌΛΩϟογϡͤ͞Δ • above the fold (εΫϩʔϧ͠ͳ͍ͰݟΕΔൣ ғ)͚ͩHTMLΛϨϯμϦϯάͯ͠ฦ͢ ͨͩ͜͠Ε͸྆ํڞɺॾਕͷ݋

Slide 36

Slide 36 text

Ωϟογϡ

Slide 37

Slide 37 text

Ωϟογϡ • ੜ੒ࡁΈͷHTMLΛ࡞ͬͨޙͰΩϟογϡ͢Δ • CPUίετͷߴ͍ॲཧ͸͍͍ͤͥ࠷ॳͷҰ౓ ͚ͩ 3FEJT.FNEJO NFNPSZ$BDIF

Slide 38

Slide 38 text

Ωϟογϡ໰୊ • Ωϟογϡͨ͠৘ใΛ͍ͭpurge͢Δͷ͔໰୊ ʢߋ৽ස౓ߴ͍΋ͷ͸Ωϟογϡແҙຯʣ • Redis/Memcached/LRU CacheͳͲͲ͜ʹอ ଘ͢Δͷ͔໰୊ • ͦ΋ͦ΋ಈతͳίϯςϯπ͸ΩϟογϡͰ͖ ͳ͍໰୊

Slide 39

Slide 39 text

Ωϟογϡ໰୊ • Ωϟογϡͨ͠৘ใΛ͍ͭpurge͢Δͷ͔໰୊ ʢߋ৽ස౓ߴ͍΋ͷ͸Ωϟογϡແҙຯʣ • Redis/Memcached/LRU CacheͳͲͲ͜ʹอ ଘ͢Δͷ͔໰୊ • ͦ΋ͦ΋ಈతͳίϯςϯπ͸ΩϟογϡͰ͖ ͳ͍໰୊ ͜ͷล͸ۜͷ஄ؙͳ͍ɺαʔϏεʹΑͬͯಛੑ͕ҧ ͏ͷͰͦΕͧΕαʔϏε͝ͱʹؤுΔඞཁ͋Γɻ

Slide 40

Slide 40 text

above the fold rendering

Slide 41

Slide 41 text

above the fold rendering • ݟ͑Δൣғ͚ͩαʔόαΠυϨϯμϦϯάͯ͠ɺ ݟ͑ͯͳ͍ൣғ͸ΫϥΠΞϯταΠυϨϯμ Ϧϯά͢Δɻ 443 $43

Slide 42

Slide 42 text

above the fold rendering • ͜Ε΋ݟ͑ͯͳ͍෦෼͸࣮͸SEO͕ͪΌΜͱ ࣮ߦ͞ΕΔͱ͸ݶΒͳ͍ɻ • Time To Interact Ͱ͖Δ·Ͱ εΫϩʔϧ͢Δͱ Կ΋ͳ͍ঢ়ଶʹͳΔɻ ✗

Slide 43

Slide 43 text

above the fold rendering • ͜Ε΋ݟ͑ͯͳ͍෦෼͸࣮͸SEO͕ͪΌΜͱ ࣮ߦ͞ΕΔͱ͸ݶΒͳ͍ɻ • Time To Interact Ͱ͖Δ·Ͱ εΫϩʔϧ͢Δͱ Կ΋ͳ͍ঢ়ଶʹͳΔɻ ͜Ε΋αʔϏεಛੑͰڐ༰Ͱ͖Δ΋ͷͳͷ͔͸ݕ౼ ͷ༨஍͋Γ

Slide 44

Slide 44 text

Server Side Rendering͕Ͱ ͖Ε͹First Meaningful Paint Λߴ଎ԽͰ͖Δ͕ɺ࠷దԽ͢ Δʹ͸໘౗΋ଟ͍

Slide 45

Slide 45 text

ٯʹݴ͑͹ɺ"ͪΌΜͱ" ࣮ࢪ͢Δͱ First Meaningful Paint Λߴ ଎Խͭͭ͠ɺSPAͷྑ͍ॴͲ Γ͕࣮ݱͰ͖Δɻ

Slide 46

Slide 46 text

Users Voice

Slide 47

Slide 47 text

Users Voice Ͳͷҙݟ΋ཁ໿͢ΔͱɺFirst Meaningful Paint ͸ ࣺͯͯͦͷޙͷTime To Interact·ͰΛߴ଎Խ͢Ε͹ OKͰ͠ΐʁͱ͍͏࿩(΋͘͠͸ະདྷͷWeb΁ͷظ଴)

Slide 48

Slide 48 text

͜ΕΒ΁ͷAnswer: First Meaningful Paint Λ ࣺͯͯྑ͍ͳΒSSR͸ ΍Βͳͯ͘OK

Slide 49

Slide 49 text

First Meaningful Paint Λ ߴ଎Խ͢Δ΂͖͔Ͳ͏͔͸ αʔϏεಛੑʹґଘ͢Δ ʢ༧໿ࡁΈͷډञ԰ͱ͔ඒ༰ Ӄ୳ͯ͠Δ࣌ʹදࣔ஗͍ͱக ໋తʣ

Slide 50

Slide 50 text

͋ͱݸਓతʹ͸ύϑΥʔϚϯ εͰ͸ଥڠͨ͘͠ͳ͍

Slide 51

Slide 51 text

Performance͸ऴΘΓ͕ͳ͍ ֤ॴͰৗʹվળͷඞཁ͕͋Δ

Slide 52

Slide 52 text

࠷ۙͷWebͷτϨϯυ͸ First Meaningful Paint ͷߴ଎Խ͸΋ͪΖΜɺͦͩ͜ ͚͡Όͳ͘ͳ͖͍ͬͯͯΔɻ

Slide 53

Slide 53 text

'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

Slide 54

Slide 54 text

'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

Slide 55

Slide 55 text

͜Ε͚ͩ͡Όͳ͍

Slide 56

Slide 56 text

/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU 4FSWFSͰͷϨεϙϯεվળ %#ΫΤϦνϡʔχϯά΍ωοτϫʔΫվળ౳

Slide 57

Slide 57 text

/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU $SJUJDBM3FOEFSJOH$44Ͱͷௐ੔ɺ -PBEJOH*OEJDBUPSʹΑΔ଴ͨͤͳ͍޻෉

Slide 58

Slide 58 text

/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU ॳظσʔλΛGFUDI͢ΔͷͰ͸ͳ͘ɺ+40/ͱͯ͠ຒΊࠐΉ ΋͘͠͸ɺॳظσʔλΛ)5.-ʹ͢Δ ʢ4FSWFS4JEF3FOEFSJOHʣ

Slide 59

Slide 59 text

'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE BCPWFUIFGPME֎ͷը૾ͷ஗ԆಡΈࠐΈ ޮ཰తͳϑΥʔϚοτͷબఆ

Slide 60

Slide 60 text

'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE +4ͷ஗Ԇϩʔυɺ+4DPEFTQMJUUJOHͳͲͰͷෆཁͳίʔυ ͷ࡟আ

Slide 61

Slide 61 text

'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE )551΍3FTPVSDF)JOUTʹΑΔϩʔυվળ

Slide 62

Slide 62 text

'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE )551΍3FTPVSDF)JOUTʹΑΔϩʔυվળ ύϑΥʔϚϯεͷվળ͸େมʂʂʂ Ͱ΋ͦ͜ʹݸਓతʹ͸ଥڠͨ͘͠ͳ͍

Slide 63

Slide 63 text

·ͱΊ

Slide 64

Slide 64 text

·ͱΊ • Server Side Rendering ͸ SEO ͚ͩ͡Όͳ͍ɺॳظදࣔ( First Meaningful Paint )ʹޮՌతͳࢪࡦ • ࣮ࡍʹ࢖͓͏ͱ͢ΔͱɺCPUෛՙ͕ߴ͍ॲཧͳͷͰɺαʔόଆ Ͱ৭ʑHack͕ඞཁ (Ωϟογϡ΍ATFϨϯμϦϯά౳) • Server Side Rendering ͸αʔϏεͷಛੑ࣍ୈͰ͠ͳͯ͘΋ྑ͍ • ύϑΥʔϚϯεʹ͸ݶΓ͕ͳ͍ɺݸਓతʹ͸͔ͩΒͱ͍ͬͯଥ ڠͨ͘͠ͳ͍ɻ

Slide 65

Slide 65 text

Thank you !!!