iso-style-ssr

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import withStyles from 'isomorphic-style-loader/lib/withStyles';

import indexCss from './index.css';
import css from './App.css';
import rabbitCss from './Rabbit.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default withStyles(indexCss, css, rabbitCss)(App);

server-app.js

import path from 'path';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import {
  createReactAppExpress
} from '@cra-express/core';
import App from '../src/App';
import { ContextProvider } from '../src/ContextProvider';
import stringRenderer from '@cra-express/universal-loader/lib/renderer/string-renderer';

let css;
let context = {
  insertCss: (...styles) => styles.forEach(style => css.add(style._getCss()))
}

const clientBuildPath = path.resolve(__dirname, '../client');
const app = createReactAppExpress({
  clientBuildPath,
  handleRender: stringRenderer,
  onFinish(req, res, html) {
    const finalHtml = html.replace('<style id="ssr"></style>',
    `<style type="text/css">${[...css].join('')}</style>`);
    if (context.status === 404) {
      return res.status(404).send(finalHtml);
    }
    if (context.url) {
      return res.redirect(301, context.url);
    }
    return res.send(finalHtml);
  },
  universalRender: handleUniversalRender
});

function handleUniversalRender(req, res) {
  css = new Set();
  const app = (
    <ContextProvider context={context}>
      <App />
    </ContextProvider>
  )
  return ReactDOMServer.renderToString(app);
}

module.exports = app;

src-index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { ContextProvider } from './ContextProvider';

const context = { insertCss(...styles) { styles.forEach(style => {
  if (style._insertCss) {
    style._insertCss()
  }
}); } }

ReactDOM.hydrate(
  <ContextProvider context={context}>
  <App />
  </ContextProvider>, document.getElementById('root'));
registerServiceWorker();