Unleashing Web Development Power: Using AEM Headless with Hybrid Rendering Frontend Frameworks

Unlock the potential of AEM Headless and innovative hybrid rendering frontend frameworks in our engaging session for AEM developers. Our goal is to optimize your web development workflow, enabling you to create highly interactive websites. Experience the flexibility provided by AEM Headless, as it allows you to focus on your favorite stack, such as React, Next.JS, SvelteKit, or Astro while effortlessly tapping into structured content stored in AEM.

In this session, you will learn:

By the end of this presentation, you will have a solid understanding of how AEM Headless and hybrid rendering frontend frameworks can work together in offering speed, flexibility, and an enhanced developer experience. Don't miss this opportunity to transform your web development process and unlock new possibilities with AEM Headless and cutting-edge frontend frameworks.

Adel

SQL from frontend might be good but what about SQL injections?

Radu Cotescu

Bobby DROP TABLE; 😂

Lucian-Felix Ghita

AEM Security team is already very excited.

Lucian-Felix Ghita

Look at this example of Prisma ORM with React Server Components: https://www.prisma.io/react-server-components You can do safe and type safe SQL operations with it.

Where is the JS backend runtime hosted? How does it access AEM content?

Lucian-Felix Ghita

In our demos we used Azure SWA instances, fronted by Fastly. There are multiple options, ranging from running your own node instance, to AWS or Vercel.

Tomasz S

What should invoke rerender of the server side content / cache invalidation? Is it the service plugin / layer in universal editor? What should invoke render of a new page added? Where will that should be invoked in AEM headless?

Lucian-Felix Ghita

We did cheat a bit in the demo: the delivery example (https://rsc.thedailywknd.com) has caching turned on with high TTL, and a Fastly CDN in front. In contrast, the editor demo uses a CDN-less instance, with lower TTLs. In a real deployment I would use the Observability API to get notified when a model changes, then programmatically invalidate pages (Next.js supports that)

Martin Wahlmueller

Is the setup of content all done with experience fragments? Or is it also possible to set the page up without experience fragments (access via GraphQL)

Radu Cotescu

They used Content Fragments for rendering. All rendering was driven by their apps.

Duy Nguyen

Content fragments are retrieved by GraphQL (POST query or GET persistent queries), using https://github.com/adobe/aem-headless-client-js. More on that in the developer tools session on Day 2.

Tomasz S

Do you see this completely replacing Sling in future?

Lucian-Felix Ghita

No. It's an option for combining both AEM & Sling with React, allowing you to decide case by case.

Does navigation already qualify as „highly interactive?“

Lucian-Felix Ghita

It does. And indeed, you get very fast navigation inside the website, with the nice fallback to server side navigation/routing in case of a deep link of JS turned off.