Two step SSR rendering

[afrankel-sfdo]

Describe the bug

Unsure if this is a bug, improper approach, or incorrect expectations.

Server rendering for dynamic route imports and data fetching shows only initial loading state, and not the final information.

Environment

Environment Info:

  current version of create-react-app: 3.3.1
  running from /Users/afrankel/.config/yarn/global/node_modules/create-react-app

  System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: Not Found
    Safari: 13.1.1
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Expected behavior

• Server render should embed final output

Actual behavior

• Loading states appear

Reproducible demo

Routing

git clone https://github.com/afrankel-sfdo/cra-ssr-test.git cura-render-route; cd cura-render-route; git reset --hard edf948f1a4f1ede3bdeed030d6ae186a1d6b4955; yarn; yarn start

curl -s http://localhost:3333/ | grep Loading...
    <div id="root"><div class="App-wrapper-0-2-1"><div class="App"><header class="App-header"><div>Loading...</div></header></div></div> </div>

Data fetching

git clone https://github.com/afrankel-sfdo/cra-ssr-test.git cura-render-data; cd cura-render-data; git reset --hard f7d9fbd3659146f337da8bd7c31efbd86727d489; yarn; yarn start

curl -s http://localhost:3333/ | grep "graphql loading"
    <div id="root"><div class="wrapper-0-2-1"><div class="App"><header class="App-header">graphql loading</header></div></div> </div>

[afrankel-sfdo]

Figured out the problem with Apollo, needed to use renderToStringWithData in index.node.js

[afrankel-sfdo]

Routing was a little tricker to pinpoint, the fix required altering nodeExternals...

          nodeExternals({
            whitelist: [
              /babel-plugin-universal-import|react-universal-component/
            ]
          }),

Looking into one remaining quirk where the route content quickly reverts to loading state and repaints.