Reactjs SSR：动态导入问题_Reactjs_Next.js

Reactjs SSR：动态导入问题

reactjs next.js

Reactjs SSR：动态导入问题,reactjs,next.js,Reactjs,Next.js,在我的Next.js应用程序中，我在一个项目中创建了一个多主题项目。除了SEO部分，所有的事情都做得很好，我已经用next/dynamic动态导入了主题，当我在静态模式下设置加载主题时，所有的事情都做得很好，就像下面的代码一样 import React from 'react'; import Head from 'next/head'; import dynamic from 'next/dynamic'; import { ISiteInfo } from 'services/interfa

在我的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;

我不知道如何解决它。

import（）

需要在没有模板字符串的情况下显式编写，并且

dynamic（）

不能在React渲染内部使用，因为它需要在模块的顶层进行标记，以便预加载工作。参考：。看看潜在的解决方案。你是对的，它应该在React渲染之外，但我的问题是我想将其渲染为SEO的SSR。您共享的链接将禁用SSR渲染。

     let TemplateSelected = undefined;

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