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

You Need to know SSR

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

You Need to know SSR

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

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa
PRO

June 17, 2017
Tweet

More Decks by Yosuke Furukawa

See All by Yosuke Furukawa
Node.js 最新動向 TFCon 2022
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
6
3k
Node.js / Deno 徹底討論の時のスライド
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
2
1.9k
Browser の話
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
3
200
A Philosophy of Software Design 前半
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
24
6.2k
開発組織の持続可能性について
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
15
9.4k
How I run JS / Web Community
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
0
1.8k
性能に関する考え方
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
7
6k
レビューの仕方
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
56
28k
フロントエンドテストプラクティス in open 8
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
39
13k

Other Decks in Programming

See All in Programming
プログラミングを勉強したいと言われたら
6dd39716ef7dde18a609703e8e26b7ec?s=48 yuba_4
0
430
코드 품질 1% 올리기
354271902cd8ba2762d05b251dfa0f84?s=48 pluu
1
1k
モデリングの費用対効果
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
PRO
4
970
You CANt teach an old dog new tricks
Bd5b8981a308c94b642befb656d8cf8f?s=48 michaelbukachi
0
120
CLI構築のススメ
1bf2570004ba1a6261e5a252deef2719?s=48 nyankotaro
1
260
Quartoを使ってみませんか / quarto_get_started
D12a80cab206033a820ccff8319f957b?s=48 s_uryu
2
410
byte列のbit表現を得るencodingライブラリ作った
66487f93d23ed4f64752cffbafdb938a?s=48 convto
1
200
脱オブジェクト指向講座(5分LT資料)
9e840766611f942c7c0a9ad6987a5d78?s=48 kishida
8
11k
もしも、 上司に鬼退治を命じられたら~プロジェクト計画編~
Fb0a40e5e7a9dc85520f1646fd41eb44?s=48 higuuu
0
300
実録mruby組み込み体験
5b3338b3676d4f7091a575e584f3a4f4?s=48 coe401_
0
110
Nix for Scala folks
08f642741fba006656cb86fb61c160b3?s=48 kubukoz
0
130
バンドル最適化マニアクス at tfconf
3aebd86547bfc5cdb451d5f2f95ed5d8?s=48 mizchi
5
2.4k

Featured

See All Featured
The MySQL Ecosystem @ GitHub 2015
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
11k
Art, The Web, and Tiny UX
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
280
17k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.6k
Fight the Zombie Pattern Library - RWD Summit 2016
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
226
15k
Web Components: a chance to create the future
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
303
40k
Robots, Beer and Maslow
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7.1k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
920
Distributed Sagas: A Protocol for Coordinating Microservices
9128d500301ae51524e887bb680f471d?s=48 caitiem20
315
19k
KATA
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
7
8.6k
Principles of Awesome APIs and How to Build Them.
B47b288784fda77a94aeb234ca743c24?s=48 keavy
113
15k
Code Reviewing Like a Champion
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
506
37k

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