how preview works in content as service in aem?

[Mario248]

I am building a headless implementation for which I chosen Content as Service. I have no problem in exposing the content to frontend application.  Content author create a page and author component and publishing it to front end application and then frontend will consume the AEM content. for example - /content/my-site/welcome.model.json but here there is WYSIWYG (what you see is what you get). Author has to wait until frontend application integrate AEM content. Is there anyway we can do preview ? Note this is not SPA project.

Ref - https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/c...

[Nirmal_Jose · Accepted solution]

Hi @Mario248 ,

Content as a service / Headless implementation means AEM will not hold the ownership of presentation layer/markup layer. The content JSON is the ultimate output that AEM is providing as as system and its is upto UI system to stitch up the frontend with the JSON content payload provided.

What it means ultimately is, it is up to the front end system how they want to make out the authoring experience. 

There are very many ways you can create an authoring experience with a preview mechanism. (assuming UI layer is an SPA)

1. Environment based - You can keep a preview SPA environment connected to the author environment. The moment you make a change in author, you can preview in preview SPA and once all good, you can publish it where your live SPA is connected to publisher.

2. If you app is based on a UI layer like nextJS, you can connect the preview mode of that system (https://nextjs.org/docs/advanced-features/preview-mode ) to author env and then upon authoring you can review it in preview mode and upon publish you can see them in live.

3. Create a static content holder as a preview system. Using a preview workflow, you can publish the content JSON to that system and your UI system can connect that preview system.

These are few of the options that can come to my mind. If you are using the graphQL based exposing pattern, then you better options inside AEM. Otherwise printing out JSON is the expected pattern for headless mode.

2. 

[Mario248]

Thanks for your detailed response. In my case it is not SPA. It will be content as service. Is there any way to preview the content in aem? I knew at design level it is not possible to do the preview. Like we do have remote spa or integrated spa for single page application, is there any tweak we can and get the preview done for content as service architecture ?