{data.post.title}

) } `})}),` `,(0,n.jsx)(e.h2,{children:"ISR + On\u2011demand revalidation you can reason about"}),` `,(0,n.jsx)(e.p,{children:"Rules of thumb:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Landing/marketing pages: ",(0,n.jsx)(e.code,{children:"revalidate: 60"})," during launches, longer otherwise."]}),` `,(0,n.jsxs)(e.li,{children:["Blog posts: ",(0,n.jsx)(e.code,{children:"revalidate: 300"})," and tag by ",(0,n.jsx)(e.code,{children:"post:{slug}"})," so you can revalidate just that one."]}),` `,(0,n.jsxs)(e.li,{children:["Taxonomies and lists: tag by ",(0,n.jsx)(e.code,{children:"posts"})," and revalidate when anything publishes."]}),` `]}),` `,(0,n.jsx)(e.p,{children:"Wire revalidation from WordPress via webhook. You can use WPGraphQL Smart Cache or a tiny custom action."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-php",children:`// functions.php (theme or mu-plugin) add_action('transition_post_status', function($new_status, $old_status, $post) { if ($post->post_type !== 'post') return; if ($new_status === 'publish') { wp_remote_post(getenv('NEXT_REVALIDATE_ENDPOINT'), [ 'headers' => ['Authorization' => 'Bearer ' . getenv('REVALIDATE_TOKEN')], 'body' => ['slug' => $post->post_name], 'timeout' => 5 ]); } }, 10, 3); `})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`// app/api/revalidate/route.ts import { NextResponse } from 'next/server' import { revalidateTag } from 'next/cache' export async function POST(req: Request) { const auth = req.headers.get('authorization') if (auth !== \`Bearer \${process.env.REVALIDATE_TOKEN}\`) return NextResponse.json({ ok: false }, { status: 401 }) const { slug } = await req.json() revalidateTag('posts') revalidateTag(\`post:\${slug}\`) return NextResponse.json({ ok: true }) } `})}),` `,(0,n.jsx)(e.h2,{children:"Previews editors actually trust"}),` `,(0,n.jsx)(e.p,{children:"Preview flow in 3 steps:"}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsxs)(e.li,{children:["Editor clicks Preview in WP \u2192 WP opens your Next.js ",(0,n.jsx)(e.code,{children:"/api/preview"})," with a one\u2011time token."]}),` `,(0,n.jsxs)(e.li,{children:["Your handler validates token, sets a ",(0,n.jsx)(e.code,{children:"preview"})," cookie, redirects to the draft URL."]}),` `,(0,n.jsxs)(e.li,{children:["Pages read the cookie and fetch drafts with ",(0,n.jsx)(e.code,{children:"cache: 'no-store'"})," and explicit ",(0,n.jsx)(e.code,{children:"preview: true"})," inputs."]}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`// app/api/preview/route.ts import { cookies } from 'next/headers' import { NextResponse } from 'next/server' export async function GET(req: Request) { const { searchParams } = new URL(req.url) const token = searchParams.get('token') if (token !== process.env.WP_PREVIEW_TOKEN) return NextResponse.json({ ok: false }, { status: 401 }) cookies().set('wp-preview', '1', { httpOnly: true, secure: true, sameSite: 'lax' }) const to = searchParams.get('to') || '/' return NextResponse.redirect(new URL(to, req.url)) } `})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`// lib/wp-preview.ts export async function wpPreviewFetch(query: string, variables?: Record) { const res = await fetch(process.env.WP_GRAPHQL_ENDPOINT!, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query, variables }), cache: 'no-store', }) const json = await res.json() return json.data as T } `})}),` `,(0,n.jsx)(e.p,{children:"In your page, branch on cookie presence (RSC can read headers) and call the preview fetcher."}),` `,(0,n.jsx)(e.h2,{children:"Media and images: avoid the slow path"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Use ",(0,n.jsx)(e.code,{children:"next/image"})," with the WordPress domain whitelisted in ",(0,n.jsx)(e.code,{children:"next.config.js"}),"."]}),` `,(0,n.jsxs)(e.li,{children:["Prefer the ",(0,n.jsx)(e.code,{children:"sourceUrl"})," that maps to an optimized size (e.g., ",(0,n.jsx)(e.code,{children:"medium_large"}),") when available."]}),` `,(0,n.jsx)(e.li,{children:"If you control infra, put a thumbor/imgproxy in front of WordPress and serve every image through it."}),` `]}),` `,(0,n.jsx)(e.h2,{children:"Caching and performance guardrails"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Tag everything; never revalidate the entire site unless truly necessary."}),` `,(0,n.jsxs)(e.li,{children:["Avoid ",(0,n.jsx)(e.code,{children:"cache: 'no-store'"})," except for previews and admin\u2011only views."]}),` `,(0,n.jsx)(e.li,{children:"Batch GraphQL queries where sensible, but prefer smaller, targeted queries over a giant \u201Cone to rule them all.\u201D"}),` `,(0,n.jsx)(e.li,{children:"Consider a micro cache for GraphQL responses (e.g., 30\u2013120 seconds) if your WordPress can\u2019t handle traffic spikes."}),` `]}),` `,(0,n.jsx)(e.h2,{children:"Failure modes you should plan for"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Slug changes: store previous slugs and emit ",(0,n.jsx)(e.code,{children:"308"})," redirects."]}),` `,(0,n.jsx)(e.li,{children:"Deleted posts: return 410 Gone, not 404, to help caches converge."}),` `,(0,n.jsx)(e.li,{children:"Partial downtime: if WordPress is flaky, keep serving ISR\u2011cached pages and degrade gracefully on lists."}),` `,(0,n.jsx)(e.li,{children:"Editor mistakes: required field nulls \u2192 guard in renderers; never let a missing image crash a page."}),` `]}),` `,(0,n.jsx)(e.h2,{children:"Security and operations"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Disable file editing in WP (",(0,n.jsx)(e.code,{children:"DISALLOW_FILE_EDIT"}),"), restrict plugin installs."]}),` `,(0,n.jsx)(e.li,{children:"Put WP behind basic auth on non\u2011production environments."}),` `,(0,n.jsx)(e.li,{children:"Keep tokens secret; rotate your preview and revalidation tokens periodically."}),` `,(0,n.jsx)(e.li,{children:"Backups and staging refreshes: scripts, not manual checklists."}),` `]}),` `,(0,n.jsx)(e.h2,{children:"Testing the contract"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Schema drift catches: generate TS types; run ",(0,n.jsx)(e.code,{children:"codegen"})," in CI when schema changes."]}),` `,(0,n.jsxs)(e.li,{children:["Critical queries get smoke tests (does ",(0,n.jsx)(e.code,{children:"postBySlug"})," return required fields?)."]}),` `,(0,n.jsx)(e.li,{children:"Visual preview baseline: lightweight Playwright test to load draft pages."}),` `]}),` `,(0,n.jsx)(e.h2,{children:"A pragmatic checklist"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"[ ] WPGraphQL, ACF, and ACF GraphQL installed and configured"}),` `,(0,n.jsx)(e.li,{children:"[ ] GraphQL fragments for SEO, card, hero blocks"}),` `,(0,n.jsx)(e.li,{children:"[ ] Revalidation endpoint secured and wired to WP webhook"}),` `,(0,n.jsx)(e.li,{children:"[ ] Preview cookie flow implemented and tested end\u2011to\u2011end"}),` `,(0,n.jsx)(e.li,{children:"[ ] Image domains whitelisted; large images optimized"}),` `,(0,n.jsx)(e.li,{children:"[ ] Tags applied to all fetches; list + detail cached appropriately"}),` `,(0,n.jsx)(e.li,{children:"[ ] Redirects for slug changes; 410 for deletions"}),` `,(0,n.jsx)(e.li,{children:"[ ] Backups, staging auth, and CI schema checks"}),` `]}),` `,(0,n.jsx)(e.h2,{children:"Conclusion"}),` `,(0,n.jsx)(e.p,{children:"Headless WordPress doesn\u2019t have to be a maze of plugins and mystery caches. Treat WordPress like a stable editor UI, keep the data model clean in GraphQL, let Next.js own rendering and caching, and give editors previews that look exactly like production. Start simple, tag your fetches, and add complexity only when a real production need shows up. That\u2019s how you ship headless without the headache."})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(c,{...r})}):c(r)}return P(k);})(); ;return Component;