import React from 'react' import Router from 'next/router' import Header from '../components/Header' import Counter from '../components/Counter' import dynamic from 'next/dynamic' import { asyncReactor } from 'async-reactor' const DynamicComponent = dynamic(import('../components/hello1')) const DynamicComponentWithCustomLoading = dynamic( import('../components/hello2'), { loading: () => (

...

) } ) const DynamicComponentWithNoSSR = dynamic( import('../components/hello3'), { ssr: false } ) const DynamicComponentWithAsyncReactor = asyncReactor(async () => { const Hello4 = await import('../components/hello4') return () }) const DynamicComponent5 = dynamic(import('../components/hello5')) const DynamicBundle = dynamic({ modules: (props) => { const components = { Hello6: import('../components/hello6') } if (props.showMore) { components.Hello7 = import('../components/hello7') } return components }, render: (props, { Hello6, Hello7 }) => (
{Hello7 ? : null}
) }) export default class Index extends React.Component { static getInitialProps ({ query }) { return { showMore: Boolean(query.showMore) } } toggleShowMore () { const { showMore } = this.props if (showMore) { Router.push('/') return } Router.push('/?showMore=1') } render () { const { showMore } = this.props return (
{ /* Since DynamicComponent5 does not render in the client, it won't get downloaded. */ } { React.noSuchField === true ? : null }

HOME PAGE is here!

) } }