Upgrade to Pro — share decks privately, control downloads, hide ads and more …

You Need to know SSR

You Need to know SSR

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

Yosuke Furukawa
PRO

June 17, 2017
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

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