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()

4. @daiweilu Single Page App (SPA)

5. @daiweilu Initial Content Delivery Problem

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">      </div>   <script src="/app.js"></script>   </body>   </html>

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

8. @daiweilu

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

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

11. @daiweilu

12. @daiweilu

13. @daiweilu

14. @daiweilu

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

16. @daiweilu Before & After SSR Demo Time

17. @daiweilu Show me the code!

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

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

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

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 trafﬁc 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/

25. @daiweilu Thank You!

Server rendering-talk

Server rendering-talk

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

Similar a Server rendering-talk

Similar a Server rendering-talk(20)

Último

Último(20)

Server rendering-talk