Improve TTFB by responding asap

mxstbr · mxstbr · commit d97fa3c0b0a2 · 2017-08-31T15:08:40.000+02:00
diff --git a/iris/renderer/get-html.js b/iris/renderer/get-html.js
@@ -20,6 +20,8 @@ export const getHTML = ({ styleTags, metaTags, state, content }: Arguments) => {
   const sanitizedState = JSON.stringify(state).replace(/</g, '\\u003c');
   return (
     html
+      // Get everything after <head>
+      .split('<head>')[1]
       // Inject the state and the content instead of <div id="root">
       .replace(
         '<div id="root"></div>',
@@ -29,3 +31,8 @@ export const getHTML = ({ styleTags, metaTags, state, content }: Arguments) => {
       .replace('</head>', `${metaTags}${styleTags}</head>`)
   );
 };
+
+export const getStart = () => {
+  // Get everything before (and including) <head>
+  return html.substr(0, html.indexOf('<head>') + '<head>'.length);
+};
diff --git a/iris/renderer/index.js b/iris/renderer/index.js
@@ -17,7 +17,7 @@ import * as graphql from 'graphql';
 
 import schema from '../schema';
 import createLoaders from '../loaders';
-import { getHTML } from './get-html';
+import { getHTML, getStart } from './get-html';
 
 // Browser shim has to come before any client imports
 import './browser-shim';
@@ -58,6 +58,7 @@ const renderer = (req, res) => {
       </StaticRouter>
     </ApolloProvider>
   );
+  res.write(getStart());
   // Initialise the styled-components stylesheet and wrap the app with it
   const sheet = new ServerStyleSheet();
   renderToStringWithData(sheet.collectStyles(frontend))
@@ -72,7 +73,7 @@ const renderer = (req, res) => {
       const helmet = Helmet.renderStatic();
       // Compile the HTML and send it down
       res.status(200);
-      res.send(
+      res.write(
         getHTML({
           content,
           state,
