You Need to know SSR

ng-japan で発表した Server Side Rendering の資料です。

Transcript

1. You need to know SSR 2017/06/17 ng-japan @ Shinagawa MS Office
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. 8FC %#
   13&44
   ݄߸
6. ͍ͭ΋͸3FBDUͷਓ͚ͩͲ
   "OHVMBSʹࠢചΓ·ͨ͠ʂʂ
7. Server Side Rendering
8. Server Side Rendering 4FSWFS 1BHF
   3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI
   %BUB %#
   
   "1* 3FOEFS
   )5.- (FU
   QBHF
   QBSUT
9. Server Side Rendering 4FSWFS 1BHF
   3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI
   %BUB %#
   
   "1* 3FOEFS
   )5.- (FU
   QBHF
   QBSUT 3FOEFSFS $PNQPOFOUT 5FNQMBUFT 3FOEFS
   )5.-
   XJUI
   TBNF
   DMJFOUTFSWFS
   SFOEFS
   MPHJD
10. Why we need Server Side Rendering?
11. SEO
12. SEO
13. SEO Ϋϩʔϥ͕+4Λ࣮ߦͰ͖Δͱ͸ ͍͑ɺͦͷ+4͕ͪΌΜͱಈ͘อ ূ͸ͳ͍ɻ
14. SEO͸ॏཁɺͰ΋ຊ୊͸࣍
15. First View Performance
16. ͦ΋ͦ΋First ViewͱҰޱʹ ݴͬͯ΋छྨ͕͋Δ /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ 5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'VMMZ
    -PBEFE
    BMM
    SFTPVSDFT
    BSF
    MPBEFE
17. First View Performance • SSR ʹ͓͚Δ First View ͷվળͱ͸ɺ͜ͷ First Meaningful Paint ·ͰΛࢦ͢ɻ /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU
18. First View Performance • First Meaningful PaintҎ߱ͷվળ͸Service Worker΍HTTP2ͳͲผͳ΍Γํ͕͋Δɻ 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ 5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'VMMZ
    -PBEFE
    BMM
    SFTPVSDFT
    BSF
    MPBEFE
19. Client Side Rendering ͷΈͰͷಈ͖
20. Client Side Rendering ͷΈͷ ৔߹ • First Meaningful Paint ͱ Time To Interact ͷ λΠϛϯά͕΄ͱΜͲಉ͡ɻ 'JSTU
    .FBOJOHGVM
    1BJOU
    
    5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'JSTU
    $POUFOUGVM
    1BJOU Loading..
21. Client Side Rendering ͷΈͷ ৔߹ • ݴ͍׵͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful Paint ·Ͱ͕௕͘ͳΔɻ 'JSTU
    .FBOJOHGVM
    1BJOU
    
    5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'JSTU
    $POUFOUGVM
    1BJOU Loading..
22. Client Side Rendering ͷΈͷ ৔߹ • ݴ͍׵͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful Paint ·Ͱ͕௕͘ͳΔɻ 'JSTU
    .FBOJOHGVM
    1BJOU
    
    5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'JSTU
    $POUFOUGVM
    1BJOU Loading.. Ϣʔβʔ͸ݟ͔͑ͯΒૢ࡞͢Δ 'JSTU
    .FBOJOHGVM
    1BJOU
    ͕ग़͔ͯΒ*OUFSBDU ͢Δ ͷͰɺ͜ͷ$MJFOU
    4JEF
    3FOEFSJOH͚ͩͰ͸࣌ؒతʹແବ͕ଟ͍ɻ
23. ͦ͜Ͱ Server Side Rendering
24. /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU ࠷ॳ͔ΒσʔλΛຒΊࠐΜͩঢ়ଶͰ)5.-ʹ͢Δ
    ʢ4FSWFS
    4JEF
    3FOEFSJOHʣ
