@zengenti/contensis-react-base 3.3.2-beta.1 → 4.0.0-beta.10

package/esm/contensis-react-base.js

@@ -1,16 +1,16 @@
-import { c as cachedSearch, d as deliveryApi, S as SSRContextProvider } from './SSRContext-3TvaCDn0.js';
+import { c as cachedSearch, S as SSRContextProvider, d as deliveryApi } from './SSRContext-BE8ElZ3X.js';
 import { Query as Query$1 } from 'contensis-delivery-api';
 import React from 'react';
 import { Provider } from 'react-redux';
 import mapJson from 'jsonpath-mapper';
+import { a8 as defaultExpressions, a9 as termExpressions, aa as contentTypeIdExpression, ab as filterExpressions, ac as orderByExpression, ad as customWhereExpressions, ae as cloneDeep } from './sagas-JI51CS37.js';
 import 'reselect';
-import 'deepmerge';
-import 'query-string';
-import { a8 as defaultExpressions, a9 as contentTypeIdExpression, aa as filterExpressions, ab as termExpressions, ac as orderByExpression, ad as customWhereExpressions, ae as cloneDeep } from './sagas-Cd05ZBBH.js';
 import 'immer';
 import 'deep-equal';
+import 'deepmerge';
+import 'query-string';
 import { Op, Query } from 'contensis-core-api';
-import { s as setCachingHeaders, u as url } from './urls-DfCisos-.js';
+import { s as setCachingHeaders, u as url } from './VersionInfo-Cno7K0OA.js';
 import 'isomorphic-fetch';
 import express from 'express';
 import http from 'http';
@@ -18,39 +18,39 @@ import httpProxy from 'http-proxy';
 import fs from 'fs';
 import path from 'path';
 import { path as path$1 } from 'app-root-path';
-import { renderToString } from 'react-dom/server';
-import { StaticRouter } from 'react-router-dom';
-import { matchRoutes } from 'react-router-config';
+import { renderToPipeableStream, renderToString } from 'react-dom/server';
+import { matchRoutes } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { ServerStyleSheet } from 'styled-components';
 import serialize from 'serialize-javascript';
-import minifyCssString from 'minify-css-string';
-import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
-import { identity, noop } from 'lodash';
+import { noop, identity } from 'lodash';
 import { buildCleaner } from 'lodash-clean';
-import { CookiesProvider } from 'react-cookie';
-import { a as Cookies } from './CookieHelper.class-W_NNNJKT.js';
+import { a as Cookies } from './CookieHelper.class-FTURFpz3.js';
 import cookiesMiddleware from 'universal-cookie-express';
-import { c as createStore } from './store-f0WxNWUu.js';
-import { h as history, p as pickProject, r as rootSaga } from './App-BPsH6nHc.js';
-export { A as ReactApp } from './App-BPsH6nHc.js';
-import { s as setVersionStatus, d as setVersion } from './version-BnnERhzW.js';
-import { a3 as selectSurrogateKeys, a4 as selectSsrApiCalls, e as selectRouteEntry, l as selectCurrentProject, g as getImmutableOrJS, s as setCurrentProject, K as selectCurrentSearch } from './selectors-BRzliwbK.js';
+import { c as createStore } from './store-3u0RzHZ0.js';
+import { h as history, p as pickProject, r as rootSaga } from './App-DLZweVSp.js';
+export { A as ReactApp } from './App-DLZweVSp.js';
+import { s as setVersionStatus, d as setVersion } from './version-BlsI7hX2.js';
+import { a3 as selectSurrogateKeys, a4 as selectSsrApiCalls, h as selectRouteEntry, n as selectCurrentProject, g as getImmutableOrJS, d as setCurrentProject, K as selectCurrentSearch } from './selectors-DO2ocdOp.js';
+import { H as HttpContext, m as mergeStaticRoutes } from './RouteLoader-xeQBXywk.js';
+import { Transform } from 'stream';
+import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
 import chalk from 'chalk';
+import minifyCssString from 'minify-css-string';
+import { CookiesProvider } from 'react-cookie';
+import { StaticRouter } from 'react-router-dom/server';
 import 'loglevel';
 import '@redux-saga/core/effects';
 import './_commonjsHelpers-BFTU3MAI.js';
