Sven Anders Robbestad, Inmeta Consulting AS, Oslo — Mastering Server-rendered Apps

Sven Anders Robbestad, Inmeta Consulting AS, Oslo — Mastering Server-rendered Apps

Sven Anders Robbestad, Inmeta Consulting AS, Oslo — Mastering Server-rendered Apps

Creating a fully server-rendered app is perhaps the most intimidating challenge a React dev faces. This talk will show you how to wrap your mind around the React, Express, shared routing and data flow Redux and come out the other end with a fully realised server-rendered app.

5799a3c0434b91ef7e00e730629390f0?s=128

React Amsterdam

April 21, 2016
Tweet

Transcript

  1. Mastering Server Rendered React React Amsterdam 16 april 2016 1

    Sven Anders Robbestad
  2. This is me 2

  3. I work at Inmeta consulting 3

  4. I wrote this book http://bit.ly/reactjsbook 4

  5. Server-rendered apps 5

  6. You may know it as isomorphic 6

  7. 7 ...or you may know it as Universal

  8. 8 But what is it?

  9. It's about sharing code between your server code and your

    browser code 9
  10. It's also about delivering content faster 10

  11. You might as well call it writing Shared code. 11

  12. When does a user leave your site? 12

  13. Page load is critical Every delay make users go away

    13
  14. Answer: When your site is slow 14

  15. So when is JavaScript slow? 15

  16. It's slow when... 16

  17. ...the user is on a slow computer 17

  18. ...the user has a slow connection 18

  19. ...the user is on a smart phone 19

  20. ...the user is stuck on a computer they don't control

    (school, library). 20
  21. ...the user trying to download your site to read away

    from an Internet connection 21
  22. ...that someone is Google cache or the Internet archive 22

  23. ...the user is using NoScript and visits your site 23

  24. ...the user is using using adblock and you've named a

    critical JS bundle with something related to ads 24
  25. ...when your CDN goes down 25

  26. ALL of these problems can be solved with server-rendering Good

    news! 26
  27. Rendering your content before you serve them makes: Google happy

    Slow computers happy Smart phones happy NoScript happy 27
  28. Best of all It makes you happy 28

  29. Let's make it happen 29

  30. This is what we'll make 30

  31. Make a node/express server 31

  32. Import routes 32

  33. Import your API method(s) 33

  34. Perform fetch on route change ' ' ' 34

  35. Perform fetch on route change 35

  36. Advantages Less work on the client = faster render App

    works even if your JS bundle breaks Reuse code from the frontend And if the user has NoScript Or is a bot like Google and Internet Archive 36
  37. Drawbacks Need to write a complex server file Relatively slow

    due to lack of optimisations like cache Need to rely on a fetch method before render 37
  38. Add streaming to make it faster 38

  39. 39

  40. Resources, Q&A • http://bit.ly/isomorphicreact • Out of the box solution:

    fluxible.io • http://bit.ly/reactjsbook My twitter: #svenardocom Tweet from the conference with the hashtag #reactamsterdam 40