25. DEMO
26. ͡Ό͋ SSR ʹ͢Ε͹͍͍͔ͱ ͍͏ͱ࣮͸ͦ͏୯७Ͱ΋ͳ͍
27. Server Side Rendering Critical Points • HTMLੜ੒͕CPUΠϯςϯγϒλεΫʹͳΔɻ • ·ͨNode.jsͰ࣮ߦ͢ΔͱϝΠϯϧʔϓΛϒϩοΫ͢Δ(গͳ͘ͱ΋ݱ࣌ ఺ͷReactͰ͸ɺAngular΋ಉ༷)ɻ • ΋͔ͨ͠͠ΒϒϩοΩϯά͸࣍ͷReactͷΞοϓσʔτͰͳΜͱ͔ͳ Δ͔΋(https://github.com/facebook/react/pull/9710)ʁ • CPUΠϯςϯγϒλεΫʹͳΓɺCPUෛՙ͕ߴ·Δͱαʔό͕ॲཧ͖͠ Εͳ͘ͳΔʢෛՙܰݮ͢ΔͨΊʹαʔό୆਺૿΍͞ͳ͍ͱ͍͚ͳ͘ͳΔʣ
28. Server Side Rendering Critical Points https://speakerdeck.com/yoshidan/nodefest2016
29. Server Side Rendering Critical Points
30. Server Side Rendering Critical Points Componentࢦ޲Ͱ͖ͪΜͱComponentΛ෼͚ͯ ࣮૷͢Ε͹͢Δ΄ͲHTMLੜ੒ίετ͕ߴ͘ͳΔ
31. Server Side Rendering Critical Points • React ͷ৔߹ɿ • renderToString ͷ࣌ʹҰͭҰͭͷComponentͷΠϯελϯεΛੜ੒͠ɺreact- idΛ߱Γɺ࠷ޙʹHTMLͷνΣοΫαϜΛܭࢉͤ͞Δඞཁ͕͋Δ(Clientͷ Virtual DOM ͱͷ੔߹ੑΛ߹ΘͤΔͨΊ)ɻ • Angular ͷ৔߹ɿ • VDOMͰ͸ͳ͍ͷͰɺidΛৼΔඞཁ͸ͳ͍͕ɺrenderModuleFactory ͷ࣌ʹຖ ճHTMLύʔεॲཧͯ͠ΔʢϓϦίϯύΠϧ͢Ε͹ίετݮΔʣ • rxjs ͷ subscribeToResult ͕ॏͦ͏ (Routerͷॲཧ?)
32. Server Side Rendering Critical Points • React ͷ৔߹ɿ • renderToString ͷ࣌ʹҰͭҰͭͷComponentͷΠϯελϯεΛੜ੒͠ɺ react-idΛ߱Γɺ࠷ޙʹHTMLͷνΣοΫαϜΛܭࢉͤ͞Δඞཁ͕͋Δ (ClientͷVirtual DOM ͱͷ੔߹ੑΛ߹ΘͤΔͨΊ)ɻ • Angular ͷ৔߹ɿ • VDOMͰ͸ͳ͍ͷͰɺidΛৼΔඞཁ͸ͳ͍͕ɺrenderModuleFactory ͷ ࣌ʹຖճHTMLύʔεॲཧͯ͠Δʢಉ͘͡Componentࢦ޲Ͱ෼ׂ͞ΕΕ͹ ͞ΕΔ΄ͲɺCPUෛՙ͕ߴͦ͏ʣ ͭ·ΓɺͲͬͪ΋ಉ͡Α͏ʹCPUෛՙ͕͔͔Δɻ
33. ݱ࣮ղ
34. ݱ࣮Ͱͷઓུ͸2ͭ • HTMLੜ੒݁ՌΛΩϟογϡͤ͞Δ • above the fold (εΫϩʔϧ͠ͳ͍ͰݟΕΔൣ ғ)͚ͩHTMLΛϨϯμϦϯάͯ͠ฦ͢
35. ݱ࣮Ͱͷઓུ͸2ͭ • HTMLੜ੒݁ՌΛΩϟογϡͤ͞Δ • above the fold (εΫϩʔϧ͠ͳ͍ͰݟΕΔൣ ғ)͚ͩHTMLΛϨϯμϦϯάͯ͠ฦ͢ ͨͩ͜͠Ε͸྆ํڞɺॾਕͷ݋
36. Ωϟογϡ
37. Ωϟογϡ • ੜ੒ࡁΈͷHTMLΛ࡞ͬͨޙͰΩϟογϡ͢Δ • CPUίετͷߴ͍ॲཧ͸͍͍ͤͥ࠷ॳͷҰ౓ ͚ͩ 3FEJT
    
    .FNE
    
    JO
    NFNPSZ
    $BDIF
38. Ωϟογϡ໰୊ • Ωϟογϡͨ͠৘ใΛ͍ͭpurge͢Δͷ͔໰୊ ʢߋ৽ස౓ߴ͍΋ͷ͸Ωϟογϡແҙຯʣ • Redis/Memcached/LRU CacheͳͲͲ͜ʹอ ଘ͢Δͷ͔໰୊ • ͦ΋ͦ΋ಈతͳίϯςϯπ͸ΩϟογϡͰ͖ ͳ͍໰୊
39. Ωϟογϡ໰୊ • Ωϟογϡͨ͠৘ใΛ͍ͭpurge͢Δͷ͔໰୊ ʢߋ৽ස౓ߴ͍΋ͷ͸Ωϟογϡແҙຯʣ • Redis/Memcached/LRU CacheͳͲͲ͜ʹอ ଘ͢Δͷ͔໰୊ • ͦ΋ͦ΋ಈతͳίϯςϯπ͸ΩϟογϡͰ͖ ͳ͍໰୊ ͜ͷล͸ۜͷ஄ؙͳ͍ɺαʔϏεʹΑͬͯಛੑ͕ҧ ͏ͷͰͦΕͧΕαʔϏε͝ͱʹؤுΔඞཁ͋Γɻ
40. above the fold rendering
41. above the fold rendering • ݟ͑Δൣғ͚ͩαʔόαΠυϨϯμϦϯάͯ͠ɺ ݟ͑ͯͳ͍ൣғ͸ΫϥΠΞϯταΠυϨϯμ Ϧϯά͢Δɻ 443 $43
42. above the fold rendering • ͜Ε΋ݟ͑ͯͳ͍෦෼͸࣮͸SEO͕ͪΌΜͱ ࣮ߦ͞ΕΔͱ͸ݶΒͳ͍ɻ • Time To Interact Ͱ͖Δ·Ͱ εΫϩʔϧ͢Δͱ Կ΋ͳ͍ঢ়ଶʹͳΔɻ ✗
43. above the fold rendering • ͜Ε΋ݟ͑ͯͳ͍෦෼͸࣮͸SEO͕ͪΌΜͱ ࣮ߦ͞ΕΔͱ͸ݶΒͳ͍ɻ • Time To Interact Ͱ͖Δ·Ͱ εΫϩʔϧ͢Δͱ Կ΋ͳ͍ঢ়ଶʹͳΔɻ ͜Ε΋αʔϏεಛੑͰڐ༰Ͱ͖Δ΋ͷͳͷ͔͸ݕ౼ ͷ༨஍͋Γ
44. Server Side Rendering͕Ͱ ͖Ε͹First Meaningful Paint Λߴ଎ԽͰ͖Δ͕ɺ࠷దԽ͢ Δʹ͸໘౗΋ଟ͍
45. ٯʹݴ͑͹ɺ"ͪΌΜͱ" ࣮ࢪ͢Δͱ First Meaningful Paint Λߴ ଎Խͭͭ͠ɺSPAͷྑ͍ॴͲ Γ͕࣮ݱͰ͖Δɻ
46. Users Voice
47. Users Voice Ͳͷҙݟ΋ཁ໿͢ΔͱɺFirst Meaningful Paint ͸ ࣺͯͯͦͷޙͷTime To Interact·ͰΛߴ଎Խ͢Ε͹ OKͰ͠ΐʁͱ͍͏࿩(΋͘͠͸ະདྷͷWeb΁ͷظ଴)
48. ͜ΕΒ΁ͷAnswer: First Meaningful Paint Λ ࣺͯͯྑ͍ͳΒSSR͸ ΍Βͳͯ͘OK
49. First Meaningful Paint Λ ߴ଎Խ͢Δ΂͖͔Ͳ͏͔͸ αʔϏεಛੑʹґଘ͢Δ ʢ༧໿ࡁΈͷډञ԰ͱ͔ඒ༰ Ӄ୳ͯ͠Δ࣌ʹදࣔ஗͍ͱக ໋తʣ
50. ͋ͱݸਓతʹ͸ύϑΥʔϚϯ εͰ͸ଥڠͨ͘͠ͳ͍
51. Performance͸ऴΘΓ͕ͳ͍ ֤ॴͰৗʹվળͷඞཁ͕͋Δ
52. ࠷ۙͷWebͷτϨϯυ͸ First Meaningful Paint ͷߴ଎Խ͸΋ͪΖΜɺͦͩ͜ ͚͡Όͳ͘ͳ͖͍ͬͯͯΔɻ
53. 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ 5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'VMMZ
    -PBEFE
    BMM
    SFTPVSDFT
    BSF
    MPBEFE 'JSTU
    .FBOJOHGVM
    1BJOU
    ͔Β
    5JNF
    5P
    *OUFSBDUJWF
    ͕཭Ε͗͢Δͱ
    ࠓ౓͸ݟ͑ͯΔͷʹૢ࡞Ͱ͖ͳ͍͕࣌ؒ૿͑ͯετϨεʹܨ͕Δ https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2- page-load-performance-33b932d97cf2
54. 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ 5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'VMMZ
    -PBEFE
    BMM
    SFTPVSDFT
    BSF
    MPBEFE ͳͷͰɺ࠷ۙ͸
    $PEF
    4QMJUUJOH
    ͯ͠ͳΔ΂͘
    +4
    ࣗମΛܰ͘͢Δɺ)551ͷ 164)Λ͏·͘࢖ͬͯ࣍ͷϦιʔεΛࣄલΩϟογϡ͓ͯ͘͠ͳͲͷ5JNF
    5P
    *OUFSBDU·ͰΛ೗Կʹ଎͘͢Δ͔ͷվળࡦ͕ग़͍ͯΔɻ https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2- page-load-performance-33b932d97cf2