+import './version-wnf-TITV.js';
 import 'redux';
 import 'redux-thunk';
 import 'redux-saga';
-import 'redux-injectors';
+import 'redux-injectors-19';
 import 'history';
 import 'await-to-js';
-import './version-78jjDnHU.js';
-import './ChangePassword.container-Bcpef423.js';
-import './ToJs-B4MH53fx.js';
-import 'react-hot-loader';
-import './RouteLoader-CipkGOgr.js';
+import './ChangePassword.container-BgzIy8dA.js';
+import './ToJs-CNzfvyxJ.js';
 
 /**
  * Util class holds our search results helper boilerplate methods
@@ -618,32 +618,29 @@ const assetProxy = httpProxy.createProxyServer();
 const deliveryProxy = httpProxy.createProxyServer();
 const reverseProxies = (app, reverseProxyPaths = []) => {
   deliveryApiProxy(deliveryProxy, app);
-  app.all(reverseProxyPaths, (req, res) => {
+  app.all(reverseProxyPaths.map(proxyPath =>
+  // Patch to update paths for express v5
+  proxyPath.endsWith('/*') ? `${proxyPath.slice(0, -2)}/{*splat}` : proxyPath), (req, res) => {
     const target = req.hostname.indexOf('preview-') || req.hostname.indexOf('preview.') || req.hostname === 'localhost' ? servers$1.previewIis || servers$1.iis : servers$1.iis;
     assetProxy.web(req, res, {
       target,
       changeOrigin: true
     });
     assetProxy.on('error', e => {
-      /* eslint-disable no-console */
       console.log(`Proxy Request for ${req.path} HostName:${req.hostname} failed with ${e}`);
