Skip to content

[Question]. Using SSG with NextJS #204

Open
@EsteBustamante

Description

@EsteBustamante

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

Sample Code that illustrates the problem

ssg

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions