import dynamic from 'next/dynamic'

const ComponentA = dynamic(() => import('./ComponentA'), { ssr: false })
const ComponentB = dynamic(() => import('./ComponentB'), { ssr: false })
const ComponentC = dynamic(() => import('./ComponentC'), { ssr: false })
const ComponentD = dynamic(() => import('./ComponentD'), { ssr: false })

const components = {
a: ComponentA,
b: ComponentB,
c: ComponentC,
d: ComponentD,
}

I have a file where there are 100+ mapped dynamic import components due to them being consumed for cms layer. However, all of the components seem to be evaluated regardless if they are used or not. Is this the best way to optimize this usage? Thanks!