Scaling API-first – The story of a global engineering organization
Server rendering-talk
1. Server Side Rendering Single
Page App with Node and React
for Better UX
Daiwei Lu
@daiweilu
2. @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
3. @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()
6. @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>
18. @daiweilu
The Simple Way
• require(‘react-dom/server’).renderToString(<App/>)
• Embed initial data into a script tag before loading application code
21. @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
22. @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
23. @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
24. @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/
