7

I have a [...pageId].tsx file in the /pages directory.

In getServerSideProps, the page will check a CMS, and find a list of components to render. I want to load those components serverside, then render them out, then return the page.

Using next/dynamic like below will load the components, but it will not render them serverside. They will only stream in on the client. In other words: the customer will see 'Loading...' first, then the component renders. That's not what I want, also not for SEO.

const getDynamicComponent = (c) => dynamic(() => import(`../../components/${c}`), {
  loading: () => <section>Loading...</section>,
  ssr: true
});

export default function SomePage({page}) {
  // Load dynamic component if necessary
  let DynamicComponent = getDynamicComponent(page.reactComponent);
  }
  return (
     <DynamicComponent page={page} />
  )
}

How can I achieve serverside rendering using dynamic imports?

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Willem Mulder
  • 12,974
  • 3
  • 37
  • 62
  • Hey @willem-mulder did you ever get a solution to this problem? We're running into exactly the same issue. – Chenzo Apr 20 '23 at 18:55
  • @Chenzo no not yet. At the moment, I just import all possible components, store them in a map, and then pick the right one with some custom logic. But that's so wasteful :-( – Willem Mulder Apr 21 '23 at 14:04

0 Answers0