mcpbeat Sign in

Rendering Strategies Agent Skill

by kostja94

When the user wants to choose or optimize rendering strategy for SEO. Also use when the user mentions "SSR," "SSG," "CSR," "ISR," "static rendering," "dynamic rendering," "server-side rendering," "client-side rendering," "JavaScript rendering," "pre-rendering," "prerender," "content in initial HTML," or "crawler visibility." For crawl issues, use site-crawlability.

2k tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
836
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/kostja94/marketing-skills --skill rendering-strategies

The instruction itself

13 sections, as written by the author

SEO Technical: Rendering Strategies

Guides rendering strategy selection and optimization for search engine and AI crawler visibility. Golden rule: Page data and metadata must be available on page load without JavaScript execution for optimal SEO.

When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

Scope (Technical SEO)

  • Static vs dynamic: SSG, SSR, ISR, CSR; when to use each
  • Crawler behavior: Googlebot renders JS (with delays); AI crawlers do not
  • Component-level: Content in initial HTML; tabs, carousels, nav
  • Dynamic rendering: Prerender for bots when full SSR/SSG is not feasible

Rendering Methods

| Method | When HTML generated | SEO | Best for |

|--------|---------------------|-----|----------|

| SSG (Static Site Generation) | Build time | ✅ Best | Blog, docs, marketing pages; content rarely changes |

| SSR (Server-Side Rendering) | Request time | ✅ Good | News, product pages; dynamic, personalized content |

| ISR (Incremental Static Regeneration) | Build + revalidate | ✅ Good | Large sites; static with periodic updates |

| CSR (Client-Side Rendering) | Browser (after JS) | ❌ Poor | Dashboards, account pages; no SEO needed |

| Dynamic rendering | On-demand for bots | ✅ Fallback | SPAs; prerender for crawlers, SPA for users |

SSG (Static Site Generation)

HTML generated at build time; same HTML for every request. Best for SEO: crawlers receive full HTML immediately; optimal performance.

  • Use when: Blog, docs, marketing pages, content that doesn't change frequently
  • Framework: Next.js getStaticProps, Astro, Gatsby

SSR (Server-Side Rendering)

HTML generated on each request. Good for SEO: crawlers receive complete HTML; supports dynamic, personalized content.

  • Use when: News, product pages, user-specific content
  • Tradeoff: Higher server load; slower TTFB than SSG
  • Framework: Next.js getServerSideProps, Remix

ISR (Incremental Static Regeneration)

Static at build; pages can revalidate after a period. Good for SEO: combines static performance with freshness.

  • Use when: Large sites (millions of pages); content updates periodically
  • Framework: Next.js revalidate in getStaticProps

CSR (Client-Side Rendering)

Server sends minimal HTML shell; content renders in browser after JS loads. Not for SEO: crawlers may see empty content; indexing delays or failures.

  • Use when: Dashboards, account pages, internal tools—no search visibility needed
  • Avoid for: Public content, marketing pages, blog

Dynamic Rendering

Serve prerendered HTML to crawlers; serve SPA to users. Fallback when full SSR/SSG is not feasible (e.g. legacy SPA migration).

  • How: Detect crawler user-agent; route to prerender service (e.g. Prerender.io) or headless render
  • When: JavaScript-heavy sites; migration period; product/docs with CSR
  • Note: Google permits this; prerendered content should match user experience

Crawler Behavior

| Crawler | JavaScript | Content in initial HTML |

|---------|------------|-------------------------|

| Googlebot | Renders JS (Chrome); may have multi-day queue | Full weight; SSR/SSG preferred |

| AI crawlers (GPTBot, ClaudeBot, PerplexityBot) | Do not execute JS | Required—CSR content invisible |

| Bingbot | Renders JS | Same as Googlebot |

AI crawlers: ~28% of Googlebot's crawl volume. Critical content (articles, meta, nav) must be in initial HTML. See site-crawlability for AI crawler optimization; generative-engine-optimization for GEO.

Component-Level: Content in Initial HTML

