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

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.

React Amsterdam

April 21, 2016
Tweet

More Decks by React Amsterdam

Other Decks in Technology

Transcript

  1. Mastering

    Server Rendered

    React
    React Amsterdam
    16 april 2016
    1
    Sven Anders Robbestad

    View full-size slide

  2. I work at Inmeta consulting
    3

    View full-size slide

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

    View full-size slide

  4. Server-rendered apps
    5

    View full-size slide

  5. You may know it as isomorphic
    6

    View full-size slide

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

    View full-size slide

  7. 8
    But what is it?

    View full-size slide

  8. It's about sharing code between

    your server code and your browser

    code
    9

    View full-size slide

  9. It's also about delivering content
    faster
    10

    View full-size slide

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

    View full-size slide

  11. When does a user leave your
    site?
    12

    View full-size slide

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

    View full-size slide

  13. Answer:
    When your site is slow
    14

    View full-size slide

  14. So when is JavaScript slow?
    15

    View full-size slide

  15. It's slow when...
    16

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. ...the user is stuck on a computer
    they don't control (school, library).
    20

    View full-size slide

  20. ...the user trying to download your
    site to read away from an Internet
    connection
    21

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. ...the user is using using adblock and
    you've named a critical JS bundle
    with something related to ads
    24

    View full-size slide

  24. ...when your CDN goes down
    25

    View full-size slide

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

    View full-size slide

  26. Rendering your content before you
    serve them makes:

    Google happy
    Slow computers happy
    Smart phones happy
    NoScript happy
    27

    View full-size slide

  27. Best of all

    It makes you happy
    28

    View full-size slide

  28. Let's make it happen
    29

    View full-size slide

  29. This is what we'll make
    30

    View full-size slide

  30. Make a node/express server

    31

    View full-size slide

  31. Import routes

    32

    View full-size slide

  32. Import your API method(s)

    33

    View full-size slide

  33. Perform fetch on route change

    '
    '
    '
    34

    View full-size slide

  34. Perform fetch on route change

    35

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. Add streaming to make it faster

    38

    View full-size slide

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

    View full-size slide