Guides · Node.js · built-in fetch

Capture a JavaScript-heavy page after it settles in Node.js with built-in fetch

Render a client-side app too early and the capture shows the loading state, not the page: skeleton placeholders where cards should be, a spinner where the chart goes, grey boxes where lazy images land. The page "loaded" — the load event fired — but the app was still fetching its data. "wait_until": "networkidle" moves the goalpost: the render proceeds only after the page stops making network requests for a quiet period.

Below is a complete, runnable Node.js program using built-in fetch, no third-party dependency needed. It reads your API key from the SNAPDOK_KEY environment variable — free keys take about thirty seconds and need no card.

import { writeFile } from "node:fs/promises";

const res = await fetch("https://snapdok.io/v1/render", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.SNAPDOK_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    url: "https://your-app.com/report/42",
    format: "png",
    full_page: true,
    wait_until: "networkidle",
    delay: 500,
  }),
});

if (!res.ok) throw new Error(`${res.status} ${await res.text()}`);
await writeFile("settled.png", Buffer.from(await res.arrayBuffer()));

The four stages, in order of patience: commit (bytes started arriving), domcontentloaded (HTML parsed), load (the default — static assets done), and networkidle (the network went quiet, which for an SPA usually means data fetched and rendered). delay then adds a fixed pause on top — the 500 ms here covers entrance animations and fade-ins that happen after the last fetch.

The cost of patience is time: networkidle on a page with analytics beacons or long-polling can take a while to go quiet, and a page that never goes quiet will run into timeout (a 504, never metered). If your page exposes a reliable "ready" element, wait_for_selector is the sharper tool — it waits for exactly the thing you care about, no more. There is a guide for it below.

Same endpoint, one more trick: if the page you are rendering has a form on it, adding "pdf_forms": true to a PDF render brings it back with real, fillable AcroForm fields — a PDF people can type into, not a picture of one. How that works.

Notes for built-in fetch

No dependency needed: fetch is global from Node 18 onward (snapdok's own test suite uses it). The binary-safety detail is res.arrayBuffer() → Buffer.from(...) — reaching for res.text() is the classic way to corrupt a PDF in Node. fetch does not reject on HTTP error statuses, so the res.ok check is load-bearing: without it, an expired key writes a 40-byte JSON error to disk with a .pdf extension.

Response headers worth reading

Header	Meaning
`X-Page-Height`	Measured document height for the full-page capture.
`X-Cache`	Identical requests within 24h replay for free.

Full parameter reference: the docs. Hard numbers on caps and timeouts: limits.

Capture a JavaScript-heavy page after it settles in Node.js with built-in fetch

Notes for built-in fetch

Response headers worth reading

Related guides

Same task, other stacks

More with Node.js + built-in fetch