|
|
|
@@ -5,7 +5,7 @@ import dynamic, { LoadingComponentProps } from "next/dynamic";
|
|
|
|
|
interface MyComponentProps {
|
|
|
|
|
foo: string;
|
|
|
|
|
}
|
|
|
|
|
const MyComponent: React.FunctionComponent<MyComponentProps> = () => <div>I'm async!</div>;
|
|
|
|
|
const MyComponent: React.StatelessComponent<MyComponentProps> = () => <div>I'm async!</div>;
|
|
|
|
|
const asyncComponent = Promise.resolve(MyComponent);
|
|
|
|
|
|
|
|
|
|
// Examples from
|
|
|
|
@@ -17,17 +17,33 @@ const LoadingComponent: React.StatelessComponent<LoadingComponentProps> = ({
|
|
|
|
|
}) => <p>loading...</p>;
|
|
|
|
|
|
|
|
|
|
// 1. Basic Usage (Also does SSR)
|
|
|
|
|
const DynamicComponent = dynamic(asyncComponent);
|
|
|
|
|
const DynamicComponent = dynamic(Promise.resolve(MyComponent));
|
|
|
|
|
const dynamicComponentJSX = <DynamicComponent foo="bar" />;
|
|
|
|
|
|
|
|
|
|
// 1.1 Basic Usage (Loader function, module shape with 'export = Component' / 'module.exports = Component')
|
|
|
|
|
const DynamicComponent2 = dynamic(() => Promise.resolve(MyComponent));
|
|
|
|
|
const dynamicComponent2JSX = <DynamicComponent2 foo="bar" />;
|
|
|
|
|
|
|
|
|
|
// 1.2 Basic Usage (Loader function, module shape with 'export default Component')
|
|
|
|
|
const DynamicComponent3 = dynamic(() => Promise.resolve({ default: MyComponent }));
|
|
|
|
|
const dynamicComponent3JSX = <DynamicComponent3 foo="bar" />;
|
|
|
|
|
|
|
|
|
|
// TODO: Work with module shape 'export { Component }'
|
|
|
|
|
|
|
|
|
|
// 2. With Custom Loading Component
|
|
|
|
|
const DynamicComponentWithCustomLoading = dynamic(asyncComponent, {
|
|
|
|
|
const DynamicComponentWithCustomLoading = dynamic(import('./imports/with-default'), {
|
|
|
|
|
loading: LoadingComponent
|
|
|
|
|
});
|
|
|
|
|
const dynamicComponentWithCustomLoadingJSX = <DynamicComponentWithCustomLoading foo="bar" />;
|
|
|
|
|
const dynamicComponentWithCustomLoadingJSX = <DynamicComponentWithCustomLoading foo />;
|
|
|
|
|
|
|
|
|
|
// 2.1. With Custom Loading Component (() => import('') syntax)
|
|
|
|
|
const DynamicComponentWithCustomLoading2 = dynamic(() => import('./imports/with-default'), {
|
|
|
|
|
loading: LoadingComponent
|
|
|
|
|
});
|
|
|
|
|
const dynamicComponentWithCustomLoading2JSX = <DynamicComponentWithCustomLoading2 foo />;
|
|
|
|
|
|
|
|
|
|
// 3. With No SSR
|
|
|
|
|
const DynamicComponentWithNoSSR = dynamic(asyncComponent, {
|
|
|
|
|
const DynamicComponentWithNoSSR = dynamic(() => import('./imports/with-default'), {
|
|
|
|
|
ssr: false
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
@@ -35,8 +51,8 @@ const DynamicComponentWithNoSSR = dynamic(asyncComponent, {
|
|
|
|
|
const HelloBundle = dynamic<MyComponentProps>({
|
|
|
|
|
modules: () => {
|
|
|
|
|
const components = {
|
|
|
|
|
Hello1: asyncComponent,
|
|
|
|
|
Hello2: asyncComponent
|
|
|
|
|
Hello1: () => import('./imports/with-default'),
|
|
|
|
|
Hello2: () => import('./imports/with-default')
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return components;
|
|
|
|
@@ -53,7 +69,7 @@ const helloBundleJSX = <HelloBundle foo="bar" />;
|
|
|
|
|
|
|
|
|
|
// 5. With plain Loadable options
|
|
|
|
|
const LoadableComponent = dynamic({
|
|
|
|
|
loader: () => asyncComponent,
|
|
|
|
|
loader: () => import('./imports/with-default'),
|
|
|
|
|
loading: LoadingComponent,
|
|
|
|
|
delay: 200,
|
|
|
|
|
timeout: 10000
|
|
|
|
|