Server rendering-talk

Server Side Rendering Single
Page App with Node and React
for Better UX
Daiwei Lu
@daiweilu

@daiweilu
Agenda
• The UX challenges of building a single page web app
• The impact of server-side rendering on UX
• The code required to leverage React.js on the server
• The drawback of this approach: routing, data model, performance,
complexity
• Useful resources to explore this topic further

@daiweilu
Single Page App (SPA)
• Webpages that can interact with server without refreshing
• Often load data using AJAX and simulate URL changes using
browser history API, a.k.a. pushState()

@daiweilu
Single Page App (SPA)

@daiweilu
Initial Content Delivery Problem

@daiweilu
Render HTML in the Browser
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Title</title>  
<link rel="stylesheet" href="/app.css">  
</head>  
<body>  
<div id="app">  
  
</div>  
<script src="/app.js"></script>  
</body>  
</html>

@daiweilu
“What if we could render some
HTML on the server…”

@daiweilu
app.get('/', function (req, res) { 
res.send('<html>...</html>'); 
});

@daiweilu
SPA templating system cannot start
from existing DOM.
They must start from blank.

@daiweilu
Server Side Rendering (SSR)
HTML
JavaScript
CSS
React sees current
markup is the same,
don’t have to render at all!

@daiweilu
Before & After SSR
Demo Time

@daiweilu
The Simple Way
• require(‘react-dom/server’).renderToString(<App/>)
• Embed initial data into a script tag before loading application code

@daiweilu
Challenge 1: Routing
• React Router
• Match urls on the server ﬁrst

@daiweilu
Challenge 2: State Management
• Redux
• Data prefetching

@daiweilu
Challenge 3: Speed Speed Speed
• Rendering React component happens purely in JavaScript
• Node.js is single thread. It’s BLOCKING
• Just render the static part of the UI
• Try out https://github.com/aickin/react-dom-stream maybe

@daiweilu
Challenge 4: Share Code between Client and
Server
• No DOM on server
• No database on client
• Extract logic business logic out of view layer

@daiweilu
Why should we event care?
• 100ms latency cost Amazon 1% in sales
• Extra 0.5 second in Google search render time drops trafﬁc by 20%
• When you are small, you can’t afford to lose users

@daiweilu
More to Explore
• SSR is a feature of Virtual DOM, basically any Virtual DOM library should be
able to do server side rendering
• Faster template
• If your server is not in Node.js https://github.com/airbnb/hypernova
• Server rendering in other frameworks
• Vue.js http://vuejs.org/2016/04/27/announcing-2.0/#Streaming-Server-
side-Rendering
• Ember Fastboot https://www.ember-fastboot.com/

Server rendering-talk

More Related Content

What's hot

Similar to Server rendering-talk

Recently uploaded

Server rendering-talk