xxxxxxxxxx
// App.js
import React, { lazy, Suspense } from 'react';
import LazyLoad from 'react-lazyload';
// Import the lazy-loaded component
const ItemList = lazy(() => import('./ItemList'));
function App() {
return (
<div>
<h1>React LazyLoad with API Data Example</h1>
{/* Use React LazyLoad to lazy-load the component */}
<LazyLoad height={200}>
<Suspense fallback={<div>Loading</div>}>
<ItemList />
</Suspense>
</LazyLoad>
</div>
);
}
export default App;
xxxxxxxxxx
import dynamic from 'next/dynamic'
const DynamicHeader = dynamic(() => import('../components/header'), {
loading: () => <p>Loading</p>,
})
export default function Home() {
return <DynamicHeader />
}