ISR Caching & Webhooks

// getClient().request() - the SDK's built-in raw query method
// Its "cache" parameter appends ?cache=true/false to the Graph endpoint URL.
// This controls Graph's own server-side CDN cache - NOT the Next.js fetch cache.

async request(query, variables, previewToken, cache = true, slot) {
  const url = new URL(this.graphUrl);
  url.searchParams.append("cache", cache.toString()); // → ?cache=true appended to URL
  const response = await fetch(url, {
    method: "POST",
    headers,
    body: JSON.stringify({ query, variables }),
    // ↑ No "next" property here. Next.js never sees this as an ISR fetch.
  });
}

// Consequence: you cannot tag this fetch or give it a revalidate window.
// revalidateTag("navigation") has no effect on a fetch made via request().

// Use graphqlFetch instead when you need ISR:
graphqlFetch(QUERY, vars, { next: { revalidate: 3600, tags: ["navigation"] } });
// ↑ Next.js registers this fetch in its data cache and respects the tags.

// Layer 2: Graph's own CDN cache at cg.optimizely.com
// Bypassed by appending ?cache=false to the endpoint URL.
// Setting cache: "no-store" in Next.js only skips Layer 1 - Graph can still
// return a cached response unless you also pass ?cache=false.

const GATEWAY = process.env.OPTIMIZELY_GRAPH_GATEWAY;
// "https://cg.optimizely.com/content/v2"

// Standard - Graph may return a CDN-cached response:
fetch(`${GATEWAY}`, { method: "POST", ... });

// Bypass Graph cache - always fresh from Graph's data store:
fetch(`${GATEWAY}?cache=false`, { method: "POST", ... });

// SDK methods (getContentByPath, getContent) support { cache: false }
// which adds ?cache=false to the URL automatically:
const client = getClient();
await client.getContentByPath(url, { cache: false });
await client.getContent({ key, version }, { cache: false });

// The catch-all CMS page route (src/app/[[...slug]]/page.tsx) uses ISR:
export const revalidate = 3600;  // Layer 1: ISR - cache page output for 1 hour
// Middleware rewrites each visitor's URL with active FX variation segments:
//   /savings                                   → base users (no active variation)
//   /savings/__v_homepage--variation_1         → one active flag
//   /savings/__v_homepage--var1/__v_cta--on    → two active flags
// Format: __v_{flagKey}--{variationKey} per segment, sorted for a stable cache key.
// Each rewritten URL is a separate ISR cache entry at the CDN.
// Graph data fetches use next: { revalidate: 3600, tags: ["page"] }.

// Pattern 1 - cookies() or headers() anywhere in the server render tree
import { cookies } from "next/headers";

export default async function AnyServerComponent() {
  const session = cookies().get("session"); // forces no-store on entire response
  // ...                                    // even if the page has revalidate = 60
}

// Pattern 2 - explicit opt-out on the page or a parent layout
export const dynamic = "force-dynamic";  // always SSR, never ISR-cached
export const revalidate = 0;             // same effect

// Pattern 3 - reading searchParams in a page component
export default async function Page({ searchParams }) {
  const q = searchParams.q; // searchParams is a dynamic API - opts page out of ISR
}

// Fix: server component fetches only static data; client component reads cookies
// Server - no cookies(), no headers(), fully cacheable
export default async function Banner() {
  const data = await fetchStaticData(); // e.g. a CMS query with next: { revalidate: 3600 }
  return <BannerClient initialData={data} />;
}

// "use client" - cookie access stays out of the server render tree
"use client";
export function BannerClient({ initialData }) {
  const [content, setContent] = useState(initialData); // renders from props on first paint

  useEffect(() => {
    const userId = document.cookie.match(/userId=([^;]*)/)?.[1];
    // personalise or A/B test here - runs after hydration, never blocks ISR
    setContent(personalise(initialData, userId));
  }, [initialData]);

  return content ? <div>{content.message}</div> : null;
}

// Next.js <Link> prefetch behaviour in App Router (production only):
//
// 1. When a <Link> enters the viewport, Next.js fetches the RSC payload
//    for that route and caches it in the browser's router cache.
// 2. Clicking the link navigates instantly - no round-trip needed.
//
// Router cache staleness (Next.js 15+):
//   Static / ISR routes → 5 minutes
//   Dynamic routes      → 0 seconds (always fetches on navigation)
//
// Implication: always-rendered links prefetch eagerly, even if the user
// never clicks them. 20 footer links = 20 prefetch requests on every page load.

// FIX for bulk always-visible links - disable prefetch
<Link href="/demo/caching" prefetch={false}>Caching</Link>

// Hover-triggered dropdowns are fine WITHOUT prefetch={false}:
// Child <Link> elements only enter the DOM when the dropdown opens (hover).
// At that moment Next.js prefetches them - which is exactly when the user
// is most likely to click. Intentional and beneficial.
{isDropdownOpen && (
  <Link href="/en/investments">Investments</Link>  // prefetch fires on hover
)}

// POST /api/revalidate
// Header: x-revalidate-secret: <OPTIMIZELY_REVALIDATE_SECRET>
// Body:   { "path": "/about/" }   - or omit path for full-site bust

import { revalidatePath } from "next/cache";

export async function POST(request: NextRequest) {
  const secret = request.headers.get("x-revalidate-secret");
  if (secret !== process.env.OPTIMIZELY_REVALIDATE_SECRET) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }
  const { path } = await request.json();
  path ? revalidatePath(path) : revalidatePath("/", "layout");
  return NextResponse.json({ revalidated: true, timestamp: Date.now() });
}

// POST /api/publish
// Header: x-revalidate-secret: <OPTIMIZELY_REVALIDATE_SECRET>
// Triggered by CMS Settings > Events > "Content Published"

export async function POST(request: NextRequest) {
  // auth check …
  revalidatePath("/", "layout");        // bust every ISR page
  return NextResponse.json({ received: true, timestamp: Date.now() });
}