Variation #2Continue reading...

Developer Demo

System Architecture

How Optimizely SaaS CMS, Graph, and Feature Experimentation connect to this Next.js app — request flow, content delivery, flag evaluation, and cache invalidation.

Architecture Diagram

Request flow left to right. CMS sits behind Graph — content syncs into Graph on publish, and Graph fires a webhook back to invalidate the ISR cache.

Browservisitor / editorVercel Edge / CDNISR cacheNext.js ServerMiddleware + RSCforce-dynamicOptimizely Graphcg.optimizely.comGraphQL delivery APIFX SDKcdn.optimizely.comJSON datafileOptimizely CMSauthoring UIVisual BuilderHTML responseHTTPSSSRGraphQLcontentdatafile fetchcontent syncGraph webhook
HTTPS request
HTML response
Cache miss / SSR forward
GraphQL query · content response
FX SDK datafile fetch
CMS → Graph content sync on publish
Graph webhook → ISR cache invalidation