Guides · Node.js · axios
Use the 24-hour render cache to cut costs in Node.js with axios
Every response carries an X-Cache header, and it is worth wiring into your logs on day one: HIT means the bytes came from the 24-hour cache — served in milliseconds and not counted against your quota. MISS means a real browser rendered the page and one render was metered.
Below is a complete, runnable Node.js program using axios (npm install axios). 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";
import axios from "axios";
const res = await axios.post(
"https://snapdok.io/v1/render",
{
url: "https://your-app.com/report/42",
format: "png",
width: 1280,
},
{
headers: { "Authorization": `Bearer ${process.env.SNAPDOK_KEY}` },
responseType: "arraybuffer",
timeout: 90_000,
},
);
await writeFile("shot.png", Buffer.from(res.data));
console.log(res.headers["x-cache"], "// HIT = free, MISS = rendered and metered");
The cache key is the normalised request body: URL plus every rendering parameter. Same URL at a different width, format or scale is a different entry; alias spellings (device_scale_factor vs device_scale) are folded together first, so they share an entry. Failed renders are never cached and never metered.
Two design consequences. First, idempotent retries are safe: a queue worker that re-fires the same job inside a day costs nothing extra. Second, if you need a fresh render of a page that just changed under the same URL, vary the request — the pragmatic trick is a throwaway query parameter on the target URL (?v=deploy-id), which changes the fingerprint and forces a MISS. Rate limiting still applies to HITs (it protects the endpoint, not the renderer), so keep an eye on X-RateLimit-Remaining in tight loops.
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 axios
The one axios setting that matters here is responseType: "arraybuffer" — axios defaults to parsing responses as JSON/text, which silently mangles binary bodies. Unlike fetch, axios does throw on non-2xx responses; the error's error.response.data will be an ArrayBuffer too (because of responseType), so decode it with Buffer.from(data).toString() when you want to read the JSON error message. Response headers arrive lower-cased on res.headers.
Response headers worth reading
| Header | Meaning |
|---|---|
X-Cache | HIT or MISS. |
X-Quota-Remaining | Metered renders left this month. |
X-RateLimit-Remaining | Requests left in the current second. |
Full parameter reference: the docs. Hard numbers on caps and timeouts: limits.
Related guides
Same task, other stacks
- Use the 24-hour render cache to cut costs in Python with requests
- Use the 24-hour render cache to cut costs in Python with httpx
- Use the 24-hour render cache to cut costs in Node.js with built-in fetch
- Use the 24-hour render cache to cut costs in PHP with cURL extension
- Use the 24-hour render cache to cut costs in Ruby with Net::HTTP
More with Node.js + axios
- Convert a URL to PDF
- Take a full-page screenshot
- Capture very tall pages as numbered tiles
- Take a retina-quality (2x) screenshot
- Take a JPEG screenshot at a custom viewport size
- Take a screenshot of a URL
- Capture a JavaScript-heavy page after it settles
- Wait for a specific element before capturing
- Add page numbers and headers to a PDF