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:
- How to build and deploy highly interactive websites using AEM Headless and Next.js.
- The benefits of decoupling frontend development from backend content management with AEM Headless.
- How in-context WYSIWYG editing with Universal Editor simplifies content updates for hybrid rendered apps.
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.
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.
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.