Server Side Rendering Single Page App with Node and React for Better UX Daiwei Lu @daiweilu
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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!
Related Documents
