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
   

   View Slide

2. Twitter: @yosuke_furukawa
   Github: yosuke-furukawa
   

   View Slide

3. 8FC%#13&44݄߸
   

   View Slide

4. View Slide

5. View Slide

6. ͍ͭ΋͸3FBDUͷਓ͚ͩͲ
   "OHVMBSʹࠢചΓ·ͨ͠ʂʂ
   

   View Slide

7. Server Side Rendering
   

   View Slide

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

   View Slide

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

   View Slide

10. Why we need Server Side
    Rendering?
    

    View Slide

11. SEO
    

    View Slide

12. SEO
    

    View Slide

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

    View Slide

14. SEO͸ॏཁɺͰ΋ຊ୊͸࣍
    

    View Slide

15. First View Performance
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. Client Side Rendering
    ͷΈͰͷಈ͖
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. ͦ͜Ͱ
    Server Side Rendering
    

    View Slide

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

    View Slide

25. DEMO
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. Server Side Rendering
    Critical Points
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. ݱ࣮ղ
    

    View Slide

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

    View Slide

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

    View Slide

36. Ωϟογϡ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. above the fold rendering
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. Users Voice
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

53. '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
    

    View Slide

54. '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
    

    View Slide

55. ͜Ε͚ͩ͡Όͳ͍
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

63. ·ͱΊ
    

    View Slide

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

    View Slide

65. Thank you !!!
    

    View Slide