contentful · David Nalchevanidze (nalchevanidze) · Jun 30, 2026 · Jun 30, 2026 · Jun 30, 2026 · Jun 30, 2026
@@ -1,7 +1,6 @@
 DOTENV_CONFIG_QUIET=true
 
-# SKIP_NO_JS skips the JavaScript-disabled variant resolution suite (SSR, JavaScript disabled).
-E2E_FLAGS=SSR,SKIP_NO_JS
+E2E_FLAGS=CSR,HYDRATION,SSR
 APP_PORT=3001
 
 PUBLIC_NINETAILED_CLIENT_ID="mock-client-id"

@@ -17,8 +17,7 @@ server/client SDK composition; app code imports only Next.js SDK subpaths.
 
 - All E2E tests live in `lib/e2e-web`. Hydration-specific specs are gated with `runIf('HYDRATION')`
   and run automatically when `E2E_FLAGS=CSR,HYDRATION`. This implementation uses
-  `E2E_FLAGS=SSR,SKIP_NO_JS`: SSR enables the SSR suite, and `SKIP_NO_JS` skips the
-  JavaScript-disabled variant resolution suite (`Variant Resolution (SSR, JavaScript disabled)`).
+  `E2E_FLAGS=CSR,HYDRATION,SSR`.
 - Entry cards must expose `data-ctfl-entry-id` on the `content-*` element so shared selectors work.
 - `test:e2e` delegates to `lib/e2e-web`.
 

@@ -2,23 +2,24 @@ import { GlobalLiveUpdatesProvider } from '@/components/GlobalLiveUpdatesProvide
 import { PreviewPanel } from '@/components/PreviewPanel'
 import { TrackingLog } from '@/components/TrackingLog'
 import { appConfig } from '@/lib/config'
-import { getAppConsent } from '@/lib/util'
+import { optimization } from '@/lib/optimization'
 import { NextAppAutoPageTracker, OptimizationRoot } from '@contentful/optimization-nextjs/client'
 import 'e2e-web/theme.css'
 import type { Metadata } from 'next'
-import { cookies } from 'next/headers'
 import Link from 'next/link'
-import { Suspense, type ReactNode } from 'react'
+import { type ReactNode } from 'react'
 
 export const metadata: Metadata = {
   title: 'Optimization Next.js SDK SSR',
   description:
     'Next.js App Router reference: the Next.js SDK resolves entries server-side and handles client-side tracking and interactive controls.',
 }
 
+export const dynamic = 'force-dynamic'
+
 export default async function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
