Create Page based on SPA Editor Template but Header and Footer should be rendered from Server Side

[rkmk107]

Hi Team,

Is it possible to create Page/Template base on SPA Editor but the Header and Footer experience fragment should be rendered from server side, only the body/main section should be dynamically rendered using react.
In our project we already have Header and Footer experience fragments which are normal AEM server-side rendered components.
We now a requirement to create new Page/Template with SPA capabilities. We want to use the SPA Editor for same, but want to use the existing Project Header and Footer.

It seems in SPA editor based page/template, server-side rendered cannot be authored.
Can someone let me know if it is possible to have SPA Editor capability in Page where Header and Footer are rendered from server side.

[Anil_Chennapragada · Accepted solution]

hi @rkmk107 ,

I dont think you can do this with OOTB AEM SPA Implementation, create the header and footer components and pass them in the model.json to render on the page.

Thanks,

Anil

[RahulBGPandey]

You can easily use the Header and footer along with the react components within SPA. 

I configured the Template structure for the header and footer using experience fragments and used a container for holding the SPA pages.

<root
            jcr:primaryType="nt:unstructured"
            sling:resourceType="myproject/components/container"
            layout="responsiveGrid">
            <experiencefragment-header
                jcr:primaryType="nt:unstructured"
                sling:resourceType="myproject/components/experiencefragment"
                fragmentVariationPath="/content/experience-fragments/myproject/us/en/site/header/master"/>
            <container
                jcr:primaryType="nt:unstructured"
                sling:resourceType="myproject/components/container"
                layout="responsiveGrid">
                <container
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="myproject/components/container"
                    editable="{Boolean}true"
                    layout="responsiveGrid"/>
            </container>
        </root>

[kautuk_sahni]

@rkmk107 Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!