xxxxxxxxxx
//import next/dynamic
import dynamic from "next/dynamic";
// create a function component that can be reused
const MyComponent = dynamic(() => import("../components/myClientComponent"), {
loading: () => <div>loading</div>,
ssr: false,
});
export default function Home() {
return (
<div>
// reuse the component
<MyComponent />
<div/>
);
}
xxxxxxxxxx
const BrightestStar = dynamic(() => import('../components/Homepage/BrightestStar'), {
loading: () => <div>loading</div>,
ssr: false,
});
xxxxxxxxxx
import dynamic from 'next/dynamic'
const DynamicHeader = dynamic(() => import('../components/header'), {
loading: () => <p>Loading</p>,
})
export default function Home() {
return <DynamicHeader />
}