feat(server): add option to disable SSR (#223)

Closes #195

Author: gregberge

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

@@ -7,6 +7,7 @@ const A = loadable(() => import('./letters/A'))
 const B = loadable(() => import('./letters/B'))
 const C = loadable(() => import(/* webpackPreload: true */ './letters/C'))
 const D = loadable(() => import(/* webpackPrefetch: true */ './letters/D'))
+const E = loadable(() => import('./letters/E'), { ssr: false })
 const X = loadable(props => import(`./letters/${props.letter}`))
 
 // We keep some references to prevent uglify remove
@@ -18,8 +19,13 @@ const Moment = loadable.lib(() => import('moment'))
 const App = () => (
   <div>
     <A />
+    <br />
     <B />
+    <br />
     <X letter="A" />
+    <br />
+    <E />
+    <br />
     <Moment>{moment => moment().format('HH:mm')}</Moment>
   </div>
 )

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

@@ -0,0 +1 @@
+export default () => 'E'

packages/component/src/createLoadable.js

@@ -40,6 +40,11 @@ function createLoadable({ resolve = identity, render, onLoad }) {
 
         // Server-side
         if (props.__chunkExtractor) {
+          // This module has been marked with no SSR
+          if (options.ssr === false) {
+            return
+          }
+
           // We run load function, we assume that it won't fail and that it
           // triggers a synchronous loading of the module
           ctor.requireAsync(props).catch(() => {})

website/src/pages/docs/api-loadable-component.mdx

@@ -10,11 +10,12 @@ order: 10
 
 Create a loadable component.
 
-| Arguments          | Description                              |
-| ------------------ | ---------------------------------------- |
-| `loadFn`           | The function call to load the component. |
-| `options`          | Optional options.                        |
-| `options.fallback` | Fallback displayed during the loading.   |
+| Arguments          | Description                                                          |
+| ------------------ | -------------------------------------------------------------------- |
+| `loadFn`           | The function call to load the component.                             |
+| `options`          | Optional options.                                                    |
+| `options.fallback` | Fallback displayed during the loading.                               |
+| `options.ssr`      | If `false`, it will not be processed server-side. Default to `true`. |
 
 ```js
 import loadable from '@loadable/component'

website/src/pages/docs/server-side-rendering.mdx

@@ -188,3 +188,14 @@ const extractor = new ChunkExtractor({ statsFile })
 const html = renderToString(extractor.collectChunks(<YourApp />))
 const styleTags = extractor.getStyleTags() // or extractor.getStyleElements();
 ```
+
+## Disable SSR on a specific loadable
+
+Disable SSR on a specific loadable component with `ssr: false`:
+
+```js
+import loadable from '@loadable/component'
+
+// This dynamic import will not be processed server-side
+const Other = loadable(() => import('./Other'), { ssr: false })
+```