[bug] EditableComponent - state not updated with correct model (Next.js - SSR)

[mkovacek]

Describe the bug I have a wknd spa react application migrated to Next.js, and in AEM I'm using a remote page next. With "aem-react-editable-components" v 1.1.11 everything works fine, but I have issues with 2.0.0 + versions.

The issue is:

• when I'm navigating from /home -> /home/page1 -> /home/page2 each of the pages is properly rendered
  • in page source SSR HTML is correct, NEXT_DATA JSON is correct, and rendered content is correct
• but when I'm returning back to some page which was already visited before (/home/page2 -> /home/page1)
  • rendered content still shows the content from /home/page2
  • the interesting part is that page source SSR HTML is correct and NEXT_DATA JSON is correct, but the content is not rendered correctly
• with hard reload page is always properly rendered

For migration, I was following this page https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/how-to/react-core-components-v2.html?lang=en

v 1.1.11

[...aemPage].js

import {Page, withModel} from '@adobe/aem-react-editable-components';
import React from 'react';
import {Constants} from "@adobe/aem-spa-page-model-manager";
import {getPageModel} from "../utils/SSRUtils";

function AemPage(pageModel) {
    return (
        <Page cqChildren={pageModel[Constants.CHILDREN_PROP]}
              cqItems={pageModel[Constants.ITEMS_PROP]}
              cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
              cqPath={pageModel[Constants.PATH_PROP]}/>
    );
}

export default withModel(AemPage);

export async function getServerSideProps(context) {
    return await getPageModel(context);
}

v 2.0.3 - did I miss here something?

[...aemPage].js

import {Page} from '@adobe/aem-react-editable-components';
import React from 'react';
import {Constants} from "@adobe/aem-spa-page-model-manager";
import {getPageModel} from "../utils/SSRUtils";

function AemPage(pageModel) {
    return (
        <Page
              cqChildren={pageModel[Constants.CHILDREN_PROP]}
              cqItems={pageModel[Constants.ITEMS_PROP]}
              cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
              cqPath={pageModel[Constants.PATH_PROP]}/>
    );
}

export default AemPage

export async function getServerSideProps(context) {
    return await getPageModel(context);
}

Package version 2.0.3

[mkovacek]

I think something is related to how I use the Page component. Do I need to pass componentMapping prop as well? and what should I pass

[mkovacek]

I have added on purpose paragraph to print out the current page path outside the Page component. Path in a paragraph is always correct.

import {Page} from '@adobe/aem-react-editable-components';
import React from 'react';
import {Constants} from "@adobe/aem-spa-page-model-manager";
import {getPageModel} from "../utils/SSRUtils";

export default function AemPage(pageModel) {
    return (
        <div>
            <p>{pageModel[Constants.PATH_PROP]}</p>
            <Page cqChildren={pageModel[Constants.CHILDREN_PROP]}
                  cqItems={pageModel[Constants.ITEMS_PROP]}
                  cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
                  pagePath={pageModel[Constants.PATH_PROP]}
                  cqPath={pageModel[Constants.PATH_PROP]}
                  isInEditor={false}/>
        </div>
    );
}

export async function getServerSideProps(context) {
    return await getPageModel(context);
}

Here you can see that we are on page-1.html, but the content is still from page-2.html

Page source - it's visible that page source have all the data for page 1 (and not Page 2)

React tools

WkndApp contains ok page model

AemPage contains ok page model

C (whatever that is) - contains ok page model

y (whatever that is) - contains ok page model

E (whatever that is) - wrong page model, what is E? Page model is from page-2.html

[mkovacek]

It seems that EditableComponent has the wrong model in the state / or it's not properly updated. Found a "hack" on how to overcome my issue.

import {Page} from '@adobe/aem-react-editable-components';
import React from 'react';
import {Constants} from "@adobe/aem-spa-page-model-manager";
import {getPageModel} from "../utils/SSRUtils";
import {isAuthor} from "../utils/EnvironemntUtils";

export default function AemPage(pageModel) {
    const getPage = () => {
        let page;

        if (isAuthor()) {
            page = (
                <Page cqChildren={pageModel[Constants.CHILDREN_PROP]}
                      cqItems={pageModel[Constants.ITEMS_PROP]}
                      cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
                      cqPath={pageModel[Constants.PATH_PROP]}/>
            );
        } else {
            page = (
                <Page cqChildren={pageModel[Constants.CHILDREN_PROP]}
                      cqItems={pageModel[Constants.ITEMS_PROP]}
                      cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
                      model={pageModel}
                      pagePath={pageModel[Constants.PATH_PROP]}
                      itemPath={pageModel[Constants.PATH_PROP]}/>
            );
        }

        return page;
    }

    return (
        getPage()
    );
}

export async function getServerSideProps(context) {
    return await getPageModel(context);
}

I needed to remove cqPath and add pagePath, itemPath, model, but for authoring, I need to keep and use cqPath, otherwise editor didn't work.

[friendlymahi]

@mkovacek - Is this issue still open? There are multiple versions since 2.0.3 . Wanted to check if its still valid.

[mkovacek]

Yes, it's still the same.

[mkovacek]

@friendlymahi Fixed in v2.1.1