Adds the capability to configure your async components to promote efficient server side rendering. Please see the docs on the ssrMode configuration property. This property replaces the removed defer configuration property.

Author: ctrlplusb

src/__tests__/__snapshots__/integration.test.js.snap

@@ -10,31 +10,37 @@ exports[`integration works 1`] = `
   <AsyncBob>
     <Bob>
       <div>
-        <h1>
-          bob
-        </h1>
         <div>
           <AsyncBobTwo>
             <Bob>
               <div>
-                <h1>
-                  bob
-                </h1>
                 <span>
-                  Hello
+                  In Render.
                 </span>
               </div>
             </Bob>
           </AsyncBobTwo>
           <DeferredAsyncBob />
+          <BoundaryAsyncBob>
+            <Bob>
+              <div>
+                <span>
+                  In Boundary but outside an AsyncComponent, server render me!
+                </span>
+                <AsyncBobThree />
+              </div>
+            </Bob>
+          </BoundaryAsyncBob>
         </div>
       </div>
     </Bob>
   </AsyncBob>
 </AsyncComponentProvider>
 `;
 
-exports[`integration works 2`] = `
+exports[`integration works 2`] = `"<div data-reactroot=\"\" data-reactid=\"1\" data-react-checksum=\"-636787408\"><div data-reactid=\"2\"><div data-reactid=\"3\"><span data-reactid=\"4\">In Render.</span></div><!-- react-empty: 5 --><div data-reactid=\"6\"><span data-reactid=\"7\">In Boundary but outside an AsyncComponent, server render me!</span><!-- react-empty: 8 --></div></div></div>"`;
+
+exports[`integration works 3`] = `
 <AsyncComponentProvider
   execContext={
     Object {
@@ -46,23 +52,83 @@ exports[`integration works 2`] = `
   <AsyncBob>
     <Bob>
       <div>
-        <h1>
-          bob
-        </h1>
         <div>
           <AsyncBobTwo>
             <Bob>
               <div>
-                <h1>
-                  bob
-                </h1>
                 <span>
-                  Hello
+                  In Render.
                 </span>
               </div>
             </Bob>
           </AsyncBobTwo>
           <DeferredAsyncBob />
+          <BoundaryAsyncBob>
+            <Bob>
+              <div>
+                <span>
+                  In Boundary but outside an AsyncComponent, server render me!
+                </span>
+                <AsyncBobThree />
+              </div>
+            </Bob>
+          </BoundaryAsyncBob>
+        </div>
+      </div>
+    </Bob>
+  </AsyncBob>
+</AsyncComponentProvider>
+`;
+
+exports[`integration works 4`] = `
+<AsyncComponentProvider
+  execContext={
+    Object {
+      "getComponent": [Function],
+      "getResolved": [Function],
+      "registerComponent": [Function],
+    }
+  }>
+  <AsyncBob>
+    <Bob>
+      <div>
+        <div>
+          <AsyncBobTwo>
+            <Bob>
+              <div>
+                <span>
+                  In Render.
+                </span>
+              </div>
+            </Bob>
+          </AsyncBobTwo>
+          <DeferredAsyncBob>
+            <Bob>
+              <div>
+                <span>
+                  In Defer.
+                </span>
+              </div>
+            </Bob>
+          </DeferredAsyncBob>
+          <BoundaryAsyncBob>
+            <Bob>
+              <div>
+                <span>
+                  In Boundary but outside an AsyncComponent, server render me!
+                </span>
+                <AsyncBobThree>
+                  <Bob>
+                    <div>
+                      <span>
+                        In Boundary - Do not server render me!
+                      </span>
+                    </div>
+                  </Bob>
+                </AsyncBobThree>
+              </div>
+            </Bob>
+          </BoundaryAsyncBob>
         </div>
       </div>
     </Bob>

src/__tests__/integration.test.js

@@ -7,12 +7,7 @@ import { createAsyncComponent, withAsyncComponents } from '../';
 import { STATE_IDENTIFIER } from '../constants';
 
 function Bob({ children }) {
-  return (
-    <div>
-      <h1>bob</h1>
-      {children}
-    </div>
-  );
+  return (<div>{children}</div>);
 }
 Bob.propTypes = { children: React.PropTypes.node };
 Bob.defaultProps = { children: null };
@@ -27,21 +22,38 @@ const AsyncBobTwo = createAsyncComponent({
   name: 'AsyncBobTwo',
 });
 
+const AsyncBobThree = createAsyncComponent({
+  resolve: () => new Promise(resolve => setTimeout(() => resolve(Bob), 10)),
+  name: 'AsyncBobThree',
+});
+
 const DeferredAsyncBob = createAsyncComponent({
   resolve: () => new Promise(resolve => setTimeout(() => resolve(Bob), 10)),
-  defer: true,
+  ssrMode: 'defer',
   name: 'DeferredAsyncBob',
 });
 
+const BoundaryAsyncBob = createAsyncComponent({
+  resolve: () => new Promise(resolve => setTimeout(() => resolve(Bob), 10)),
+  ssrMode: 'boundary',
+  name: 'BoundaryAsyncBob',
+});
+
 const app = (
   <AsyncBob>
     <div>
       <AsyncBobTwo>
-        <span>Hello</span>
+        <span>In Render.</span>
       </AsyncBobTwo>
       <DeferredAsyncBob>
-        <span>World!</span>
+        <span>In Defer.</span>
       </DeferredAsyncBob>
+      <BoundaryAsyncBob>
+        <span>In Boundary but outside an AsyncComponent, server render me!</span>
+        <AsyncBobThree>
+          <span>In Boundary - Do not server render me!</span>
+        </AsyncBobThree>
+      </BoundaryAsyncBob>
     </div>
   </AsyncBob>
 );
@@ -56,17 +68,29 @@ describe('integration', () => {
     withAsyncComponents(app)
       .then(({ appWithAsyncComponents, state, STATE_IDENTIFIER: STATE_ID }) => {
         expect(mount(appWithAsyncComponents)).toMatchSnapshot();
+        const serverString = renderToString(appWithAsyncComponents);
+        expect(serverString).toMatchSnapshot();
         // Attach the state to the "window" for the client
         global.window[STATE_ID] = state;
-        return renderToString(appWithAsyncComponents);
+        return serverString;
       })
       .then(serverHTML =>
         // "Client" side render...
         withAsyncComponents(app)
           .then(({ appWithAsyncComponents }) => {
-            expect(mount(appWithAsyncComponents)).toMatchSnapshot();
+            const clientRenderWrapper = mount(appWithAsyncComponents);
+            expect(clientRenderWrapper).toMatchSnapshot();
             expect(renderToString(appWithAsyncComponents)).toEqual(serverHTML);
-          }),
+            return clientRenderWrapper;
+          })
+          // Now give the client side components time to resolve
+          .then(clientRenderWrapper => new Promise(resolve =>
+            setTimeout(() => resolve(clientRenderWrapper), 100),
+          ))
+          // Now a full render should have occured on client
+          .then(clientRenderWrapper =>
+            expect(clientRenderWrapper).toMatchSnapshot(),
+          ),
       ),
   );
 });

src/createAsyncComponent.js

@@ -3,15 +3,21 @@ import React from 'react';
 // Duck type promise check.
 const isPromise = x => typeof x === 'object' && typeof x.then === 'function';
 
+const validSSRModes = ['render', 'defer', 'boundary'];
+
 function createAsyncComponent(args) {
   const {
     name,
     resolve,
     es6Aware = true,
-    defer = false,
+    ssrMode = 'render',
     Loading,
   } = args;
 
+  if (validSSRModes.indexOf(ssrMode) === -1) {
+    throw new Error('Invalid ssrMode provided to createAsyncComponent');
+  }
+
   let id = null;
 
   // Takes the given module and if it has a ".default" the ".default" will
@@ -36,10 +42,12 @@ function createAsyncComponent(args) {
     constructor(props, context) {
       super(props);
 
+      const { asyncComponents, asyncComponentsAncestor } = context;
+
       this.state = { Component: null };
 
-      if (context.asyncComponents) {
-        const { asyncComponents: { nextId, getComponent } } = context;
+      if (asyncComponents) {
+        const { nextId, getComponent } = asyncComponents;
         if (!id) {
           id = nextId();
         }
@@ -49,13 +57,25 @@ function createAsyncComponent(args) {
         } else {
           this.getAsyncComponentData = () => ({
             id,
-            defer,
+            defer: ssrMode === 'defer'
+              || (asyncComponentsAncestor && asyncComponentsAncestor.isBoundary),
             getResolver,
           });
         }
       }
     }
 
+    getChildContext() {
+      if (ssrMode !== 'boundary') {
+        return undefined;
+      }
+      return {
+        asyncComponentsAncestor: {
+          isBoundary: true,
+        },
+      };
+    }
+
     componentDidMount() {
       if (!this.state.Component) {
         this.resolveComponent(this.props);
@@ -89,6 +109,12 @@ function createAsyncComponent(args) {
     }
   }
 
+  AsyncComponent.childContextTypes = {
+    asyncComponentsAncestor: React.PropTypes.shape({
+      isBoundary: React.PropTypes.bool,
+    }),
+  };
+
   AsyncComponent.contextTypes = {
     asyncComponents: React.PropTypes.shape({
       nextId: React.PropTypes.func.isRequired,

src/withAsyncComponents.js

@@ -60,7 +60,11 @@ export default function withAsyncComponents(app : React$Element) {
         }
 
         const resolver = getResolver().then(C => execContext.registerComponent(id, C));
-        resolvers.push({ resolver, element, context });
+        resolvers.push({
+          resolver,
+          element,
+          context: Object.assign(context, { ASYNC_WALKER_BOUNDARY: true }),
+        });
         return false;
       }
       return undefined;