ssr-hydration-scraping

Extract structured data from SSR hydration JSON blocks using jmespath.

Updated Mar 31, 2026
One-click install
npx skills add https://github.com/StarrySerendipity/N.E.K.O --skill ssr-hydration-scraping
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ssr-hydration-scraping
Source: https://github.com/StarrySerendipity/N.E.K.O/tree/main/.agent/skills/ssr-hydration-scraping
Command: npx skills add https://github.com/StarrySerendipity/N.E.K.O --skill ssr-hydration-scraping

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires jmespath.

What problem does it solve?

Modern SSR sites embed hydrated JSON blocks next to the HTML, but brittle DOM scraping breaks when dynamic content changes or minified classes appear. This Skill demonstrates how to reliably locate hydration blocks and extract their JSON payload for stable data retrieval.

Core Features & Use Cases

  • Identify SSR data blocks using regex to pull JSON from scripts like NEXT_DATA, Nuxt's window.NUXT, or INITIAL_STATE.
  • Leverage jmespath to query deep, nested SSR state structures to pull structured records (e.g., title, url).
  • Gracefully handle missing data and variations across frameworks, enabling reuse across Next.js, Nuxt.js, and similar SSR apps.

Quick Start

Run extract_ssr_data(html) on the HTML content of a target SSR page to obtain the hydrated data and print the extracted items.

Frequently Asked Questions about ssr-hydration-scraping

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract data from Next.js __NEXT_DATA__ hydration blocks instead of scraping the DOM?

To extract data from Next.js __NEXT_DATA__ hydration blocks, you locate the embedded JSON script tags using regex and query the structured payload with jmespath, bypassing brittle DOM scraping for stable data retrieval.

Why does my web scraping break on modern SSR sites when dynamic content loads?

Web scraping breaks on SSR sites because dynamic content loads and minified classes change the DOM structure. Extracting hydration blocks like __NUXT__ or __INITIAL_STATE__ provides stable structured JSON data instead.

What's the best way to scrape Nuxt.js pages with nested state structures?

The best way to scrape Nuxt.js pages with nested state is locating the window.__NUXT__ hydration block with regex and applying jmespath to safely query deep structures, gracefully handling missing data across variations.

Can I use jmespath to query deep SSR state structures across different frameworks?

Yes, you can use jmespath to query deep SSR state structures across frameworks like Next.js and Nuxt.js. It enables safe deep querying of nested JSON payloads extracted from hydration blocks.

Does extracting SSR hydration blocks work for dynamic content loads and pagination?

Yes, extracting SSR hydration blocks works for dynamic content loads and pagination. It reliably surfaces item lists and metadata by parsing the embedded JSON state across these dynamic variations.

When should I not use DOM scraping for SSR pages?

You should not use DOM scraping for SSR pages when minified classes appear or dynamic content changes structure. Locating hydration blocks like __INITIAL_STATE__ ensures reliable extraction without brittle selectors.