Google does not simulate user clicks (tabs, carousels, "Load more"). Content loaded via AJAX or on interaction is not discoverable.

| Component | Requirement | Implementation |

|------------|-------------|----------------|

| Tabs / Accordion | All tab content in DOM at load | Server-render; use <details>/<summary> or CSS show/hide |

| Carousel | All slides in initial HTML | Server-render; CSS/JS for show/hide only |

| Hero | Headline, CTA, LCP image in HTML | No JS-only rendering |

| Navigation | All nav links in first paint | No JS-injected menus for critical links |

Recommendation: Server-render (SSR/SSG) all critical content; use JS only for interaction (show/hide, animation). Content loaded on click = not indexed.

Decision Guide

| Content type | Rendering | Reason |

|--------------|-----------|--------|

| Blog, docs, marketing | SSG or ISR | Best SEO; fast; static |

| Product, news, dynamic | SSR | Fresh content; crawler-ready |

| Dashboard, account | CSR | No SEO; auth required |

| Legacy SPA | Dynamic rendering | Bridge until SSR/SSG migration |

Output Format

  • Current setup: SSG, SSR, CSR, or hybrid
  • Recommendation: By page type
  • Component checks: Tabs, carousel, nav—content in initial HTML?
  • References: Next.js Rendering, Vercel SSR vs SSG

Related Skills

  • site-crawlability: AI crawler optimization; SSR for critical content; URL management
  • generative-engine-optimization: GEO; AI crawlers don't execute JS
  • core-web-vitals: LCP; SSR/SSG for above-fold; client-side hurts LCP
  • mobile-friendly: Mobile-first indexing; content parity
  • tab-accordion: Content in DOM at load; server-render tabs
  • carousel: Content in initial HTML; server-render slides
  • hero-generator: Hero in initial HTML; avoid JS-only
  • navigation-menu-generator: Nav in first paint; no JS-only menus

Other skills for the same job

different authors, same section of the catalogue
Apify Ultimate Scraper
by apify
vendor ×1

Universal AI-powered web scraper for any platform. Scrape data from Instagram, Facebook, TikTok, YouTube, LinkedIn, X/Twitter, Google Maps, Google Search, Google Trends, Reddit, Airbnb, Yelp, and 15+ more platforms. Use for lead generation, brand monitoring, competitor analysis, influencer discovery, trend research, content analytics, audience analysis, review analysis, SEO intelligence, recruitment, or any data extraction task.

20k tokens
Ebay Sold Listings Search
by browser-act

eBay sold-listings scraper across 8 marketplaces (ebay.com/.co.uk/.de/.fr/.it/.es/.ca/.com.au). Takes keyword plus filters (category, price range, item condition, item location, sort order, completed toggle) and returns paginated real-sale records with itemId, url, title, condition, conditionId, endedAt, soldPrice, soldCurrency, listingType (best_offer_accepted / buy_it_now / auction), isBestOfferAccepted, buyingFormat, bidCount, shipping, totalPrice, thumbnails, seller info, sellerType. Use when user mentions ebay sold, ebay sold listings, ebay sold prices, ebay completed listings, ebay comps, ebay resale prices, ebay auction sold results, ebay best offer accepted, scrape ebay sold, ebay market research, ebay pricing intelligence, ebay flipping research, real sold prices ebay, get sold prices from ebay. Also applies to price benchmarking, sold-price analytics, resale valuation, cross-marketplace price arbitrage, appraisal for collectibles, brand demand tracking on ebay.

10k tokens scripts
Etsy Keyword Search
by browser-act

Etsy keyword search scraper: given a search keyword and optional page number, returns paginated product listings with listingId, shopId, title, url, image, salePrice, originalPrice, currency, rating, reviewCount, shopName, isAd, freeShipping, badge from etsy.com search results. Use when user mentions Etsy, etsy.com, Etsy search, search Etsy by keyword, scrape Etsy listings, extract Etsy products, Etsy product search, Etsy marketplace search, find products on Etsy, Etsy handmade search, Etsy vintage search, Etsy craft search, bulk Etsy product export, Etsy price monitoring, Etsy competitor research, Etsy top listings, Etsy bestseller extraction, Etsy sales data, Etsy shop discovery via keyword. Also applies to trend research on handmade or craft niches, competitor keyword ranking on Etsy, sourcing Etsy suppliers by product type, and any paginated bulk product collection driven by a search keyword.

