I have a Next.js Server Side Rendered app where I need to load components dynamically.
e.g Homepage, I make an API call in getServerSideProps to fetch homepage data, which will consist of some basic information about the page along with names of all the components and data for each component. From here I need to render these components dynamically in the page body. And these dynamic components need to be rendred on the server for SEO.
Here is my simplified code
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. e.g
{
...
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;