Hi @delicate zephyr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#SSR:false
faint sirenBOT
The ssr: false option in Next.js's dynamic() function is used to disable server-side rendering (SSR) for a specific component. This is useful when a component or its dependencies rely on browser-specific APIs like window, which are not available during server-side rendering.
In your case, if ProfileSectionsModal or any of its dependencies use browser-specific APIs, you should use ssr: false when dynamically importing it. This will ensure that the component is only loaded on the client side, preventing any issues that might occur during server-side rendering.
Here's an example of how to use ssr: false:
import dynamic from 'next/dynamic'
const ProfileSectionsModal = dynamic(() => import('../components/modals/ProfileSectionsModal'), {
ssr: false,
})
However, it's important to note that using ssr: false can lead to an increase in the amount of JavaScript sent to the client, as the component will not be included in the server-rendered HTML. This can potentially lead to slower page load times, so it's recommended to use this option sparingly.
Also, it's worth mentioning that when using next/dynamic with ssr: false option to only load a component in the browser, you need to put the next/dynamic call in a client components, otherwise it will work do SSR. This is because ssr: false option will only work for client components, moving it into client components ensures the client code-splitting working properly.
Sources:
- Next.js Documentation - Lazy Loading (https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#examples)
- Github Issue Comment (https://github.com/vercel/next.js/issues/69720)