react-universally/server/middleware/reactApplication/index.js at 18aab26087734093c71c10f2574bd25510c24d61 · ctrlplusb/react-universally · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React from 'react';
import { HelmetProvider } from 'react-helmet-async';
import { renderToStaticMarkup, renderToNodeStream } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import {
  AsyncComponentProvider,
  createAsyncContext,
} from 'react-async-component';
import asyncBootstrapper from 'react-async-bootstrapper';

import config from '../../../config';

import ServerHTML from './ServerHTML';
import DemoApp from '../../../shared/components/DemoApp';
import { log } from '../../../shared/utils/logging';

/**
 * React application middleware, supports server side rendering.
 */
export default function reactApplicationMiddleware(request, response) {
  // Ensure a nonce has been provided to us.
  // See the server/middleware/security.js for more info.
  if (typeof response.locals.nonce !== 'string') {
    throw new Error('A "nonce" value has not been attached to the response');
  }
  const { locals: { nonce } } = response;

  // It's possible to disable SSR, which can be useful in development mode.
  // In this case traditional client side only rendering will occur.
  if (config('disableSSR')) {
    if (process.env.BUILD_FLAG_IS_DEV === 'true') {
      // eslint-disable-next-line no-console
      log({
        level: 'info',
        message: `Handling react route without SSR: ${request.url}`,
      });
    }
    // SSR is disabled so we will return an "empty" html page and
    // rely on the client to initialize and render the react application.
    const html = renderToStaticMarkup(<ServerHTML nonce={nonce} />);
    response.status(200).send(`<!DOCTYPE html>${html}`);
    return;
  }

  // Create a context for our AsyncComponentProvider.
  const asyncComponentsContext = createAsyncContext();

  // Create a context for <StaticRouter>, which will allow us to
  // query for the results of the render.
  const reactRouterContext = {};

  // Holds Helmet state specific to each request
  const helmetContext = {};

  // Declare our React application.
  const App = () => (
    <AsyncComponentProvider asyncContext={asyncComponentsContext}>
      <StaticRouter location={request.url} context={reactRouterContext}>
        <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(() => {
    // Generate the html response.
    const html = renderToNodeStream(
      <ServerHTML
        nonce={nonce}
        helmet={helmetContext.helmet}
        asyncComponentsState={asyncComponentsContext.getState()}
      >
        <App />
      </ServerHTML>,
    );

    switch (reactRouterContext.status) {
      case 301:
      case 302:
        // Check if the router context contains a redirect, if so we need to set
        // the specific status and redirect header and end the response.
        response.status(reactRouterContext.status);
        response.location(reactRouterContext.url);
        response.end();
        break;
      case 404:
        // If the renderResult contains a "missed" match then we set a 404 code.
        // Our App component will handle the rendering of an Error404 view.
        response.status(reactRouterContext.status);
        response.type('html');
        response.write('<!doctype html>');
        html.pipe(response);
        break;
      default:
        // Otherwise everything is all good and we send a 200 OK status.
        response.status(200);
        response.type('html');
        response.setHeader('Cache-Control', 'no-cache');
        response.write('<!doctype html>');
        html.pipe(response);
    }
  });
}