-      /* eslint-enable no-console */
     });
   });
 };
 const deliveryApiProxy = (apiProxy, app) => {
   // This is just here to stop cors requests on localhost. In Production this is mapped using varnish.
-  app.all(['/api/delivery/*', '/api/forms/*', '/api/image/*', '/authenticate/*'], (req, res) => {
-    /* eslint-disable no-console */
+  app.all(['/api/delivery/{*splat}', '/api/forms/{*splat}', '/api/image/{*splat}', '/authenticate/{*splat}'], (req, res) => {
     console.log(`Proxying api request to ${servers$1.alias}`);
     apiProxy.web(req, res, {
       target: deliveryApiHostname,
       changeOrigin: true
     });
     apiProxy.on('error', e => {
-      /* eslint-disable no-console */
       console.log(`Proxy request for ${req.path} HostName:${req.hostname} failed with ${e}`);
-      /* eslint-enable no-console */
     });
   });
 };
@@ -794,6 +791,94 @@ const handleResponse = (request, response, content, send = 'send') => {
   response[send](content);
 };
 
+/**
+ * Render React JSX (and surrounding HTML document) via React's
+ * renderToPipeableStream method
+ * @param getContextHtml a function to produce the correct HTML template that surrounds the JSX "App" with all available document assets injected
+ * @param jsx the JSX to render via a streamed response
+ * @param response the express Response object
+ * @param stream all chunks are piped to this stream to add additional style elements to each streamed chunk
+ */
+const renderStream = (getContextHtml, jsx, response, stream) => {
+  const {
+    abort,
+    pipe
+  } = renderToPipeableStream(jsx, {
+    onShellReady() {
+      const html = getContextHtml(false);
+      if (!html) {
+        // this means we have finished with the response already
+        abort();
+      } else {
+        const header = html.split('{{APP}}')[0];
+        response.setHeader('content-type', 'text/html; charset=utf-8');
+        stream.write(header);
+        pipe(stream);
+      }
+    },
+    onAllReady() {
+      const footer = getContextHtml(true).split('{{APP}}')[1];
+      stream.write(footer);
+    },
+    onShellError(error) {
+      response.statusCode = 500;
+      response.setHeader('content-type', 'text/html; charset=utf-8');
+      response.send('<h1>Something went wrong</h1>');
+      console.error(`[renderToPipeableStream:onShellError]`, error);
+    },
+    onError(error) {
+      console.error(`[renderToPipeableStream:onError]`, error);
+    }
+  });
+
+  // Abandon and switch to client rendering if enough time passes.
+  // Try lowering this to see the client recover.
+  setTimeout(() => abort(), 30 * 1000);
+  stream === null || stream === void 0 || stream.pipe(response);
+};
+
+/**
+ * Generate and add styled-components CSS to the streamed
+ * chunks of rendered HTML via renderToPipeableStream
+ *
+ * Workaround for Styled Components issue: React 18 Streaming SSR #3658
+ * https://github.com/styled-components/styled-components/issues/3658#issuecomment-2480721193
+ * credit: https://github.com/rurquia/styled-components-ssr-3658/blob/main/server/render.js
+ * @param sheet styled-components ServerStyleSheet
+ * @returns Transform Stream
+ */
+const styledComponentsStream = sheet => {
+  const readerWriter = new Transform({
+    objectMode: true,
+    transform(chunk, /* encoding */
+    _, callback) {
+      // Get the chunk and retrieve the sheet's CSS as an HTML chunk,
+      // then reset its rules so we get only new ones for the next chunk
+      const renderedHtml = typeof chunk === 'string' ? chunk : new TextDecoder().decode(chunk);
+      const styledCSS = sheet._emitSheetCSS();
+      const CLOSING_TAG_R = /<\/[a-z]*>/i;
+      sheet.instance.clearTag();
+
+      // prepend style html to chunk, unless the start of the chunk is a
+      // closing tag in which case append right after that
+      if (/<\/head>/.test(renderedHtml)) {
+        const replacedHtml = renderedHtml.replace('</head>', `${styledCSS}</head>`);
+        this.push(replacedHtml);
+      } else if (CLOSING_TAG_R.test(renderedHtml)) {
+        const execResult = CLOSING_TAG_R.exec(renderedHtml);
+        const endOfClosingTag = execResult.index + execResult.flat().length - 1;
+        const before = renderedHtml.slice(0, endOfClosingTag);
+        const after = renderedHtml.slice(endOfClosingTag);
+        this.push(before + styledCSS + after);
+      } else {
+        this.push(styledCSS + renderedHtml);
+      }
+      callback();
+    }
+  });
+  return readerWriter;
+};
+
 const readFileSync = path => fs.readFileSync(path, 'utf8');
 const loadableBundleData = ({
   stats,
@@ -841,7 +926,8 @@ const loadableChunkExtractors = () => {
         statsFile: path.resolve('dist/legacy/loadable-stats.json')
       });
     } catch (e) {
-      console.info('@loadable/server legacy ChunkExtractor not available');
+      // legacy bundling deprecated in v4
+      // console.info('@loadable/server legacy ChunkExtractor not available');
     }
     commonLoadableExtractor.addChunk = chunk => {
       var _modern, _legacy, _legacy2;
@@ -919,6 +1005,36 @@ const getBundleTags = (loadableExtractor, scripts, staticRoutePath = 'static') =
   return startupTag;
 };
 
+const getVersionInfo = staticFolderPath => {
+  try {
+    const versionData = fs.readFileSync(`dist/${staticFolderPath}/version.json`, 'utf8');
+    const versionInfo = JSON.parse(versionData);
+    return versionInfo;
+  } catch (ex) {
+    console.error(`Unable to read from "version.json"`, ex);
+    return {};
+  }
+};
+
+/* eslint-disable no-console */
+
+// Default exception types to add event listeners for
+const handleDefaultEvents = ['uncaughtException', 'unhandledRejection'];
+const unhandledExceptionHandler = (handleExceptions = handleDefaultEvents) => {
+  const exceptionTypes = Array.isArray(handleExceptions) ? handleExceptions : handleExceptions === false ? [] : handleDefaultEvents;
+  for (const type of exceptionTypes) {
+    process.on(type, err => {
+      if (err && err instanceof Error) {
+        // Print a message to inform admins and developers the error should not be ignored
+        console.log(`${`[contensis-react-base] ❌ ${chalk.red.bold(`${type} - ${err.message}`)}`}`);
+        console.log(chalk.gray` - you are seeing this because we have tried to prevent the app from completely crashing - you should not ignore this problem`);
+        // Log the error to server console
+        console.error(err);
+      }
+    });
+  }
+};
+
 const addStandardHeaders = (state, response, packagejson, groups) => {
   if (state) {
     try {
@@ -964,39 +1080,111 @@ const addVarnishAuthenticationHeaders = (state, response, groups = {}) => {
   }
 };
 
-const getVersionInfo = staticFolderPath => {
-  try {
-    const versionData = fs.readFileSync(`dist/${staticFolderPath}/version.json`, 'utf8');
-    const versionInfo = JSON.parse(versionData);
-    return versionInfo;
-  } catch (ex) {
-    console.error(`Unable to read from "version.json"`, ex);
-    return {};
+/**
+ * Add assets to templateHTML in the positions represented
+ * by replacing specific keys wrapped in handlebars depending
+ * on the accessMethod(s) that have been set (or updated)
+ * while processing the request
+ */
+const replaceHtml = ({
+  bundleTags = '',
+  html = '',
+  htmlAttributes = '',
+  metadata = '',
+  state = '',
+  styleTags = '',
+  title = '',
+  templateHTML = '',
+  templateHTMLFragment = '',
+  templateHTMLStatic = ''
+}, accessMethod) => {
+  let responseHTML = '';
+  // Serve a blank HTML page with client scripts to load the app in the browser
+  if (accessMethod.DYNAMIC) {
+    responseHTML = templateHTML.replace('{{TITLE}}', '').replace('{{SEO_CRITICAL_METADATA}}', '').replace('{{CRITICAL_CSS}}', '').replace('{{APP}}', '')
+    // .replace('{{LOADABLE_CHUNKS}}', bundleTags)
+    .replace('{{REDUX_DATA}}', state);
   }
-};
 
-/* eslint-disable no-console */
+  // Page fragment served with client scripts and redux data that hydrate the app client side
+  else if (accessMethod.FRAGMENT && !accessMethod.STATIC) {
+    responseHTML = templateHTMLFragment.replace('{{TITLE}}', title).replace('{{SEO_CRITICAL_METADATA}}', metadata).replace('{{CRITICAL_CSS}}', minifyCssString(styleTags))
+    //.replace('{{APP}}', html)
+    // .replace('{{LOADABLE_CHUNKS}}', bundleTags)
+    .replace('{{REDUX_DATA}}', state);
+  }
 
-// Default exception types to add event listeners for
-const handleDefaultEvents = ['uncaughtException', 'unhandledRejection'];
-const unhandledExceptionHandler = (handleExceptions = handleDefaultEvents) => {
-  const exceptionTypes = Array.isArray(handleExceptions) ? handleExceptions : handleExceptions === false ? [] : handleDefaultEvents;
-  for (const type of exceptionTypes) {
-    process.on(type, err => {
-      if (err && err instanceof Error) {
-        // Print a message to inform admins and developers the error should not be ignored
-        console.log(`${`[contensis-react-base] ❌ ${chalk.red.bold(`${type} - ${err.message}`)}`}`);
-        console.log(chalk.gray` - you are seeing this because we have tried to prevent the app from completely crashing - you should not ignore this problem`);
-        // Log the error to server console
-        console.error(err);
-      }
-    });
+  // Full HTML page served statically
+  else if (!accessMethod.FRAGMENT && accessMethod.STATIC) {
+    responseHTML = templateHTMLStatic.replace('{{TITLE}}', title).replace('{{SEO_CRITICAL_METADATA}}', metadata).replace('{{CRITICAL_CSS}}', minifyCssString(styleTags))
+    //.replace('{{APP}}', html)
+    .replace('{{LOADABLE_CHUNKS}}', '');
+  }
+
+  // Full HTML page served with client scripts and redux data that hydrate the app client side
+  else if (!accessMethod.FRAGMENT && !accessMethod.STATIC) {
+    responseHTML = templateHTML.replace('{{TITLE}}', title).replace('{{SEO_CRITICAL_METADATA}}', metadata).replace('{{CRITICAL_CSS}}', styleTags)
+    //.replace('{{APP}}', html)
+    // .replace('{{LOADABLE_CHUNKS}}', bundleTags)
+    .replace('{{REDUX_DATA}}', state);
+  }
+
+  // If react-helmet htmlAttributes are being used,
+  // replace the html tag with those attributes sepcified
+  // e.g. (lang, dir etc.)
+  if (htmlAttributes) {
+    responseHTML = responseHTML.replace(/<html?.+?>/, `<html ${htmlAttributes}>`);
   }
+  responseHTML = html ? responseHTML.replace('{{APP}}', html) : responseHTML;
+
+  // Only replace bundle tags at the very end when we have rendered and are
+  // streaming out the HTML "footer"
+  if (bundleTags) responseHTML = responseHTML.replace('{{LOADABLE_CHUNKS}}', bundleTags);
+  return responseHTML;
+};
+
+/**
+ * Produce the JSX wrapped in the necessary Providers
+ * to render the app in SSR
+ * @param ReactApp the JSX to render
+ * @param { providers, props, ssrAssets }
+ * @returns the final JSX to render decorated with all Provider and App props
+ */
+const ssrJsxProducer = (ReactApp, {
+  providers,
+  props,
+  ssrAssets
+}) => {
+  var _providers$styledComp;
+  // Recast ChunkExtractorManager to avoid TS error `Property 'children' does not exist on type...`
+  const ChunkExtractor = ChunkExtractorManager;
+  const jsx = /*#__PURE__*/React.createElement(ChunkExtractor, {
+    extractor: providers.loadable.extractor
+  }, /*#__PURE__*/React.createElement(CookiesProvider, {
+    cookies: providers.cookies
+  }, /*#__PURE__*/React.createElement(Provider, {
+    store: providers.redux
+  }, /*#__PURE__*/React.createElement(HttpContext.Provider, {
+    value: providers.httpContext
+  }, /*#__PURE__*/React.createElement(StaticRouter, {
+    location: providers.router.url
+  }, /*#__PURE__*/React.createElement(SSRContextProvider, {
+    accessMethod: providers.ssrContext.accessMethod,
+    request: providers.ssrContext.request,
+    response: providers.ssrContext.response,
+    ssrAssets: ssrAssets
+  }, /*#__PURE__*/React.createElement(ReactApp, {
+    routes: props.routes,
+    withEvents: props.withEvents
+  })))))));
+
+  // Wrap the JSX in a StyleSheetManager if a ServerStyleSheet is provided
+  return !((_providers$styledComp = providers.styledComponents) !== null && _providers$styledComp !== void 0 && _providers$styledComp.sheet) ? jsx : providers.styledComponents.sheet.collectStyles(jsx);
 };
 
 const webApp = (app, ReactApp, config) => {
   const {
-    stateType = 'immutable',
+    stateType = 'js',
     routes,
     withReducers,
     withSagas,
@@ -1013,18 +1201,26 @@ const webApp = (app, ReactApp, config) => {
     handleExceptions = true
   } = config;
   const staticRoutePath = config.staticRoutePath || staticFolderPath;
+  let isRenderingJsxToString = config.renderToString || false;
   const bundleData = getBundleData(config, staticRoutePath);
   const attributes = stringifyAttributes(scripts.attributes);
   scripts.startup = scripts.startup || startupScriptFilename;
-  const responseHandler = typeof handleResponses === 'function' ? handleResponses : handleResponse;
+  let responseHandler = handleResponse;
+  if (typeof handleResponses === 'function') {
+    responseHandler = handleResponses;
+    isRenderingJsxToString = true;
+  }
   if (handleExceptions !== false) unhandledExceptionHandler(handleExceptions); // Create `process.on` event handlers for unhandled exceptions (Node v15+)
 
   const versionInfo = getVersionInfo(staticFolderPath);
-  app.get('/*', cookiesMiddleware(), async (request, response) => {
+  app.get('/{*splat}', cookiesMiddleware(), async (request, response) => {
     const url = encodeURI(request.url);
-    const matchedStaticRoute = () => matchRoutes(routes.StaticRoutes, request.path);
-    const isStaticRoute = () => matchedStaticRoute().length > 0;
-    const staticRoute = isStaticRoute() && matchedStaticRoute()[0];
+    const matchedStaticRoute = matchRoutes(routes.StaticRoutes, request.path);
+    const isStaticRoute = matchedStaticRoute && matchedStaticRoute.length > 0;
+    if (isStaticRoute) {
+      mergeStaticRoutes(matchedStaticRoute);
+    }
+    const staticRoute = isStaticRoute ? matchedStaticRoute.pop() || null : null;
 
     // Allow certain routes to avoid SSR
     const onlyDynamic = staticRoute && staticRoute.route.ssr === false;
@@ -1046,9 +1242,6 @@ const webApp = (app, ReactApp, config) => {
         static: value
       }) => normaliseQs(value) || onlySSR
     });
-    const context = {};
-    // Track the current statusCode via the response object
-    response.status(200);
 
     // Create a store (with a memory history) from our current url
     const store = await createStore(withReducers, {}, history({
@@ -1074,22 +1267,38 @@ const webApp = (app, ReactApp, config) => {
     request.universalCookies :
     // this is a stub cookie collection so cookie methods can be used in code
     new Cookies();
-    const jsx = /*#__PURE__*/React.createElement(ChunkExtractorManager, {
-      extractor: loadableExtractor.commonLoadableExtractor
-    }, /*#__PURE__*/React.createElement(CookiesProvider, {
-      cookies: ssrCookies
-    }, /*#__PURE__*/React.createElement(Provider, {
-      store: store
-    }, /*#__PURE__*/React.createElement(StaticRouter, {
-      context: context,
-      location: url
-    }, /*#__PURE__*/React.createElement(SSRContextProvider, {
-      request: request,
-      response: response
-    }, /*#__PURE__*/React.createElement(ReactApp, {
-      routes: routes,
-      withEvents: withEvents
-    }))))));
+
+    // Track the current statusCode via the response object
+    response.status(200);
+
+    // Create the context we will pass to JSX HttpContext.Provider
+    // and read back any context props set by the ReactApp
+    const context = {};
+
+    // Amalgamate all props for the various Providers we wrap the ReactApp with
+    const jsxProviderProps = {
+      loadable: {
+        extractor: loadableExtractor.commonLoadableExtractor
+      },
+      cookies: ssrCookies,
+      redux: store,
+      httpContext: context,
+      router: {
+        url
+      },
+      ssrContext: {
+        accessMethod,
+        request,
+        response
+      }
+    };
+    // These are the props we will pass to the ReactApp itself
+    const jsxReactAppProps = {
+      routes,
+      withEvents
+    };
+
+    // Get the configured HTML templates provided by the consumer
     const {
       templateHTML = '',
       templateHTMLFragment = '',
@@ -1099,13 +1308,28 @@ const webApp = (app, ReactApp, config) => {
     // Serve a blank HTML page with client scripts to load the app in the browser
     if (accessMethod.DYNAMIC) {
       // Dynamic doesn't need sagas
+      // or styles, or any split component bundles
+      // nor are we streaming responses
+      const isDynamicHints = `<script ${attributes}>window.versionStatus = "${versionStatus}"; window.isDynamic = true;</script>`;
+      const jsx = ssrJsxProducer(ReactApp, {
+        providers: jsxProviderProps,
+        props: jsxReactAppProps,
+        ssrAssets: {
+          serializedState: isDynamicHints
+        }
+      });
       renderToString(jsx);
 
       // Dynamic page render has only the necessary bundles to start up the app
       // and does not include any react-loadable code-split bundles
       const bundleTags = getBundleTags(loadableExtractor, scripts, staticRoutePath);
-      const isDynamicHints = `<script ${attributes}>window.versionStatus = "${versionStatus}"; window.isDynamic = true;</script>`;
-      const responseHtmlDynamic = templateHTML.replace('{{TITLE}}', '').replace('{{SEO_CRITICAL_METADATA}}', '').replace('{{CRITICAL_CSS}}', '').replace('{{APP}}', '').replace('{{LOADABLE_CHUNKS}}', bundleTags).replace('{{REDUX_DATA}}', isDynamicHints);
+      const responseHtmlDynamic = replaceHtml({
+        bundleTags,
+        state: isDynamicHints,
+        templateHTML,
+        templateHTMLFragment
+      }, accessMethod);
+
       // Dynamic pages always return a 200 so we can run
       // the app and serve up all errors inside the client
       response.setHeader('Surrogate-Control', `max-age=${getCacheDuration(200)}`);
@@ -1116,22 +1340,7 @@ const webApp = (app, ReactApp, config) => {
     if (!accessMethod.DYNAMIC) {
       store.runSaga(rootSaga(withSagas)).toPromise().then(() => {
         var _selectCurrentSearch;
-        const sheet = new ServerStyleSheet();
-        const html = renderToString(sheet.collectStyles(jsx));
-        const helmet = Helmet.renderStatic();
-        Helmet.rewind();
-        const htmlAttributes = helmet.htmlAttributes.toString();
-        let title = helmet.title.toString();
-        const metadata = helmet.meta.toString().concat(helmet.base.toString()).concat(helmet.link.toString()).concat(helmet.script.toString()).concat(helmet.noscript.toString());
-        if (context.url) {
-          return response.redirect(context.statusCode || 302, context.url);
-        }
         const reduxState = store.getState();
-        const styleTags = sheet.getStyleTags();
-
-        // After running rootSaga there should be an additional react-loadable
-        // code-split bundles for any page components as well as core app bundles
-        const bundleTags = getBundleTags(loadableExtractor, scripts, staticRoutePath);
         let clonedState = buildCleaner({
           isArray: identity,
           isBoolean: identity,
@@ -1172,48 +1381,108 @@ const webApp = (app, ReactApp, config) => {
             serialisedReduxData = `<script ${attributes}>window.versionStatus = "${versionStatus}"; window.REDUX_DATA = ${serialisedReduxData}</script>`;
           }
         }
-        if ((context.statusCode || 200) >= 404) {
-          accessMethod.STATIC = true;
-        }
 
         // Responses
-        let responseHTML = '';
-        if (context.statusCode === 404) title = '<title>404 page not found</title>';
+        addStandardHeaders(reduxState, response, packagejson, {
+          allowedGroups,
+          globalGroups
+        });
 
-        // Static page served as a fragment
-        if (accessMethod.FRAGMENT && accessMethod.STATIC) {
-          responseHTML = minifyCssString(styleTags) + html;
-        }
+        // // Produce the ssr jsx one time so we can get any style tags to pass back in
+        // ssrJsxProducer(ReactApp, {
+        //   providers: { ...jsxProviderProps, styledComponents: { sheet } },
+        //   props: jsxReactAppProps,
+        // });
 
-        // Page fragment served with client scripts and redux data that hydrate the app client side
-        if (accessMethod.FRAGMENT && !accessMethod.STATIC) {
-          responseHTML = templateHTMLFragment.replace('{{TITLE}}', title).replace('{{SEO_CRITICAL_METADATA}}', metadata).replace('{{CRITICAL_CSS}}', minifyCssString(styleTags)).replace('{{APP}}', html).replace('{{LOADABLE_CHUNKS}}', bundleTags).replace('{{REDUX_DATA}}', serialisedReduxData);
-        }
+        // // After running rootSaga (and rendering subsquent children)
+        // // there should be additional react-loadable
+        // // code-split bundles for any page components as well as core app bundles
+        // const bundleTags = getBundleTags(
+        //   loadableExtractor,
+        //   scripts,
+        //   staticRoutePath
+        // );
 
-        // Full HTML page served statically
-        if (!accessMethod.FRAGMENT && accessMethod.STATIC) {
-          responseHTML = templateHTMLStatic.replace('{{TITLE}}', title).replace('{{SEO_CRITICAL_METADATA}}', metadata).replace('{{CRITICAL_CSS}}', minifyCssString(styleTags)).replace('{{APP}}', html).replace('{{LOADABLE_CHUNKS}}', '');
-        }
+        const sheet = new ServerStyleSheet();
+        const styledJsx = ssrJsxProducer(ReactApp, {
+          providers: {
+            ...jsxProviderProps,
+            styledComponents: {
+              sheet
+            }
+          },
+          props: jsxReactAppProps,
+          ssrAssets: {
+            // bundleTags,
+            // htmlAttributes,
+            // metadata,
+            // title,
+          }
+        });
 
-        // Full HTML page served with client scripts and redux data that hydrate the app client side
-        if (!accessMethod.FRAGMENT && !accessMethod.STATIC) {
-          responseHTML = templateHTML.replace('{{TITLE}}', title).replace('{{SEO_CRITICAL_METADATA}}', metadata).replace('{{CRITICAL_CSS}}', styleTags).replace('{{APP}}', html).replace('{{LOADABLE_CHUNKS}}', bundleTags).replace('{{REDUX_DATA}}', serialisedReduxData);
-        }
+        // We have to call renderToString() in order for all components to have
+        // had chance to set the helmet metadata
+        const html = renderToString(styledJsx);
+        // Helmet.renderStatic() has to be called synchronously immediately after calling renderToString()
+        // as it is not thread-safe (or specifically scoped to only this request)
+        const helmet = Helmet.renderStatic();
 
-        // Set response.status from React StaticRouter
-        if (typeof context.statusCode === 'number') response.status(context.statusCode);
-        addStandardHeaders(reduxState, response, packagejson, {
-          allowedGroups,
-          globalGroups
-        });
+        // Because we have had to call renderToString() here to reliably gather all helmet metadata
+        // We could potentially call sheet.getStyleTags() here too and avoid piping a react-rendered
+        // stream to a second stream to inject styled-components CSS
+
+        const htmlAttributes = helmet.htmlAttributes.toString();
+        let title = helmet.title.toString();
+        const metadata = helmet.meta.toString().concat(helmet.base.toString()).concat(helmet.link.toString()).concat(helmet.script.toString()).concat(helmet.noscript.toString());
         try {
-          // If react-helmet htmlAttributes are being used,
-          // replace the html tag with those attributes sepcified
-          // e.g. (lang, dir etc.)
-          if (htmlAttributes) {
-            responseHTML = responseHTML.replace(/<html?.+?>/, `<html ${htmlAttributes}>`);
+          /**
+           * Loads all page assets into the provided templateHTML
+           *
+           * Is callable after the JSX has been rendered, as
+           * JSX components may update the context via the
+           * HttpContext.Provider which can influence whether
+           * we render the page as STATIC or render nothing
+           * if the context has requested a redirect
+           * */
+          const getContextHtml = (isFinal = false, styleTags, renderedJsxMarkup) => {
+            if (context.url) {
+              response.redirect(context.statusCode || 302, context.url);
+              return '';
+            }
+
+            // Make the page render statically if there is an error status code
+            if ((context.statusCode || 200) >= 404) {
+              accessMethod.STATIC = true;
+            }
+            if (context.statusCode === 404) title = '<title>404 page not found</title>';
+
+            // Set response.status from React StaticRouter
+            if (typeof context.statusCode === 'number') response.status(context.statusCode);
+            const bundleTags = isFinal ? getBundleTags(loadableExtractor, scripts, staticRoutePath) : '';
+            const html = replaceHtml({
+              bundleTags,
+              html: renderedJsxMarkup,
+              htmlAttributes,
+              metadata,
+              state: serialisedReduxData,
+              styleTags,
+              title,
+              templateHTML,
+              templateHTMLFragment,
+              templateHTMLStatic
+            }, accessMethod);
+            return html;
+          };
+          if (isRenderingJsxToString) {
+            // We have already (begrudgingly) rendered the JSX to a string above
+            // so we can get all of the Helmet metadata out from any rendered component
+            // const html = renderToString(styledJsx);
+            const styleTags = sheet.getStyleTags();
+            const responseHTML = getContextHtml(true, styleTags, html);
+            responseHandler(request, response, responseHTML);
+          } else {
+            renderStream(getContextHtml, styledJsx, response, styledComponentsStream(sheet));
           }
-          responseHandler(request, response, responseHTML);
         } catch (err) {
           console.info(err.message);
         }
@@ -1224,7 +1493,13 @@ const webApp = (app, ReactApp, config) => {
         response.status(500);
         responseHandler(request, response, `Error occurred: <br />${err.stack} <br />${JSON.stringify(err)}`);
       });
-      renderToString(jsx);
+
+      // If this is removed we don't get the redux state populated
+      // with the result of the actions RouteLoader component has dispatched
+      renderToString(ssrJsxProducer(ReactApp, {
+        providers: jsxProviderProps,
+        props: jsxReactAppProps
+      }));
       store.close();
     }
   });