Question

我有一个基于 json 结构构建页面的 Template 组件。 json 包含多个对象，包括键，然后定义要使用的组件。

像这样：

const componentList: Record<string, any> = {
    BlockCards: dynamic<Data.BlockCards>(() =>
        import("../molecule/BlockCards").then(module => module.BlockCards)
    ),
    BlockNews: dynamic<Data.BlockNews>(() =>
        import("../molecule/BlockNews").then(module => module.BlockNews)
    ),
    PageHeader: dynamic<Data.PageHeader>(() =>
        import("../atom/PageHeader").then(module => module.PageHeader)
    ),
};

interface TemplateProps {
    data: Data.Main;
}

export const Template: React.FC<TemplateProps> = ({ data }) => {
    return (
        <React.Fragment>
            {data.content.map((item, index) => {
                const Component = componentList[item.component.type];

                if (!Component) return null;

                return (
                    <Block key={index}>
                        <Component {...item.component} {...props} />
                    </Block>
                );
            })}
        </React.Fragment>
    );
};

这可行，但组件在客户端延迟加载。我希望渲染发生在构建时，就像 getStaticProps 一样。在不使用 dynamic 的情况下导入我的组件是可行的，并且由于 next 的静态优化，这些组件将被预渲染。但是由于这个模板组件导入了多个可能不会被某些页面使用的组件，所以我只需要在使用时才导入这些组件 - 我该怎么做？

Next.js 静态生成与动态导入

0 个答案: