renderToNodeStream the full app without renderToString

client/index.js

@@ -6,6 +6,7 @@ import BrowserRouter from 'react-router-dom/BrowserRouter';
 import asyncBootstrapper from 'react-async-bootstrapper';
 import { AppContainer as ReactHotLoader } from 'react-hot-loader';
 import { AsyncComponentProvider } from 'react-async-component';
+import { HelmetProvider } from 'react-helmet-async';
 
 import './polyfills';
 
@@ -33,7 +34,9 @@ function renderApp(TheApp) {
  <ReactHotLoader>
  <AsyncComponentProvider rehydrateState={asyncComponentsRehydrateState}>
  <BrowserRouter forceRefresh={!supportsHistory}>
- <TheApp />
+ <HelmetProvider>
+ <TheApp />
+ </HelmetProvider>
  </BrowserRouter>
  </AsyncComponentProvider>
  </ReactHotLoader>

package.json

@@ -75,7 +75,7 @@
  "react-async-bootstrapper": "2.1.0",
  "react-async-component": "2.0.0",
  "react-dom": "16.2.0",
- "react-helmet": "5.2.0",
+ "react-helmet-async": "0.0.5",
  "react-hot-loader": "4.0.0",
  "react-router-dom": "4.2.2",
  "react-tree-walker": "4.0.2",

server/middleware/reactApplication/ServerHTML.js

@@ -45,7 +45,7 @@ function scriptTag(jsFilePath) {
 // COMPONENT
 
 function ServerHTML(props) {
- const { asyncComponentsState, helmet, nonce, reactAppString } = props;
+ const { asyncComponentsState, helmet, nonce, children } = props;
 
  // Creates an inline script definition that is protected by the nonce.
  const inlineScript = body => (
@@ -124,8 +124,9 @@ function ServerHTML(props) {
  bodyElements={bodyElements.map((x, idx) => (
  <KeyedComponent key={idx}>{x}</KeyedComponent>
  ))}
- appBodyString={reactAppString}
- />
+ >
+ {children}
+ </HTML>
  );
 }
 
@@ -137,12 +138,12 @@ ServerHTML.propTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  helmet: PropTypes.object,
  nonce: PropTypes.string,
- reactAppString: PropTypes.string,
+ children: PropTypes.node,
 };
 
 ServerHTML.defaultProps = {
  asyncComponentsState: undefined,
  helmet: undefined,
  nonce: undefined,
- reactAppString: undefined,
+ children: null,
 };

server/middleware/reactApplication/index.js

@@ -1,10 +1,6 @@
 import React from 'react';
-import Helmet from 'react-helmet';
-import {
- renderToString,
- renderToStaticMarkup,
- renderToNodeStream,
-} from 'react-dom/server';
+import { HelmetProvider } from 'react-helmet-async';
+import { renderToStaticMarkup, renderToNodeStream } from 'react-dom/server';
 import { StaticRouter } from 'react-router-dom';
 import {
  AsyncComponentProvider,
@@ -53,28 +49,32 @@ export default function reactApplicationMiddleware(request, response) {
  // query for the results of the render.
  const reactRouterContext = {};
 
+ // Holds Helmet state specific to each request
+ const helmetContext = {};
+
  // Declare our React application.
- const app = (
+ const App = () => (
  <AsyncComponentProvider asyncContext={asyncComponentsContext}>
  <StaticRouter location={request.url} context={reactRouterContext}>
- <DemoApp />
+ <HelmetProvider context={helmetContext}>
+ <DemoApp />
+ </HelmetProvider>
  </StaticRouter>
  </AsyncComponentProvider>
  );
 
  // Pass our app into the react-async-component helper so that any async
  // components are resolved for the render.
- asyncBootstrapper(app).then(() => {
- const appString = renderToString(app);
-
+ asyncBootstrapper(App()).then(() => {
  // Generate the html response.
  const html = renderToNodeStream(
  <ServerHTML
- reactAppString={appString}
  nonce={nonce}
- helmet={Helmet.rewind()}
+ helmet={helmetContext.helmet}
  asyncComponentsState={asyncComponentsContext.getState()}
- />,
+ >
+ <App />
+ </ServerHTML>,
  );
 
  switch (reactRouterContext.status) {

shared/components/DemoApp/AsyncAboutRoute/AboutRoute.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Helmet from 'react-helmet';
+import Helmet from 'react-helmet-async';
 
 function AboutRoute() {
  return (

shared/components/DemoApp/AsyncAboutRoute/__tests__/__snapshots__/AboutRoute.test.js.snap

@@ -8,14 +8,14 @@ exports[`<AboutRoute /> renders 1`] = `
  }
  }
 >
- <HelmetWrapper
+ <Helmet
  defer={true}
  encodeSpecialCharacters={true}
  >
  <title>
  About
  </title>
- </HelmetWrapper>
+ </Helmet>
  <p>
  Produced with
 

shared/components/DemoApp/AsyncCounterRoute/CounterRoute.js

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-unescaped-entities */
 import React, { Component } from 'react';
+import Helmet from 'react-helmet-async';
 
 class CounterRoute extends Component {
  constructor(props) {
@@ -15,6 +16,9 @@ class CounterRoute extends Component {
  render() {
  return (
  <div>
+ <Helmet>
+ <title>Counter</title>
+ </Helmet>
  <h3>Counter</h3>
  <p>
  <em>

shared/components/DemoApp/AsyncHomeRoute/HomeRoute.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Helmet from 'react-helmet';
+import Helmet from 'react-helmet-async';
 
 import config from '../../../../config';
 

shared/components/DemoApp/AsyncHomeRoute/__tests__/__snapshots__/HomeRoute.test.js.snap

@@ -2,14 +2,14 @@
 
 exports[`<HomeRoute /> renders 1`] = `
 <div>
- <HelmetWrapper
+ <Helmet
  defer={true}
  encodeSpecialCharacters={true}
  >
  <title>
  Home
  </title>
- </HelmetWrapper>
+ </Helmet>
  <h2>
  Hello world!
  </h2>

shared/components/DemoApp/index.js

@@ -3,7 +3,7 @@ import 'normalize.css/normalize.css';
 import React from 'react';
 import Switch from 'react-router-dom/Switch';
 import Route from 'react-router-dom/Route';
-import Helmet from 'react-helmet';
+import Helmet from 'react-helmet-async';
 
 import config from '../../../config';
 

shared/components/HTML/index.js

@@ -8,13 +8,13 @@ import PropTypes from 'prop-types';
  * The is the HTML shell for our React Application.
  */
 function HTML(props) {
- const { htmlAttributes, headerElements, bodyElements, appBodyString } = props;
+ const { htmlAttributes, headerElements, bodyElements, children } = props;
 
  return (
  <html {...htmlAttributes}>
  <head>{headerElements}</head>
  <body>
- <div id="app" dangerouslySetInnerHTML={{ __html: appBodyString }} />
+ <div id="app">{children}</div>
  {bodyElements}
  </body>
  </html>
@@ -26,14 +26,14 @@ HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headerElements: PropTypes.node,
  bodyElements: PropTypes.node,
- appBodyString: PropTypes.string,
+ children: PropTypes.node,
 };
 
 HTML.defaultProps = {
  htmlAttributes: null,
  headerElements: null,
  bodyElements: null,
- appBodyString: '',
+ children: null,
 };
 
 // EXPORT