55. ͜Ε͚ͩ͡Όͳ͍
56. /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU 4FSWFSͰͷϨεϙϯεվળ
    %#ΫΤϦνϡʔχϯά΍ωοτϫʔΫվળ౳
57. /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU $SJUJDBM
    3FOEFSJOH
    $44Ͱͷௐ੔ɺ
    -PBEJOH
    *OEJDBUPSʹΑΔ଴ͨͤͳ͍޻෉
58. /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU ॳظσʔλΛGFUDI͢ΔͷͰ͸ͳ͘ɺ+40/ͱͯ͠ຒΊࠐΉ
    
    ΋͘͠͸ɺॳظσʔλΛ)5.-ʹ͢Δ
    ʢ4FSWFS
    4JEF
    3FOEFSJOHʣ
59. 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ 5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'VMMZ
    -PBEFE
    BMM
    SFTPVSDFT
    BSF
    MPBEFE BCPWF
    UIF
    GPME֎ͷը૾ͷ஗ԆಡΈࠐΈ
    ޮ཰తͳϑΥʔϚοτͷબఆ
60. 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ 5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'VMMZ
    -PBEFE
    BMM
    SFTPVSDFT
    BSF
    MPBEFE +4ͷ஗Ԇϩʔυɺ+4
    DPEF
    TQMJUUJOHͳͲͰͷෆཁͳίʔυ ͷ࡟আ
