Commit 3582ba8ad59f6e36f60142e530d0794c1e02c095
proper server-side render (passes the checksum)
- was failing because we were rendering differently on the client for dev-tools, so now do initial render same as server and if in dev then render again with dev toolsMichael Williams committed on 11/29/2015, 4:29:25 AM
Parent: d257f1cb78aa333ab6399429df9d754ce4f561f5
Files changed
| app/client.js | changed |
| app/stack/render.js | changed |
| app/client.js | ||
|---|---|---|
| @@ -9,30 +9,37 @@ | ||
| 9 | 9 | const createStore = require('app/store') |
| 10 | 10 | const fetchElement = require('app/util/fetch-element') |
| 11 | 11 | |
| 12 | 12 | if (process.env.NODE_ENV === 'development') { |
| 13 | - var DevTools = require('app/components/dev-tools') | |
| 14 | 13 | } |
| 15 | 14 | |
| 16 | 15 | const store = createStore(window.__data) |
| 17 | 16 | const history = createHistory() |
| 18 | 17 | |
| 19 | 18 | syncReduxAndRouter(history, store) |
| 20 | 19 | |
| 21 | -const component = ( | |
| 20 | +const main = ( | |
| 22 | 21 | <Router createElement={fetchElement} history={history}> |
| 23 | 22 | { routes } |
| 24 | 23 | </Router> |
| 25 | 24 | ) |
| 26 | 25 | |
| 27 | 26 | render( |
| 28 | 27 | <Provider store={store} key="provider"> |
| 29 | - <div> | |
| 30 | - { component } | |
| 31 | - { | |
| 32 | - (process.env.NODE_ENV === 'development') ? | |
| 33 | - <DevTools /> : null | |
| 34 | - } | |
| 35 | - </div> | |
| 28 | + { main } | |
| 36 | 29 | </Provider>, |
| 37 | 30 | document.querySelector('main') |
| 38 | 31 | ) |
| 32 | + | |
| 33 | +if (process.env.NODE_ENV === 'development') { | |
| 34 | + const DevTools = require('app/components/dev-tools') | |
| 35 | + | |
| 36 | + render( | |
| 37 | + <Provider store={store} key="provider"> | |
| 38 | + <div> | |
| 39 | + { main } | |
| 40 | + <DevTools /> | |
| 41 | + </div> | |
| 42 | + </Provider>, | |
| 43 | + document.querySelector('main') | |
| 44 | + ) | |
| 45 | +} | |
| app/stack/render.js | ||
|---|---|---|
| @@ -36,20 +36,20 @@ | ||
| 36 | 36 | const component = <Provider store={store} key="provider"> |
| 37 | 37 | <RoutingContext { ...renderProps } /> |
| 38 | 38 | </Provider> |
| 39 | 39 | |
| 40 | - const html = renderToString(component) | |
| 40 | + const innerHtml = renderToString(component) | |
| 41 | 41 | |
| 42 | - const fullHtml = renderFullPage(html, store.getState()) | |
| 42 | + const html = renderFullPage(innerHtml, store.getState()) | |
| 43 | 43 | |
| 44 | - res.send(fullHtml) | |
| 44 | + res.send(html) | |
| 45 | 45 | }) |
| 46 | 46 | } |
| 47 | 47 | }) |
| 48 | 48 | } |
| 49 | 49 | } |
| 50 | 50 | |
| 51 | -function renderFullPage (html, data) { | |
| 51 | +function renderFullPage (innerHtml, initialData) { | |
| 52 | 52 | return ` |
| 53 | 53 | <!DOCTYPE html> |
| 54 | 54 | <html lang="en"> |
| 55 | 55 | <head> |
| @@ -57,11 +57,11 @@ | ||
| 57 | 57 | <title>Production TodoMVC</title> |
| 58 | 58 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 59 | 59 | </head> |
| 60 | 60 | <body> |
| 61 | - <main>${ html }</main> | |
| 61 | + <main>${ innerHtml }</main> | |
| 62 | 62 | <script> |
| 63 | - window.__data = ${ JSON.stringify(data) } | |
| 63 | + window.__data = ${ JSON.stringify(initialData) } | |
| 64 | 64 | </script> |
| 65 | 65 | <script src="bundle.js"></script> |
| 66 | 66 | </body> |
| 67 | 67 | </html> |
Built with git-ssb-web