1

In my Next.js App, I have create a multi theme project in one project. All thing well done except SEO part, I have import the theme dynamically with next/dynamic, when I have set load the theme in static mode all things are well done like code below

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;

but when change the load theme component way and make it dynamically, it's not display the code on the view source page:

     let TemplateSelected = undefined;

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

I haven't any idea to how to solve it.

Ahmad headr
  • 41
  • 1
  • 3
  • `import()` needs to be explicitly written without template strings and `dynamic()` can't be used inside of React rendering as it needs to be marked in the top level of the module for preloading to work. Reference: [Dynamic Import Basic Usage](https://nextjs.org/docs/advanced-features/dynamic-import#basic-usage). – juliomalves Apr 10 '21 at 13:15
  • Have a look at [Dynamic Importing of an unknown component - NextJs](https://stackoverflow.com/questions/62942727/dynamic-importing-of-an-unknown-component-nextjs) for potential solutions. – juliomalves Apr 10 '21 at 13:20
  • You are right it should be outside of React rendering but the problem I have I want to render it as SSR for SEO. and the link you're share it will be disable the SSR rendering. – Ahmad headr Apr 11 '21 at 05:07

0 Answers0