61. 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ 5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'VMMZ
    -PBEFE
    BMM
    SFTPVSDFT
    BSF
    MPBEFE )551
    ΍
    3FTPVSDF
    )JOUT
    ʹΑΔϩʔυվળ
62. 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ 5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'VMMZ
    -PBEFE
    BMM
    SFTPVSDFT
    BSF
    MPBEFE )551
    ΍
    3FTPVSDF
    )JOUT
    ʹΑΔϩʔυվળ ύϑΥʔϚϯεͷվળ͸େมʂʂʂ Ͱ΋ͦ͜ʹݸਓతʹ͸ଥڠͨ͘͠ͳ͍
63. ·ͱΊ
64. ·ͱΊ • Server Side Rendering ͸ SEO ͚ͩ͡Όͳ͍ɺॳظදࣔ( First Meaningful Paint )ʹޮՌతͳࢪࡦ • ࣮ࡍʹ࢖͓͏ͱ͢ΔͱɺCPUෛՙ͕ߴ͍ॲཧͳͷͰɺαʔόଆ Ͱ৭ʑHack͕ඞཁ (Ωϟογϡ΍ATFϨϯμϦϯά౳) • Server Side Rendering ͸αʔϏεͷಛੑ࣍ୈͰ͠ͳͯ͘΋ྑ͍ • ύϑΥʔϚϯεʹ͸ݶΓ͕ͳ͍ɺݸਓతʹ͸͔ͩΒͱ͍ͬͯଥ ڠͨ͘͠ͳ͍ɻ
65. Thank you !!!