I have come across Route Segment Config and next/dynamic: assuming we have some component that needs or interacts with the Window object (or that for any other reason we’d prefer to have it only rendered client-side), I am confused about what is the preferable approach, in which case, and why.
What exactly is the difference between importing a React component via next/dynamic disabling SSR:
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
and using and exporting a dynamic
constant from the component file itself?
export const dynamic = 'force-dynamic'
I find this unclear in the documentation, since when importing a component on a page via next/dynamic
, I still get the warning that the page fully deopted to Client Side Rendering, while that doesn’t happen in case I export the dynamic
constant: any detailed insight about what the two approaches entail on either build time and run time would be helpful to understand the logic behind the choice of one over the other.