Next.js 下一个js服务器端渲染在函数中动态导入时不工作

我尝试在下一个js项目中实现动态导入

import dynamic from 'next/dynamic'
import Link from 'next/link'

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}


export const getServerSideProps: GetServerSideProps = async (context) => {
    return {
        props: { 'type': getRandomInt(3) + 1 ,
        }
    }
}

function Home({ type }) {
    const BodyDefault = dynamic(() => import(`components/${type}/a`));
    return (
        <div>
            <BodyDefault></BodyDefault>
            <Link href="/other">
                go to other
            </Link>
        </div>
    )
}

export default Home

从“下一个/动态”导入动态
从“下一个/链接”导入链接
从“下一步”导入{GetStaticProps、GetStaticPath、GetServerSideProps}
函数getRandomInt（最大值）{
返回Math.floor（Math.random（）*Math.floor（max））；
}
导出常量getServerSideProps:getServerSideProps=async（上下文）=>{
返回{
道具：{'type'：getRandomInt（3）+1，
}
}
}
函数主（{type}）{
constbodydefault=dynamic（（）=>import（`components/${type}/a`）；
返回(
去其他地方
)
}
导出默认主页

它工作得很好，但服务器端渲染不工作

（我在chrome中显示页面源代码时检查过）

是否无法使用服务器端道具更改dynmic导入组件

谢谢