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.

Transcript

1. Mastering
   
   Server Rendered
   
   React
   React Amsterdam
   16 april 2016
   1
   Sven Anders Robbestad
   

   View Slide

2. This is me
   2
   

   View Slide

3. I work at Inmeta consulting
   3
   

   View Slide

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

   View Slide

5. Server-rendered apps
   5
   

   View Slide

6. You may know it as isomorphic
   6
   

   View Slide

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

   View Slide

8. 8
   But what is it?
   

   View Slide

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

   View Slide

10. It's also about delivering content
    faster
    10
    

    View Slide

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

    View Slide

12. When does a user leave your
    site?
    12
    

    View Slide

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

    View Slide

14. Answer:
    When your site is slow
    14
    

    View Slide

15. So when is JavaScript slow?
    15
    

    View Slide

16. It's slow when...
    16
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. ...when your CDN goes down
    25
    

    View Slide

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

    View Slide

27. Rendering your content before you
    serve them makes:
    
    Google happy
    Slow computers happy
    Smart phones happy
    NoScript happy
    27
    

    View Slide

28. Best of all
    
    It makes you happy
    28
    

    View Slide

29. Let's make it happen
    29
    

    View Slide

30. This is what we'll make
    30
    

    View Slide

31. Make a node/express server
    
    31
    

    View Slide

32. Import routes
    
    32
    

    View Slide

33. Import your API method(s)
    
    33
    

    View Slide

34. Perform fetch on route change
    
    '
    '
    '
    34
    

    View Slide

35. Perform fetch on route change
    
    35
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. Add streaming to make it faster
    
    38
    

    View Slide

39. View Slide

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
    

    View Slide