Lazy loading

  • It is recommended to use React’s lazy Suspense features to implement lazy loading components. See the relevant documentation here
  • Example:
my-nodestack-app
├── src
│   ├── pages
│   │   │── lazy_load                    
│   │   │   │── index.js     
│   │   │   │── layout.js   
│   │   │   │── compontents   
│   │   │   │   │── about.js   
├── ndsk.config.js
└── package.json

import {lazy,useState,Suspense} from 'react';
const About = lazy(() => import('./compontents/about.js'));
export default (props)=>{  
    const [value,setValue] = useState(false);

    const onClick = async ()=>{
        setValue(!value)
    }

    return (
      <html lang="en">
        <head>
          <title>dynamic load</title> 
        </head>
        <body> 
            <div>
                <button onClick={onClick}>load {!value ? 'about' : 'index'}</button>
            </div>
            {value ? <Suspense> <About /> </Suspense> : props.children}
        </body>
      </html> 
    );
}

export default (props)=>{
    return (
        <div>index</div>
    )
}

export default (props)=>{
    return (
        <div>about</div>
    )
}

Next

Rendering mode