Advanced

JavaScript Rendering

Many modern websites load content dynamically with JavaScript. Learn how to scrape SPAs, React apps, and AJAX-loaded content.

When Do You Need JS Rendering?

Enable JavaScript rendering when the target site:

  • Uses React, Vue, Angular, or other frontend frameworks
  • Loads content via AJAX/fetch requests
  • Has infinite scroll or lazy loading
  • Shows content behind click interactions

Enable JS Rendering

Simply add "render": true to your request:

javascript
{
  "url": "https://spa-website.com/products",
  "render": true,
  "selectors": {
    "products": ".product-card::all"
  }
}

Wait Strategies

Control when Scrpy considers the page "ready" for extraction:

javascript
{
  "url": "https://example.com",
  "render": true,
  "waitFor": ".product-grid",  // Wait for element
  "selectors": { ... }
}
javascript
{
  "url": "https://example.com",
  "render": true,
  "waitFor": 3000,  // Wait 3 seconds
  "selectors": { ... }
}
javascript
{
  "url": "https://example.com",
  "render": true,
  "waitFor": "networkidle",  // Wait for no network activity
  "selectors": { ... }
}

Page Interactions

Execute actions before extracting data:

javascript
{
  "url": "https://example.com",
  "render": true,
  "actions": [
    { "type": "click", "selector": ".load-more" },
    { "type": "wait", "value": 1000 },
    { "type": "scroll", "value": "bottom" },
    { "type": "type", "selector": "#search", "value": "shoes" },
    { "type": "click", "selector": "button[type=submit]" },
    { "type": "wait", "selector": ".results" }
  ],
  "selectors": {
    "results": ".product::all"
  }
}

Available Actions

ActionParametersDescription
clickselectorClick an element
typeselector, valueType text into input
scrollvalueScroll (px, "bottom", selector)
waitvalue | selectorWait ms or for element
screenshot-Capture screenshot

Viewport & Device Emulation

javascript
{
  "url": "https://example.com",
  "render": true,
  "viewport": {
    "width": 1920,
    "height": 1080
  },
  "device": "iPhone 14 Pro",  // Or custom viewport
  "selectors": { ... }
}

Credit Usage

Note: JavaScript rendering uses 5 credits per request (vs 1 credit for standard scrapes) due to the computational overhead of running a browser.

Related