[bug] NextJS | Lazyloading Components

[giri-jeedigunta]

Describe the bug
I have Header, Video, Footer coming as part of this.childComponents... Is there a way to lazy load my footer component or have more control on the list of components without breaking in-context editing?

aem-react-editable-components/src/components/Page.tsx

Line 91 in d01b307

{ this.childComponents }

Package version
^1.1.6

To Reproduce
N/A

Expected behavior

• Would be great if there are some useful examples / documentation around these packages.

Screenshots
N/A

Additional context
N/A

[niekraaijmakers]

With NextJS I don't believe we have an example like this currently.
We got lazyloading examples currently with react universal component on vanilla react, in our archetype.

This is how I would try to approach it:

Try to leverage custom webpack config to integrate the react universal component somehow in combination with react universal component.

Now, this is a third party plugin, which is not as great as using something OOTB. Once React 18 is released (not in alpha) then we can move into using React.Lazy() which will be better and might actually solve this, provided we can use React.Lazy with NextJS.