Implement ssr=false support.
This commit is contained in:
parent
f2bfcd01b0
commit
b5a03a3896
3 changed files with 18 additions and 1 deletions
3
examples/with-dynamic-import/components/hello3.js
Normal file
3
examples/with-dynamic-import/components/hello3.js
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
export default () => (
|
||||||
|
<p>Hello World 3 (imported dynamiclly) </p>
|
||||||
|
)
|
|
@ -10,12 +10,17 @@ const DynamicComponentWithCustomLoading = dynamic(
|
||||||
loading: () => (<p>...</p>)
|
loading: () => (<p>...</p>)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
const DynamicComponentWithNoSSR = dynamic(
|
||||||
|
import('../components/hello3'),
|
||||||
|
{ ssr: false }
|
||||||
|
)
|
||||||
|
|
||||||
export default () => (
|
export default () => (
|
||||||
<div>
|
<div>
|
||||||
<Header />
|
<Header />
|
||||||
<DynamicComponent />
|
<DynamicComponent />
|
||||||
<DynamicComponentWithCustomLoading />
|
<DynamicComponentWithCustomLoading />
|
||||||
|
<DynamicComponentWithNoSSR />
|
||||||
<p>HOME PAGE is here!</p>
|
<p>HOME PAGE is here!</p>
|
||||||
<Counter />
|
<Counter />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,10 +6,16 @@ export default function dynamicComponent (promise, options = {}) {
|
||||||
return class Comp extends React.Component {
|
return class Comp extends React.Component {
|
||||||
constructor (...args) {
|
constructor (...args) {
|
||||||
super(...args)
|
super(...args)
|
||||||
|
|
||||||
this.LoadingComponent = options.loading ? options.loading : () => (<p>loading...</p>)
|
this.LoadingComponent = options.loading ? options.loading : () => (<p>loading...</p>)
|
||||||
|
this.ssr = options.ssr === false ? options.ssr : true
|
||||||
|
|
||||||
this.state = { AsyncComponent: null }
|
this.state = { AsyncComponent: null }
|
||||||
this.isServer = typeof window === 'undefined'
|
this.isServer = typeof window === 'undefined'
|
||||||
this.loadComponent()
|
|
||||||
|
if (this.ssr) {
|
||||||
|
this.loadComponent()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
loadComponent () {
|
loadComponent () {
|
||||||
|
@ -27,6 +33,9 @@ export default function dynamicComponent (promise, options = {}) {
|
||||||
|
|
||||||
componentDidMount () {
|
componentDidMount () {
|
||||||
this.mounted = true
|
this.mounted = true
|
||||||
|
if (!this.ssr) {
|
||||||
|
this.loadComponent()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
|
|
Loading…
Reference in a new issue