How to Capture a Contentful-Powered Site in Node.js

Contentful is a headless CMS — the content lives in Contentful, but the actual rendering is done by whatever frontend consumes its API, commonly a Next.js, Gatsby, or custom Node.js-rendered site. That split matters for screenshotting: the page you're capturing is really the frontend's rendering of Contentful data, not Contentful itself, and it can have its own loading behavior separate from the CMS.

Why Contentful-Powered Sites Have Their Own Quirks

• Client-side data fetching is common when a frontend fetches Contentful content after the initial page shell loads, rather than during server-side rendering.
• Rich text and embedded assets from Contentful's rich text fields can include images or embedded components that load asynchronously.
• Preview vs. published content — a staging environment showing draft Contentful entries can look different from the published site, so knowing which one you're capturing matters.

Node.js Example

const response = await fetch("https://api.prod.ss.snapshot-site.com/api/v1/screenshot", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "x-snapshotsiteapi-key": "YOUR_API_KEY",
  },
  body: JSON.stringify({
    url: "https://example.com/blog/latest-article",
    format: "png",
    width: 1440,
    height: 900,
    fullSize: true,
    hideCookie: true,
    delay: 2,
  }),
});

const data = await response.json();
console.log(data);

delay covers the gap between the page's initial render and any client-side Contentful data fetch resolving afterward.

Practical Recommendations

• Use delay for any frontend that fetches Contentful data client-side. A short delay (1-2 seconds) is usually enough for the content to populate.
• Capture the preview environment separately from production if you need to confirm what a draft entry looks like before publishing — these are genuinely different URLs, not the same page in two states.
• Default to fullSize: true for articles and landing pages. Content-heavy pages built on a headless CMS are usually longer than a single screen.

Common Use Cases

• Visual QA before publishing a content update from Contentful
• Screenshotting a preview URL for editorial review before a piece goes live
• Archiving published articles and landing pages at their point-in-time state
• Catching a frontend regression that only affects how Contentful data renders, not the data itself

If you're not sure whether a plain capture or v2's cleanup options fit a content-heavy page better, see Snapshot API v1 vs v2 vs v3: Which Endpoint Should You Use?.

For teams running a headless CMS stack, Snapshot Site captures what the frontend actually renders, not just what the CMS stored.