Create Page based on SPA Editor Template but Header and Footer should be rendered from Server Side | Community
Skip to main content
R
rkmk107
Level 2
July 7, 2024
Solved

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

  • July 7, 2024
  • 3 replies
  • 708 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Anil_Chennapragada

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

3 replies

A
Anil_ChennapragadaAccepted solution
Level 4
July 7, 2024

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
    RahulBGPandey
    Level 2
    July 8, 2024

    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
      Community Manager
      kautuk_sahniCommunity Manager
      Community Manager
      July 23, 2024

      @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!

      Kautuk Sahni
      Terms & ConditionsAccessibility statement

      Loading footer...