Mastering
Server Rendered
React
React Amsterdam
16 april 2016
1
Sven Anders Robbestad
Slide 2
Slide 2 text
This is me
2
Slide 3
Slide 3 text
I work at Inmeta consulting
3
Slide 4
Slide 4 text
I wrote this book
http://bit.ly/reactjsbook
4
Slide 5
Slide 5 text
Server-rendered apps
5
Slide 6
Slide 6 text
You may know it as isomorphic
6
Slide 7
Slide 7 text
7
...or you may know it as Universal
Slide 8
Slide 8 text
8
But what is it?
Slide 9
Slide 9 text
It's about sharing code between
your server code and your browser
code
9
Slide 10
Slide 10 text
It's also about delivering content
faster
10
Slide 11
Slide 11 text
You might as well call it writing
Shared code.
11
Slide 12
Slide 12 text
When does a user leave your
site?
12
Slide 13
Slide 13 text
Page load is critical
Every delay make users go away
13
Slide 14
Slide 14 text
Answer:
When your site is slow
14
Slide 15
Slide 15 text
So when is JavaScript slow?
15
Slide 16
Slide 16 text
It's slow when...
16
Slide 17
Slide 17 text
...the user is on a slow
computer
17
Slide 18
Slide 18 text
...the user has a slow
connection
18
Slide 19
Slide 19 text
...the user is on a smart phone
19
Slide 20
Slide 20 text
...the user is stuck on a computer
they don't control (school, library).
20
Slide 21
Slide 21 text
...the user trying to download your
site to read away from an Internet
connection
21
Slide 22
Slide 22 text
...that someone is Google
cache or the Internet archive
22
Slide 23
Slide 23 text
...the user is using NoScript and
visits your site
23
Slide 24
Slide 24 text
...the user is using using adblock and
you've named a critical JS bundle
with something related to ads
24
Slide 25
Slide 25 text
...when your CDN goes down
25
Slide 26
Slide 26 text
ALL of these problems can be solved with
server-rendering
Good news!
26
Slide 27
Slide 27 text
Rendering your content before you
serve them makes:
Google happy
Slow computers happy
Smart phones happy
NoScript happy
27
Slide 28
Slide 28 text
Best of all
It makes you happy
28
Slide 29
Slide 29 text
Let's make it happen
29
Slide 30
Slide 30 text
This is what we'll make
30
Slide 31
Slide 31 text
Make a node/express server
31
Slide 32
Slide 32 text
Import routes
32
Slide 33
Slide 33 text
Import your API method(s)
33
Slide 34
Slide 34 text
Perform fetch on route change
'
'
'
34
Slide 35
Slide 35 text
Perform fetch on route change
35
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
Add streaming to make it faster
38
Slide 39
Slide 39 text
39
Slide 40
Slide 40 text
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