diff --git a/common/components/TodoApp.jsx b/common/components/TodoApp.jsx index 5c0d7aa..0c13d1e 100755 --- a/common/components/TodoApp.jsx +++ b/common/components/TodoApp.jsx @@ -1,10 +1,6 @@ import React, { Component, PropTypes } from 'react'; import DevTools from './DevTools'; -if ( 'undefined' !== typeof window ) { - require( '../../client/assets/css/main.css' ); -} - export default class TodoApp extends Component { static contextTypes = { diff --git a/server/server.js b/server/server.js index 57d7cc8..0d6dc26 100755 --- a/server/server.js +++ b/server/server.js @@ -65,6 +65,20 @@ app.use( ( req, res, next ) => { .then( () => { + return new Promise((resolve, reject) => { + fs.readFile('./client/assets/css/main.css', 'utf8', (err, data) => { + if (err) { + reject(err); + return; + } + resolve(data); + }); + }); + + }) + + .then( (criticalCSS) => { + const initView = renderToString(( @@ -76,7 +90,9 @@ app.use( ( req, res, next ) => { let state = JSON.stringify( store.getState() ); // console.log( '\nstate: ', state ) - let page = renderFullPage( initView, state ) + + + let page = renderFullPage( initView, state, criticalCSS ) // console.log( '\npage:\n', page ); return page; @@ -89,8 +105,7 @@ app.use( ( req, res, next ) => { }) }) - -function renderFullPage(html, initialState) { +function renderFullPage(html, initialState, criticalCSS) { return ` @@ -98,6 +113,7 @@ function renderFullPage(html, initialState) { Universal Redux Example +
${html}