Scroll down or use arrow keys to navigate
Integrating Optimizely with headless frontends: A deep dive
Access the Presentation
Scan the QR code or visit the link below
Let's get started
Benefits of the Headless architecture
Frontend Frameworks
Overview of headless frontend frameworks on the market
| Framework | Ecosystem | Best For | Example Use Case |
|---|---|---|---|
Next.js | React | Enterprise, e-commerce, CMS sites | Optimizely headless site with personalization |
Nuxt | Vue | Content-heavy projects, Vue-first teams | Regional publisher site |
Remix | React | Strong routing, Shopify synergy | Commerce-driven app |
SvelteKit | Svelte | Lightweight apps, great developer experience | Startup landing pages |
Astro | Mixed | Static + content-rich sites | Blog or magazine site |
Optimizely in the Headless Ecosystem
Which headless frontends does Optimizely support today?
Headless frontend doesn't matter
Core architectural concepts shared across headless implementations
Content fetching with Optimizely Graph
Explore Optimizely GraphFetch structured content, anywhere
Access content in real-time with a single GraphQL endpoint. No more complex APIs or slow queries - fetch only what your frontend needs, instantly.
Query smart, not hard
Developers can shape responses exactly to their needs. This means less overfetching, faster apps, and happier teams.
90%
fewer API calls
Dynamic block rendering
Learn about Block FactoryReusable blocks for limitless flexibility
Break content into modular blocks that render dynamically across any frontend. Manage once, reuse everywhere.
Build once, scale everywhere
Marketers and developers can compose experiences like LEGO - flexible layouts without reinventing the wheel.
3x
faster time-to-market
Routing aligned with Optimizely
See routing in actionSeamless navigation, powered by content
Optimizely-driven routing ensures URLs match your content hierarchy, no manual rewiring required.
Consistency for users and SEO
Automatic routing means clean URLs, predictable navigation, and improved SEO performance.
100%
content-driven routes
Cache revalidation
Understand revalidationAlways fresh, never stale
Instantly revalidate cached pages when content changes. Blend the speed of static with the freshness of dynamic.
Fresh content at scale
With webhooks and on-demand revalidation, your users always see the latest content without sacrificing performance.
0.1s
to reflect content changes
Preview Mode
Try Preview ModeSee changes before you publish
Preview unpublished content directly in your headless frontend. Give editors confidence and control before going live.
Edit with confidence
Content authors can preview pages in real time, ensuring layouts, personalization, and experiments look perfect before publishing.
100%
editor confidence
Get started with Headless using Optimizely CMS
Summary of Core Architectural Concepts
Deployment & Hosting Options
Where to host your frontend?
Demo Time
Free Tutorial about Optimizely Frontend Hosting
SDKs & Experimentation
Experimentation in Headless Demo
Get started with Optimizely Feature Experimentation and Optimizely SaaS CMS
cms-js-sdk
contentType
🚀 Code-First Content Modeling
Define content types directly in your application code using the new @episerver/cms-sdk
Git Version Control
All definitions live in your repository
Developer-Friendly
Similar to .NET PaaS CMS approach
Visual Builder Ready
Set composition behaviors for blocks & pages
displayTemplate
🎨 Visual Builder Styling
Define styling and layout options that appear in the "Styles" tab of Visual Builder
Multiple Presentation Options
Different layouts for blocks and pages
Editor-Friendly Controls
Change themes, colors & layouts without code
Version-Controlled Styling
Keep UI variations consistent in code
Component
⚡ Typed Components with Infer
Use the Infer utility to get fully typed props for your React components
Strong Typing & Autocompletion
All CMS fields available with IntelliSense
Clear Data Shape
Props reflect exactly what comes from CMS
Developer Experience
Easier onboarding for new team members
Fetching & Rendering
🔄 GraphClient + OptimizelyComponent
Fetch content from Optimizely Graph and render automatically with GraphClient
Three Core Methods
getContentByPath, request, getPreviewContent
Automatic Component Mapping
Maps content types to React components
Auto-Generated Queries
GraphQL queries based on content definitions
Setup
Create Config
Set up optimizely.config.mjs with component locations
Initialize Types
Import content types and blocks in your app
Sync with CMS
Run CLI command to push changes
pnpm exec optimizely-cms-cli config pushPreview Component
⚡ Implementation takes just a few minutes
Create Preview Route
Add app/preview/page.tsx for CMS previews
Use SDK Method
Implement getPreviewContent to fetch unpublished content
Real-time Previews
Editors see changes instantly without complex setup
cms-js-sdk Summary
What's coming next
Q&A
Access the Presentation
Scan the QR code or visit the link below
Thank you!
