You Need to know SSR

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
   ݄߸

4. None
5. None

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 !!!