adobe / adobe/aem-react-editable-components

[Question]. Using SSG with NextJS

Open
#204 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
68
Forks
35
PR merge metrics
No merged PRs in 30d

Description

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 (


Wknd about







);
}

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
#### Sample Code that illustrates the problem

![ssg](https://github.com/adobe/aem-react-editable-components/assets/68387121/092edf56-57b8-4687-99db-d55423ad22c6)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.