diff --git a/landing/script.js b/landing/script.js
index f9a9f9aa1..86659e4c3 100644
--- a/landing/script.js
+++ b/landing/script.js
@@ -1,14 +1,14 @@
// @flow
import 'isomorphic-fetch';
import invariant from 'invariant';
import React from 'react';
import ReactDOM from 'react-dom';
import Root from './root';
const root = document.getElementById('react-root');
invariant(root, "cannot find id='react-root' element!");
-ReactDOM.render(, root);
+ReactDOM.hydrate(, root);
diff --git a/server/src/responders/landing-handler.js b/server/src/responders/landing-handler.js
index 8e7d59c9a..f6471818a 100644
--- a/server/src/responders/landing-handler.js
+++ b/server/src/responders/landing-handler.js
@@ -1,61 +1,76 @@
// @flow
import html from 'common-tags/lib/html';
import type { $Response, $Request } from 'express';
+import Landing from 'landing/dist/landing.build.cjs';
+import * as React from 'react';
+import ReactDOMServer from 'react-dom/server';
import { getLandingURLFacts } from '../utils/urls';
import { getMessageForException } from './utils';
async function landingHandler(req: $Request, res: $Response) {
try {
await landingResponder(req, res);
} catch (e) {
console.warn(e);
if (!res.headersSent) {
res.status(500).send(getMessageForException(e));
}
}
}
type AssetInfo = {| +jsURL: string |};
let assetInfo: ?AssetInfo = null;
async function getAssetInfo() {
if (assetInfo) {
return assetInfo;
}
if (process.env.NODE_ENV === 'dev') {
assetInfo = {
jsURL: 'http://localhost:8082/dev.build.js',
};
return assetInfo;
}
// $FlowFixMe landing_compiled/assets.json doesn't always exist
const { default: assets } = await import('../../landing_compiled/assets');
assetInfo = {
jsURL: `compiled/${assets.browser.js}`,
};
return assetInfo;
}
const { basePath } = getLandingURLFacts();
+const { renderToNodeStream } = ReactDOMServer;
async function landingResponder(req: $Request, res: $Response) {
- const { jsURL } = await getAssetInfo();
+ const assetInfoPromise = getAssetInfo();
+
// prettier-ignore
- res.end(html`
+ res.write(html`
Hello world
-
+
+ `);
+
+ const LandingRoot = Landing.default;
+ const reactStream = renderToNodeStream();
+ reactStream.pipe(res, { end: false });
+
+ const { jsURL } = await assetInfoPromise;
+
+ // prettier-ignore
+ res.end(html`
`);
}
export default landingHandler;