Handling dynamic imports in Next.js and ensuring asynchronous data is available on the first render
I'm working on a project and hit a roadblock. I'm working on a Next.js application (v12.1.0) where I need to dynamically import a component that fetches data on the server side. However, I'm working with an scenario where the fetched data is not available on the first render of the dynamically imported component, leading to an empty state. I've tried using `getStaticProps` to fetch the data, but it seems that when I import the component using `next/dynamic`, the data isn't passed correctly. Here's how I'm implementing it: ```javascript import dynamic from 'next/dynamic'; const DynamicComponent = dynamic(() => import('../components/MyComponent')); export const getStaticProps = async () => { const res = await fetch('https://api.example.com/data'); const data = await res.json(); return { props: { data } }; }; const Page = ({ data }) => { return <DynamicComponent data={data} />; }; export default Page; ``` In `MyComponent`, I'm trying to access the `data` prop, but it appears to be `undefined` when I render the page. I also checked the console and noticed that there's a warning about the prop being missing. I tried wrapping the dynamic import with `ssr: true` as well, but that didn't resolve the scenario either. Have I misunderstood how to pass props to a dynamically imported component, or is there a better way to ensure that the data is available upon rendering? For context: I'm using Javascript on Ubuntu. I'm working with Javascript in a Docker container on CentOS. Any suggestions would be helpful.