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