server rendering-talk
TRANSCRIPT
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"> <!-- HTML will be generated on the client side --> </div> <script src="/app.js"></script> </body> </html>
@daiweilu
“What if we could render some HTML on the server…”
@daiweilu
@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
@daiweilu
@daiweilu
@daiweilu
@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
Show me the code!
@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 first
@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 traffic 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/
@daiweilu
Thank You!