时间戳

首页 > 解决方案 > SSR：动态导入问题

reactjs - SSR：动态导入问题

问题描述

在我的 Next.js 应用程序中，我在一个项目中创建了一个多主题项目。除了 SEO 部分之外，所有事情都做得很好，我已经使用 next/dynamic 动态导入主题，当我设置在静态模式下加载主题时，所有事情都做得很好，如下面的代码

import React from 'react';
import Head from 'next/head';
import dynamic from 'next/dynamic';
import { ISiteInfo } from 'services/interfaces/siteinfo';
import { getImage } from 'utils';

interface IProps {
  siteInfo: ISiteInfo;
  renderComp(props): any;
}

const Home: React.FC<IProps> = ({ siteInfo }) => {
  let TemplateSelected = undefined;

  const id = '5fd739bf4e1cc93357419479';
  TemplateSelected = dynamic(() => import('../components/' + id));

  return (
    <>
      <Head>
        <title>{siteInfo?.title}</title>
        <link rel="icon" href={getImage(siteInfo?.favIcon?.hash, 'original')} />
      </Head>
      {siteInfo?.template && <TemplateSelected siteInfo={siteInfo} />}
    </>
  );
};
export default Home;

但是当改变加载主题组件的方式并使其动态化时，它不会在查看源页面上显示代码：

     let TemplateSelected = undefined;

  const id = siteInfo?.template;
  TemplateSelected = dynamic(() => import('../components/' + id));

我不知道如何解决它。

标签： reactjsnext.js

解决方案

推荐阅读