React server-side render nightmare gone

React server-side render nightmare gone

Transcript

1. React Server-side Render Nightmare Gone Coren: Flexible React Serverside Render Framework Opensourced by canner.io
2. @wwwy3y3 張仲威 Canner 易易開科技 CMS platform for developers co-founder & CTO NodeJS, React lover
3. Outline • SSR Background • SSR solutions • Intro to Coren
4. React SSR is HARD! • Some modules need some hack during SSR (some may use window, document…) • Some modules require you to use additional API during SSR (react-router, react-redux) • Only nodejs support react SSR, so we have to separate a SSR server
5. How SSR become issue? Website in 2000 Website in 2017
6. 前端需求越來來越⼤大，越來來越多 Framework, Library 使⽤用在開發上 隨著⽽而來來的麻煩是 SSR 的困難 Client-side Improvement
7. Why SSR matters?
8. 使⽤用者體驗 • 1999年年時，使⽤用者平均接受等待時間為 8秒 • 2010 年年，使⽤用者只願意等待 3秒 • 57%的使⽤用者表示，超過 3秒 便便會離開網站 Source: Radware
9. SSR 如何改善載⼊入速度？
10. Client-side Render 伺服器器回應 下載 JS, CSS Execute and Render 使⽤用者看到畫⾯面， 開始互動 Source: WalmartLab
11. Server-side Render 伺服器器回應 SSR 提供初始的 HTML，使⽤用者看到畫⾯面 執⾏行行 JS 使⽤用者開始互 動 Source: WalmartLab
12. SSR Benefits • SEO improvement • Increase loading speed • Decrease API fetch round-trip time
13. How We SSR React Before
14. Basic Solution • Webpack build commonJS, require on nodeJS Server • When request come in, ReactDOM.renderToString(commonJSApp) • insert HTML to Template
15. Basic Solution cons • Server need to install all client-side dependencies • ReactDOMServer.renderToString() can monopolize the CPU, block node’s event-loop
16. Prior art • react-server
17. Prior art • react-dom-stream
18. Prior art • Hypernova
19. Prior art • nextJS • Complete Framework for server-render • Too many limitation (on webpack config, css module and router) • Too much work on migration
20. What’s the problem • Some modules require additional hack and API usage (react-router StaticRouter, react-redux Provider…) • We have to install client-side modules on server (react-router, react-redux) just for SSR • To avoid event loop blocking, we need to separate a SSR server…
21. How can we make it better? • Performance: No More Render On Server • Flexible: customize own SSR process • Easy: should not be pain to integrate • Automation: Automatic transpilation and bundling
22. How Coren did it? https://github.com/Canner/coren
23. Tradeoff • Do we REALLY need to SSR all components?? https://github.com/Canner/coren
24. Tradeoff - with Redux • Coren prerender pages with initial state offline, so server can simply serve the result • When it comes to dynamic data, server can put data it fetched from DB to Redux preloadedState Coren generate Server Response + https://github.com/Canner/coren
25. Redux state Coren generate Server Response + https://github.com/Canner/coren State State { video: null, isFetching: true, fetched: false } { video: <video>, isFetching: false, fetched: true }
26. Redux state Coren generate Server Response + https://github.com/Canner/coren State State { product: { name: “vacummer”, desc: “cool”, price: 120, count: null } } { product: { name: “vacummer”, desc: “cool”, price: 120, count: 20 } } count: 20
27. Benefits • Doesn’t require client-side library on server • NO Render, NO Blocking event-loop on server • Still save round-trip time by putting data to preloadedState https://github.com/Canner/coren
28. How to use Coren? Offline Build Server Response + https://github.com/Canner/coren
29. Example1 - head tags • How to add Headers? • How to know what routes to render? Example: https://github.com/Canner/coren-example
30. Example2 - static data • How to add static data to preloadedState? • Data not going to change for long time could be fetched at first (e.g. 2011 NBA Finals scores) Example: https://github.com/Canner/coren-example
31. Example3 - ReactRouter & Redux • If you’re using react-router & redux, you will need to wrap component with <StaticRouter> & <Provider store={store}> • Coren use @reactRouterRedux decorator Example: https://github.com/Canner/coren-example
32. Example4 - server response • Server respond coren result with data Example: https://github.com/Canner/coren-example • Server respond coren result without data
33. Coren decorators • We provide some common usage decorators
34. Coren decorators • Coren SSR process consists of several lifecycles that decorators can make use of. • for example, using react-router + react-redux + react-intl require you to wrap component this way.
35. Coren decorators • There’s a lifecycle called wrapSSR, so decorator can tell coren what components are required to wrap outside. Return Lifecycle
36. Coren decorators • Coren decorators return a lifecycle object, controlling what to do during SSR. SSR Process Collect all routes from @route decorator Loop routes setOptions Lifecycle wrapSSR appendToHead appendToBody 1. setOptions: set variables that will be shared among decorators 2. wrapSSR: wrap components outside 3. appendToHead: append elements to <head> 4. appendToBody: append elements to <body>
37. Overall Process 1. Add decorators to components 2. setup coren.config.js & webpack 3. replace your template file, write res.sendCoren() 4. run 5. deploy generated files to server $ coren build
38. Coren result • Prerender basic HTML with static data • => avoid first blank page • server respond HTML with dynamic data • => save API round-trip time • easy integrate with webpack, babel and add assets to header • => save develop time • no more import React, ReactDOM… on server
39. Roadmap • Streaming Response • More use case • Support more backend languages support (java, python…)
40. Roadmap • prepend preload link in HTML head
41. powered by Canner, give us a star if you like it! Thank you. Q&A https://github.com/Canner/coren