-  const cookieStore = await cookies()
-  const appConsent = getAppConsent(cookieStore)
+  const { profile, selectedOptimizations, changes, initialPageEvent, hasConsent } =
+    await optimization.getServerState()
 
   return (
     <html lang={appConfig.locale.split('-')[0]}>
@@ -30,17 +31,20 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
           api={appConfig.api}
           trackEntryInteraction={{ views: true, clicks: true, hovers: true }}
           logLevel="debug"
+          defaults={{
+            consent: hasConsent,
+            persistenceConsent: hasConsent,
+            ...(profile ? { profile } : {}),
+            ...(hasConsent && selectedOptimizations ? { selectedOptimizations, changes } : {}),
+          }}
           app={{
             name: 'Contentful Optimization Next.js SDK SSR (Client)',
             version: '0.1.0',
           }}
-          defaults={{ consent: appConsent, persistenceConsent: appConsent }}
         >
           <GlobalLiveUpdatesProvider>
             <PreviewPanel />
-            <Suspense>
-              <NextAppAutoPageTracker initialPageEvent={appConsent ? 'skip' : 'emit'} />
-            </Suspense>
+            <NextAppAutoPageTracker initialPageEvent={initialPageEvent} />
             <div className="app-shell">
               <nav>
                 <Link data-testid="link-home" href="/">

@@ -1,41 +1,16 @@
 import { ControlPanel } from '@/components/ControlPanel'
 import { CustomViewTracker } from '@/components/CustomViewTracker'
 import { EntryCard } from '@/components/EntryCard'
-import { appConfig } from '@/lib/config'
-import { loadPageEntries } from '@/lib/contentful'
 import { optimization } from '@/lib/optimization'
-import { getAppConsent, toIdMap } from '@/lib/util'
-import { NextjsOptimizationState } from '@contentful/optimization-nextjs/client'
-import { getNextjsServerOptimizationData } from '@contentful/optimization-nextjs/server'
 import { PAGES } from 'e2e-web'
-import { cookies, headers } from 'next/headers'
 import Link from 'next/link'
 
 export default async function PageTwo() {
-  const [cookieStore, headerStore] = await Promise.all([cookies(), headers()])
-
-  const [entries, optimizationData] = await Promise.all([
-    loadPageEntries(PAGES.pageTwo.ids),
-    getAppConsent(cookieStore)
-      ? getNextjsServerOptimizationData(optimization, {
-          consent: { events: true, persistence: true },
-          cookies: cookieStore,
-          headers: headerStore,
-          locale: appConfig.locale,
-        }).then(({ data }) => data)
-      : undefined,
+  const [serverState, [auto, manual]] = await Promise.all([
+    optimization.getServerState(),
+    optimization.getEntries([PAGES.pageTwo.auto, PAGES.pageTwo.manual]),
   ])
 
-  const entriesById = toIdMap(entries)
-  const autoEntry = entriesById.get(PAGES.pageTwo.auto)
-  const manualEntry = entriesById.get(PAGES.pageTwo.manual)
-  const autoResolved = autoEntry
-    ? optimization.resolveOptimizedEntry(autoEntry, optimizationData?.selectedOptimizations)
-    : undefined
-  const manualResolved = manualEntry
-    ? optimization.resolveOptimizedEntry(manualEntry, optimizationData?.selectedOptimizations)
-    : undefined
-
   return (
     <section data-testid="page-two-view">
       <div className="page-header">
@@ -46,21 +21,16 @@ export default async function PageTwo() {
       </div>
 
       <CustomViewTracker componentId="page-two-hero" />
-      <ControlPanel demoCTA />
-      <NextjsOptimizationState data={optimizationData} />
+      <ControlPanel demoCTA serverState={serverState} />
 
       <div className="sections-grid sections-grid--split" data-testid="page-two-optimization">
         <section className="page-section">
           <header className="page-section__header">
             <h2>Auto-observed</h2>
           </header>
           <div className="entry-grid">
-            {autoEntry && autoResolved ? (
-              <EntryCard
-                baselineEntry={autoEntry}
-                resolvedData={autoResolved}
-                manualTracking={false}
-              />
+            {auto ? (
+              <EntryCard entry={auto} manualTracking={false} />
             ) : (
               <p>Auto tracked entry is unavailable.</p>
             )}
@@ -72,12 +42,8 @@ export default async function PageTwo() {
             <h2>Manually-observed</h2>
           </header>
           <div className="entry-grid">
-            {manualEntry && manualResolved ? (
-              <EntryCard
-                baselineEntry={manualEntry}
-                resolvedData={manualResolved}
-                manualTracking={true}
-              />
+            {manual ? (
+              <EntryCard entry={manual} manualTracking={true} />
             ) : (
               <p>Manual tracked entry is unavailable.</p>
             )}

@@ -1,48 +1,17 @@
 import { ControlPanel } from '@/components/ControlPanel'
 import { EntryCard } from '@/components/EntryCard'
-import { LiveEntryCard } from '@/components/LiveEntryCard'
-import { appConfig } from '@/lib/config'
-import { type ContentEntry, loadPageEntries } from '@/lib/contentful'
 import { optimization } from '@/lib/optimization'
-import { getAppConsent, toIdMap } from '@/lib/util'
-import { NextjsOptimizationState } from '@contentful/optimization-nextjs/client'
-import {
-  type ServerTrackingResolvedData,
-  getNextjsServerOptimizationData,
-} from '@contentful/optimization-nextjs/server'
 import { CLICK_SCENARIOS, PAGES } from 'e2e-web'
-import { cookies, headers } from 'next/headers'
 
 export default async function Home() {
-  const [cookieStore, headerStore] = await Promise.all([cookies(), headers()])
-
-  const [entries, optimizationData] = await Promise.all([
-    loadPageEntries(PAGES.home.ids),
-    getAppConsent(cookieStore)
-      ? getNextjsServerOptimizationData(optimization, {
-          consent: { events: true, persistence: true },
-          cookies: cookieStore,
-          headers: headerStore,
-          locale: appConfig.locale,
-        }).then(({ data }) => data)
-      : undefined,
+  const [serverState, liveUpdates, auto, manual] = await Promise.all([
+    optimization.getServerState(),
+    optimization.getEntry(PAGES.home.liveUpdates),
+    optimization.getEntries(PAGES.home.auto),
+    optimization.getEntries(PAGES.home.manual),
   ])
 
-  const entriesById = toIdMap(entries)
-  const resolvedById = new Map(
-    entries.map((entry) => [
-      entry.sys.id,
-      optimization.resolveOptimizedEntry(entry, optimizationData?.selectedOptimizations),
-    ]),
-  )
-
-  const profile = optimizationData?.profile
-  const getMergeTagValue = (entry: unknown): string | undefined =>
-    optimization.getMergeTagValue(entry as never, profile)
-  const resolveEntry = (entry: ContentEntry): ServerTrackingResolvedData =>
-    optimization.resolveOptimizedEntry(entry, optimizationData?.selectedOptimizations)
-
-  const liveUpdatesEntry = entriesById.get(PAGES.home.liveUpdates)
+  const liveUpdatesEntry = liveUpdates?.baselineEntry
 
   return (
     <>
@@ -54,8 +23,7 @@ export default async function Home() {
         </p>
       </div>
 
-      <ControlPanel />
-      <NextjsOptimizationState data={optimizationData} />
+      <ControlPanel serverState={serverState} />
 
       <section className="page-section" data-testid="live-updates-section">
         <header className="page-section__header">
@@ -69,17 +37,17 @@ export default async function Home() {
           <div className="sections-grid" data-testid="live-updates-examples">
             <section data-testid="live-updates-default">
               <h3>Default (inherits global setting)</h3>
-              <LiveEntryCard entry={liveUpdatesEntry} testId="live-default" />
+              <EntryCard entry={liveUpdatesEntry} testId="live-default" />
             </section>
 
             <section data-testid="live-updates-enabled">
               <h3>Always On (liveUpdates=true)</h3>
-              <LiveEntryCard entry={liveUpdatesEntry} liveUpdates={true} testId="live-enabled" />
+              <EntryCard entry={liveUpdatesEntry} liveUpdates={true} testId="live-enabled" />
             </section>
 
             <section data-testid="live-updates-locked">
               <h3>Locked (liveUpdates=false)</h3>
-              <LiveEntryCard entry={liveUpdatesEntry} liveUpdates={false} testId="live-locked" />
+              <EntryCard entry={liveUpdatesEntry} liveUpdates={false} testId="live-locked" />
             </section>
           </div>
         ) : (
@@ -93,22 +61,14 @@ export default async function Home() {
             <h2>Auto Observed Entries</h2>
           </header>
           <div id="auto-observed" className="entry-grid">
-            {PAGES.home.auto.flatMap((id) => {
-              const entry = entriesById.get(id)
-              const resolvedData = resolvedById.get(id)
-              if (!entry || !resolvedData) return []
-              return [
-                <EntryCard
-                  key={id}
-                  baselineEntry={entry}
-                  clickScenario={CLICK_SCENARIOS[id]}
-                  getMergeTagValue={getMergeTagValue}
-                  manualTracking={false}
-                  resolveEntry={resolveEntry}
-                  resolvedData={resolvedData}
-                />,
-              ]
-            })}
+            {auto.map((entry) => (
+              <EntryCard
+                key={entry.baselineEntry.sys.id}
+                entry={entry}
+                clickScenario={CLICK_SCENARIOS[entry.baselineEntry.sys.id]}
+                manualTracking={false}
+              />
+            ))}
           </div>
         </section>
 
@@ -117,21 +77,9 @@ export default async function Home() {
             <h2>Manually Observed Entries</h2>
           </header>
           <div id="manually-observed" className="entry-grid">
-            {PAGES.home.manual.flatMap((id) => {
-              const entry = entriesById.get(id)
-              const resolvedData = resolvedById.get(id)
-              if (!entry || !resolvedData) return []
-              return [
-                <EntryCard
-                  key={id}
-                  baselineEntry={entry}
-                  getMergeTagValue={getMergeTagValue}
-                  manualTracking={true}
-                  resolveEntry={resolveEntry}
-                  resolvedData={resolvedData}
-                />,
-              ]
-            })}
+            {manual.map((entry) => (
+              <EntryCard key={entry.baselineEntry.sys.id} entry={entry} manualTracking={true} />
+            ))}
           </div>
         </section>
       </div>

@@ -2,25 +2,21 @@
 
 import { useGlobalLiveUpdatesControls } from '@/components/GlobalLiveUpdatesProvider'
 import { appConfig } from '@/lib/config'
-import { useConsent, useFlagSubscription } from '@/lib/hooks'
-import {
-  useLiveUpdates,
-  useOptimization,
-  useOptimizationActions,
-  useProfileState,
-  useSelectedOptimizationsState,
-} from '@contentful/optimization-nextjs/client'
+import { type ControlPanelServerState, useControlPanel } from '@/lib/hooks'
+
+import { useLiveUpdates } from '@contentful/optimization-nextjs/client'
 import type { JSX } from 'react'
 
-export function ControlPanel({ demoCTA }: { readonly demoCTA?: boolean } = {}): JSX.Element {
-  const sdk = useOptimization()
-  const { identify, reset } = useOptimizationActions()
-  const { consent, setConsent } = useConsent()
-  const profile = useProfileState()
-  const selectedOptimizations = useSelectedOptimizationsState()
+interface ControlPanelProps {
+  readonly demoCTA?: boolean
+  readonly serverState?: ControlPanelServerState
+}
+
+export function ControlPanel({ demoCTA, serverState }: ControlPanelProps = {}): JSX.Element {
   const { globalLiveUpdates, onToggleGlobalLiveUpdates } = useGlobalLiveUpdatesControls()
   const { previewPanelVisible, setPreviewPanelVisible } = useLiveUpdates()
-  const booleanFlag = useFlagSubscription('boolean')
+  const { sdk, identify, reset, consent, setConsent, profile, activeCount, booleanFlag } =
+    useControlPanel(serverState)
   const isIdentified = Boolean(profile?.traits.identified)
 
   return (
@@ -153,7 +149,7 @@ export function ControlPanel({ demoCTA }: { readonly demoCTA?: boolean } = {}):
           Active optimizations
         </span>
         <span className="control-panel__row-value" data-testid="selected-optimizations-count">
-          {selectedOptimizations?.length ?? 0}
+          {activeCount}
         </span>
         <span />
       </div>

@@ -0,0 +1,29 @@
+'use client'
+
+import type { ContentEntry } from '@/lib/contentful'
+import { OptimizedEntry } from '@contentful/optimization-nextjs/client'
+import type { JSX } from 'react'
+
+interface EntryCardClientProps {
+  entry: ContentEntry
+  liveUpdates?: boolean
+  testId?: string
+}
+
+export function EntryCardClient({ entry, liveUpdates, testId }: EntryCardClientProps): JSX.Element {
+  return (
+    <OptimizedEntry baselineEntry={entry} liveUpdates={liveUpdates}>
+      {({ fields, sys: { id } }) => (
+        <div data-test-entry-id={id} data-testid={`content-${testId}`}>
+          <div
+            aria-label={`${fields.text ?? ''} [Entry: ${id}]`}
+            data-testid={`entry-text-${testId}`}
+          >
+            <p>{String(fields.text ?? '')}</p>
+            <p>{`[Entry: ${id}]`}</p>
+          </div>
+        </div>
+      )}
+    </OptimizedEntry>
+  )
+}