feat: avoid synchronous loading on client if options.ssr is false (#346)

examples/server-side-rendering/src/client/App.js

@@ -12,6 +12,16 @@ const X = loadable(props => import(`./letters/${props.letter}`))
 const Sub = loadable(props => import(`./letters/${props.letter}/file`))
 const RootSub = loadable(props => import(`./${props.letter}/file`))
 
+// Load the 'G' component twice: once in SSR and once fully client-side
+const GClient = loadable(() => import('./letters/G'), {
+  ssr: false,
+  fallback: <span className="loading-state">ssr: false - Loading...</span>,
+})
+const GServer = loadable(() => import('./letters/G'), {
+  ssr: true,
+  fallback: <span className="loading-state">ssr: true - Loading...</span>,
+})
+
 // We keep some references to prevent uglify remove
 A.C = C
 A.D = D
@@ -30,6 +40,10 @@ const App = () => (
     <br />
     <E />
     <br />
+    <GClient prefix="ssr: false" />
+    <br />
+    <GServer prefix="ssr: true" />
+    <br />
     <Sub letter="Z" />
     <br />
     <RootSub letter="Y" />

examples/server-side-rendering/src/client/letters/G.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const G = ({prefix}) => (
+  <span className="my-cool-class">
+    {prefix}
+    {' '}
+    - G
+  </span>
+)
+
+export default G

packages/component/src/createLoadable.js

@@ -80,7 +80,9 @@ function createLoadable({ resolve = identity, render, onLoad }) {
 
         // Client-side with `isReady` method present (SSR probably)
         // If module is already loaded, we use a synchronous loading
-        if (ctor.isReady && ctor.isReady(props)) {
+        // Only perform this synchronous loading if the component has not
+        // been marked with no SSR, else we risk hydration mismatches
+        if (options.ssr !== false && ctor.isReady && ctor.isReady(props)) {
           this.loadSync()
         }
       }