aem-react-editable-components
aem-react-editable-components copied to clipboard
Published
20 hours ago •
adobe
adobe
[Question]. Using SSG with NextJS
trafficstars
Hi,
I am using NextJS 13 with the latest version of this repository, everything seems to work fine so far. I have mimic the "About" page from Wknd site as a training exercise, everything works smoothly using SSR, however when i try to use SSG, the generated page at build time is empty causing that the page renders empty for a couple seconds and then the content loads when the browser parses the JS. The content of the page is fully retrieved from AEM, it is a parsys with several components.
Here is what i am trying to do.
import Head from "next/head";
import WkndLayout from "../../components/WknLayout";
import WkndNav from "../../components/WkndNav";
import {
ResponsiveGrid,
fetchModel,
} from "@adobe/aem-react-editable-components";
export default function Wknd({ model, pagePath }) {
return (
<WkndLayout>
<Head>
<title>Wknd about</title>
</Head>
<section>
<div className="px-2 py-4 mx-auto max-w-[1164px] sm:px-0 lg:px-0 sm:py-2 lg:py-6">
<ResponsiveGrid
key={pagePath}
model={model}
pagePath={pagePath}
itemPath="root/responsivegrid"
/>
</div>
</section>
</WkndLayout>
);
}
export async function getStaticProps(context) {
const pagePath = "/content/remote-app/us/en/wknd-about-ssg";
const model = await fetchModel({
pagePath,
itemPath: "root/responsivegrid",
host: process.env.NEXT_PUBLIC_AEM_HOST,
options: {
headers: {
Authorization: "Basic YWRtaW46YWRtaW4=",
},
},
});
return {
props: {
model,
pagePath,
},
};
}
I am new to NextJS and AEM SPA so I just want to understand why this behavior is happening and if this is expected. Thank you in advance
