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

You Need to know SSR

D76231a2114896dfcc7b79ac69558b79?s=47 Yosuke Furukawa
June 17, 2017
Programming
25
26k

You Need to know SSR

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

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa

June 17, 2017
Tweet

More Decks by Yosuke Furukawa

See All by Yosuke Furukawa
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
0
950
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
7
4.9k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
52
25k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
38
12k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
3
1.8k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
4
1.9k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
2
1.8k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
1
1.8k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
60
20k

Other Decks in Programming

See All in Programming
3fe5b2de229709072a61ccc3c6ac9be0?s=48 tsuchinoko
0
100
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
0
230
F9e11bea0c22333596791dd0696f5d4f?s=48 daiksy
1
3.4k
Bb4943c6ae1f841c22da2a2142fd8b49?s=48 umireon
0
170
B3f560d34c14a9113e5024bc34ac26a0?s=48 heyitsmohit
3
310
B03c47042f27235b4ddd97621c02df81?s=48 storz
0
110
D56efd2db811cb782f1458df3888c82a?s=48 mktakuya
0
230
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
180
37b01da9150c1e789f35771b06d36890?s=48 morimorihoge
4
830
249b3122eee454c0a818bfe7851418e4?s=48 fromkk
0
890
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
180
A1eac7e4e8aae73b2f5b8d6dc1c13304?s=48 coyotekojote
0
230

Featured

See All Featured
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
122
16k
24fc194843a71f10949be18d5a692682?s=48 gr2m
86
12k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
262
37k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1352
200k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
208
39k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
212
7.3k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
45
2.3k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
303
40k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
272
32k

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 1BHF3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI%BUB %#"1* 3FOEFS)5.-

    (FUQBHFQBSUT

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

    (FUQBHFQBSUT 3FOEFSFS $PNQPOFOUT 5FNQMBUFT 3FOEFS)5.-XJUITBNF DMJFOUTFSWFSSFOEFSMPHJD

  10. Why we need Server Side Rendering?

  11. SEO

  12. SEO

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

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

  15. First View Performance

  16. ͦ΋ͦ΋First ViewͱҰޱʹ ݴͬͯ΋छྨ͕͋Δ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU

    'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE

  17. First View Performance • SSR ʹ͓͚Δ First View ͷվળͱ͸ɺ͜ͷ First

    Meaningful Paint ·ͰΛࢦ͢ɻ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU

  18. First View Performance • First Meaningful PaintҎ߱ͷվળ͸Service Worker΍HTTP2ͳͲผͳ΍Γํ͕͋Δɻ 'JSTU.FBOJOHGVM 1BJOU

    7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE

  19. Client Side Rendering ͷΈͰͷಈ͖

  20. Client Side Rendering ͷΈͷ ৔߹ • First Meaningful Paint ͱ

    Time To Interact ͷ λΠϛϯά͕΄ͱΜͲಉ͡ɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading..

  21. Client Side Rendering ͷΈͷ ৔߹ • ݴ͍׵͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful

    Paint ·Ͱ͕௕͘ͳΔɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading..

  22. Client Side Rendering ͷΈͷ ৔߹ • ݴ͍׵͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful

    Paint ·Ͱ͕௕͘ͳΔɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading.. Ϣʔβʔ͸ݟ͔͑ͯΒૢ࡞͢Δ 'JSTU.FBOJOHGVM1BJOU͕ग़͔ͯΒ*OUFSBDU ͢Δ ͷͰɺ͜ͷ$MJFOU4JEF3FOEFSJOH͚ͩͰ͸࣌ؒతʹແବ͕ଟ͍ɻ

  23. ͦ͜Ͱ Server Side Rendering

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

  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.FNEJO 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 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

  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

  55. ͜Ε͚ͩ͡Όͳ͍

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

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

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

  59. 'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE BCPWFUIFGPME֎ͷը૾ͷ஗ԆಡΈࠐΈ

    ޮ཰తͳϑΥʔϚοτͷબఆ

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

    ͷ࡟আ

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

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

    ύϑΥʔϚϯεͷվળ͸େมʂʂʂ Ͱ΋ͦ͜ʹݸਓతʹ͸ଥڠͨ͘͠ͳ͍

  63. ·ͱΊ

  64. ·ͱΊ • Server Side Rendering ͸ SEO ͚ͩ͡Όͳ͍ɺॳظදࣔ( First Meaningful

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

  65. Thank you !!!