Add react streaming api

styfle · styfle · commit 7d38756547d6 · 2017-09-29T11:39:15.000+07:00
diff --git a/src/browser.tsx b/src/browser.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { hydrate } from 'react-dom';
 import App from './components/app';
 import { propsUrl, containerId } from './constants';
 
@@ -8,5 +8,6 @@ fetch(propsUrl)
     .then((props: AppProps) => {
         const app = (<App {...props} />);
         const el = document.getElementById(containerId);
-        ReactDOM.hydrate(app, el);
+        const h = hydrate as any;
+        h(app, el);
     });
diff --git a/src/server.tsx b/src/server.tsx
@@ -1,6 +1,6 @@
 import { createServer } from 'http';
-import * as React from 'react';
-import { renderToString } from 'react-dom/server';
+import { createFactory } from 'react';
+import { renderToNodeStream } from 'react-dom/server';
 import { readFile } from 'fs';
 import { promisify } from 'util';
 import AppComponent from './components/app';
@@ -10,7 +10,7 @@ import { faviconUrl, stylesUrl, reactUrl, reactDomUrl, browserUrl, browserMapUrl
 console.log('Server booting...');
 const isProd = process.env.NODE_ENV === 'production';
 console.log('Production optimization enabled? ', isProd);
-const App = React.createFactory(AppComponent);
+const App = createFactory(AppComponent);
 const PORT = process.env.PORT || 3007;
 const suffix = isProd ? '.production.min.js' : '.development.js';
 const readFileAsync = promisify(readFile);
@@ -19,26 +19,30 @@ createServer(async (req, res) => {
     const { httpVersion, method, url } = req;
     console.log(`${httpVersion} ${method} ${url}`);
     if (url === '/') {
-        const props: AppProps = { items: getItems() };
-        const reactHtml = renderToString(App(props));
-        const pageHtml = `<!DOCTYPE html>
-        <html>
-            <head>
-                <meta charset="utf-8" />
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                <link href="${faviconUrl}" rel="icon" type="image/x-icon" />
-                <title>React Example</title>
-                <link rel="stylesheet" href="${stylesUrl}" />
-            </head>
-            <body>
-                <div id="${containerId}">${reactHtml}</div>
-                <script src="${reactUrl}"></script>
-                <script src="${reactDomUrl}"></script>
-                <script src="${browserUrl}"></script>
-            </body>
-        </html>`;
+        
         res.setHeader('Content-Type', 'text/html');
-        res.end(pageHtml)
+        res.write('<!DOCTYPE html>');
+        res.write(`<html>
+        <head>
+            <meta charset="utf-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <link href="${faviconUrl}" rel="icon" type="image/x-icon" />
+            <title>React Example</title>
+            <link rel="stylesheet" href="${stylesUrl}" />
+        </head>
+        <body>
+        <div id="${containerId}">`);
+        const props: AppProps = { items: getItems() };
+        const stream = renderToNodeStream(App(props)) as any;
+        stream.pipe(res, { end: false });
+        stream.on('end', () => {
+          res.end(`</div>
+            <script src="${reactUrl}"></script>
+            <script src="${reactDomUrl}"></script>
+            <script src="${browserUrl}"></script>
+          </body>
+          </html>`);
+        });
     } else if (url === propsUrl) {
         const items = getItems();
         const props = {items: items};
