Screenshot API for SPA, SSR, and Dynamic Pages | ScreenshotCenter

Why dynamic pages fail with simple screenshot tools

Single-page applications (SPAs) built with React, Vue, or Angular render content after the initial HTML loads. Server-side rendered (SSR) frameworks like Next.js and Nuxt may hydrate interactively. If the screenshot tool fires before JavaScript finishes, you get a blank page, a loading spinner, or incomplete content.

ScreenshotCenter uses a real Chromium browser that waits for network idle, DOM stability, or your custom selectors before capturing. This article covers the strategies that guarantee pixel-perfect results on the most dynamic pages.

Wait strategies

1. Network idle (default)

By default, ScreenshotCenter waits until the page has had no more than two open network connections for 500 ms. This catches most API calls, lazy-loaded images, and font downloads. For most SSR pages, the default is sufficient.

2. Fixed delay

Set delay (in milliseconds) to add a pause after the page loads. Useful for pages that trigger animations, carousels, or timed reveals:

{
  "url": "https://app.example.com/dashboard",
  "delay": 5000,
  "format": "png"
}

3. Wait for selector

The most precise strategy. Use wait_for to specify a CSS selector that must appear before the screenshot fires:

{
  "url": "https://app.example.com/report",
  "wait_for": ".report-table tbody tr",
  "format": "png"
}

The browser polls every 100 ms for up to 30 seconds. As soon as the selector matches, the screenshot captures immediately.

Click and scroll flows

Some pages hide content behind tabs, accordions, or "Load more" buttons. Use automation steps to interact with the page before capturing:

• Click a tab: Open a specific section of a dashboard or report.
• Scroll to bottom: Trigger infinite-scroll loading so the full page is rendered.
• Dismiss a modal: Close a cookie banner or pop-up before capturing clean content.

Best practices for SPA screenshots

Practice	Why
Prefer wait_for over fixed delay	Faster and deterministic — no wasted seconds
Use size=page for full-page captures	SPAs often have variable-height content
Set hide_popup=true	Removes cookie banners that overlap content
Test with format=png first	Easier to debug visually before switching to PDF
Combine with country	Localized SPAs may render different content per region

Example: capturing a React dashboard

curl -X POST https://api.screenshotcenter.com/v1/screenshot \
  -H "X-API-KEY: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://app.example.com/analytics",
    "wait_for": ".chart-container svg",
    "delay": 2000,
    "size": "page",
    "format": "png",
    "hide_popup": true
  }'

The browser waits for the chart SVG to render, adds a 2-second buffer for animations, then captures the entire page without cookie banners.

FAQ

Does ScreenshotCenter execute JavaScript?

Yes. Every screenshot runs in a real Chromium instance with full JavaScript execution — React, Vue, Angular, Svelte, and any other framework.

What happens if the selector never appears?

After 30 seconds, the browser captures whatever is currently on screen. Check the status field for warnings.

Can I screenshot an SPA that requires login?

Yes — combine wait_for with cookies or automation steps for authenticated pages.

Ready to capture dynamic pages? Run a dynamic-page capture now.