Tengo una aplicación Next.js Server Side Rendered donde necesito cargar componentes dinámicamente.
Por ejemplo, página de inicio, realizo una llamada a la API en getServerSideProps para obtener datos de la página de inicio, que consistirán en información básica sobre la página junto con los nombres de todos los componentes y los datos de cada componente. Desde aquí, necesito representar estos componentes dinámicamente en el cuerpo de la página. Y estos componentes dinámicos deben renderizarse en el servidor para SEO.
Aquí está mi código simplificado
import Head from 'next/head'; import Header from '../components/Header'; import Banner from '../components/Banner'; import { getDomainFromContext, getParamFromContext } from '../src/utils'; import { fetchPage } from '../src/fetchers'; export async function getServerSideProps(context) { const domain = getDomainFromContext(context); const locale = getParamFromContext(context, 'locale'); const uri = '/'; const page = await fetchPage(domain, uri, locale); /* page now has names of the components with data for each component. eg { ... components : { { "name" : "Venues", "data" : "..." }, { "name" : "Info", "data" : "..." } } ... } */ return { props: { domain: domain, locale: locale, page: page }, }; } function Home(props) { return ( <> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <link rel="icon" href="/favicon.ico" /> </Head> <Header> <h1>Homepage</h1> </Header> <main> <Banner /> {/*Load Dynamic components here & it should be server side rendered.*/} </main> </> ); } export default Home;