From ee6ffd6a625543fbaf85f3bf84a61ef03adac393 Mon Sep 17 00:00:00 2001 From: Stujo Date: Fri, 22 Jul 2016 14:00:26 -0700 Subject: [PATCH] Load critical CSS into page header of static page Noticed a pop in the page when the client side renders it's because the main.css is excluded from the page render on the server side and then added This change allows for the main.css file to be included in the body of the page on the server side --- common/components/TodoApp.jsx | 4 ---- server/server.js | 22 +++++++++++++++++++--- 2 files changed, 19 insertions(+), 7 deletions(-) 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}