4k tokens scripts
Etsy Product Detail
by browser-act

Etsy product detail scraper: given an Etsy listing URL, returns full product detail including listingId, title, priceCurrent, priceOriginal, currency, images (all), description, shopName, shopUrl, rating, reviewCount, favorites, inCartCount, variations (with per-option price ranges), highlights, listedDate, relatedTags. Use when user mentions Etsy product, Etsy listing detail, Etsy item info, Etsy product page, scrape Etsy listing, extract Etsy product data, Etsy price and variations, Etsy product images, Etsy product description, Etsy shop from listing, Etsy favorites count, Etsy sale count, Etsy variations extraction, Etsy listing metadata, single Etsy product scrape, bulk enrich Etsy listing URLs, Etsy product details export. Also applies to competitor product monitoring, price and variation tracking on a specific listing, favorites/wishlist popularity tracking, description mining for SEO analysis, and any per-listing enrichment task.

4k tokens scripts
Goofish Search List
by browser-act

Scrapes second-hand item search results from Goofish (闲鱼/xianyu, goofish.com) — China's largest second-hand marketplace. Input: keyword, optional sort/filter params. Output: list of items with id, title, price, image, location, want-count per page (30 items/page). Use when user mentions goofish, 闲鱼, xianyu, 二手交易, second-hand marketplace China, 二手商品搜索, search used goods, scrape goofish listings, xianyu search results, collect second-hand prices, monitor used item prices, 闲鱼关键词搜索, 闲鱼数据采集, 批量抓取闲鱼, goofish scraper, goofish data, xianyu data extraction, 二手商品价格监控, used iPhone prices, 二手手机价格. Also applies to: price research on Chinese second-hand market, competitor product monitoring via used goods listings, inventory analysis.

4k tokens scripts
Google Maps API Skill
by browser-act

This skill helps users automatically scrape business data from Google Maps using the BrowserAct Google Maps API. Agent should proactively trigger this skill for needs like finding restaurants in a specific city, extracting contact info of dental clinics, researching local competitors, collecting addresses of coffee shops, generating lead lists for specific industries, monitoring business ratings and reviews, getting opening hours of local services, finding specialized stores (e.g., Turkish-style restaurants), analyzing business categories in a region, extracting website links from local businesses, gathering phone numbers for sales outreach, mapping out service providers in a specific country.

2k tokens scripts
Google Search Serp
by browser-act

Extracts Google Search results page (SERP) data including organic results, paid ads, related searches, People Also Ask questions, AI Overview text, and total result count from google.com. Use when user mentions Google search results, SERP scraping, google search data, search engine results page, organic rankings, keyword SERP, Google SERP extraction, scrape Google search, Google search API alternative, SEO ranking data, paid search ads, PPC ads on Google, Google search monitoring, keyword research, search results export, check Google rankings, what shows up on Google, search engine scraper, google results checker.

3k tokens scripts
Indeed Job Search
by browser-act

Scrape job listings from Indeed.com by keyword, location, and country. Returns job title, company, salary, rating, description, benefits, and apply links. Use when user mentions Indeed, Indeed scraper, Indeed jobs, scrape Indeed, job search Indeed, Indeed job listings, extract Indeed data, Indeed job data, get jobs from Indeed, Indeed employment data, job market research Indeed, Indeed salary data, bulk job extraction Indeed, Indeed job scraper, monitor Indeed listings, Indeed hiring data, job postings Indeed, Indeed career search. Also applies to: job market analysis, salary benchmarking from Indeed, competitor hiring monitoring, recruitment data collection, building job databases from Indeed search results.

4k tokens scripts

How to use it

Copy the folder

Take kostja94/rendering-strategies from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.