[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71ASMHX7FKTKFSF065HW4P7":3,"skill-same:01M71ASMHX7FKTKFSF065HW4P7":77},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":53,"commitSha":54,"skillDirectory":55,"forksCount":56,"repositoryHtmlUrl":57,"repositoryHomepageUrl":58,"ownerHtmlUrl":59,"ownerBlogUrl":60,"ownerDescription":61,"updatedAt":62,"install":63,"resources":76},"01M71ASMHX7FKTKFSF065HW4P7","rendering-strategies",null,"When the user wants to choose or optimize rendering strategy for SEO. Also use when the user mentions \"SSR\", \"SSG\", \"CSR\" or \"ISR\". For crawl issues, use site-crawlability.","ariadoss\u002Fsuperskills","ariadoss","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F414341?v=4","01M71AC7383PT6JCRZSQJ4AVTM","Danilo Stern-Sapad","01M71AC73Y7NTBTJ9KQYNENRRE",12,"MIT","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fmarketing-skills\u002Fseo\u002Ftechnical\u002Frendering-strategies\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000019","营销推广","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000035","市场营销","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"rendering strategies","rendering","strategies","user","ssg","site","ssr","optimize","when","use","crawlability","strategy","issues","choose","for","seo","crawl","2026-11-10 10:12:30",false,"---\nname: rendering-strategies\ndescription: When the user wants to choose or optimize rendering strategy for SEO. Also use when the user mentions \"SSR\", \"SSG\", \"CSR\" or \"ISR\". For crawl issues, use site-crawlability.\nmetadata:\n  version: 1.0.2\n---\n\n# SEO Technical: Rendering Strategies\n\nGuides 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.\n\n**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.\n\n## Scope (Technical SEO)\n\n- **Static vs dynamic**: SSG, SSR, ISR, CSR; when to use each\n- **Crawler behavior**: Googlebot renders JS (with delays); AI crawlers do not\n- **Component-level**: Content in initial HTML; tabs, carousels, nav\n- **Dynamic rendering**: Prerender for bots when full SSR\u002FSSG is not feasible\n\n## Rendering Methods\n\n| Method | When HTML generated | SEO | Best for |\n|--------|---------------------|-----|----------|\n| **SSG** (Static Site Generation) | Build time | ✅ Best | Blog, docs, marketing pages; content rarely changes |\n| **SSR** (Server-Side Rendering) | Request time | ✅ Good | News, product pages; dynamic, personalized content |\n| **ISR** (Incremental Static Regeneration) | Build + revalidate | ✅ Good | Large sites; static with periodic updates |\n| **CSR** (Client-Side Rendering) | Browser (after JS) | ❌ Poor | Dashboards, account pages; no SEO needed |\n| **Dynamic rendering** | On-demand for bots | ✅ Fallback | SPAs; prerender for crawlers, SPA for users |\n\n### SSG (Static Site Generation)\n\nHTML generated at build time; same HTML for every request. **Best for SEO**: crawlers receive full HTML immediately; optimal performance.\n\n- **Use when**: Blog, docs, marketing pages, content that doesn't change frequently\n- **Framework**: Next.js `getStaticProps`, Astro, Gatsby\n\n### SSR (Server-Side Rendering)\n\nHTML generated on each request. **Good for SEO**: crawlers receive complete HTML; supports dynamic, personalized content.\n\n- **Use when**: News, product pages, user-specific content\n- **Tradeoff**: Higher server load; slower TTFB than SSG\n- **Framework**: Next.js `getServerSideProps`, Remix\n\n### ISR (Incremental Static Regeneration)\n\nStatic at build; pages can revalidate after a period. **Good for SEO**: combines static performance with freshness.\n\n- **Use when**: Large sites (millions of pages); content updates periodically\n- **Framework**: Next.js `revalidate` in `getStaticProps`\n\n### CSR (Client-Side Rendering)\n\nServer sends minimal HTML shell; content renders in browser after JS loads. **Not for SEO**: crawlers may see empty content; indexing delays or failures.\n\n- **Use when**: Dashboards, account pages, internal tools—no search visibility needed\n- **Avoid for**: Public content, marketing pages, blog\n\n### Dynamic Rendering\n\nServe prerendered HTML to crawlers; serve SPA to users. **Fallback** when full SSR\u002FSSG is not feasible (e.g. legacy SPA migration).\n\n- **How**: Detect crawler user-agent; route to prerender service (e.g. Prerender.io) or headless render\n- **When**: JavaScript-heavy sites; migration period; product\u002Fdocs with CSR\n- **Note**: Google permits this; prerendered content should match user experience\n\n## Crawler Behavior\n\n| Crawler | JavaScript | Content in initial HTML |\n|---------|------------|-------------------------|\n| **Googlebot** | Renders JS (Chrome); may have multi-day queue | Full weight; SSR\u002FSSG preferred |\n| **AI crawlers** (GPTBot, ClaudeBot, PerplexityBot) | Do **not** execute JS | **Required**—CSR content invisible |\n| **Bingbot** | Renders JS | Same as Googlebot |\n\n**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.\n\n## Component-Level: Content in Initial HTML\n\nGoogle does **not** simulate user clicks (tabs, carousels, \"Load more\"). Content loaded via AJAX or on interaction is not discoverable.\n\n| Component | Requirement | Implementation |\n|------------|-------------|----------------|\n| **Tabs \u002F Accordion** | All tab content in DOM at load | Server-render; use `\u003Cdetails>`\u002F`\u003Csummary>` or CSS show\u002Fhide |\n| **Carousel** | All slides in initial HTML | Server-render; CSS\u002FJS for show\u002Fhide only |\n| **Hero** | Headline, CTA, LCP image in HTML | No JS-only rendering |\n| **Navigation** | All nav links in first paint | No JS-injected menus for critical links |\n\n**Recommendation**: Server-render (SSR\u002FSSG) all critical content; use JS only for interaction (show\u002Fhide, animation). Content loaded on click = not indexed.\n\n## Decision Guide\n\n| Content type | Rendering | Reason |\n|--------------|-----------|--------|\n| Blog, docs, marketing | SSG or ISR | Best SEO; fast; static |\n| Product, news, dynamic | SSR | Fresh content; crawler-ready |\n| Dashboard, account | CSR | No SEO; auth required |\n| Legacy SPA | Dynamic rendering | Bridge until SSR\u002FSSG migration |\n\n## Output Format\n\n- **Current setup**: SSG, SSR, CSR, or hybrid\n- **Recommendation**: By page type\n- **Component checks**: Tabs, carousel, nav—content in initial HTML?\n- **References**: [Next.js Rendering](https:\u002F\u002Fnextjs.org\u002Flearn\u002Fseo\u002Frendering-strategies), [Vercel SSR vs SSG](https:\u002F\u002Fvercel.com\u002Fblog\u002Fnextjs-server-side-rendering-vs-static-generation)\n\n## Related Skills\n\n- **site-crawlability**: AI crawler optimization; SSR for critical content; URL management\n- **generative-engine-optimization**: GEO; AI crawlers don't execute JS\n- **core-web-vitals**: LCP; SSR\u002FSSG for above-fold; client-side hurts LCP\n- **mobile-friendly**: Mobile-first indexing; content parity\n- **tab-accordion**: Content in DOM at load; server-render tabs\n- **carousel**: Content in initial HTML; server-render slides\n- **hero-generator**: Hero in initial HTML; avoid JS-only\n- **navigation-menu-generator**: Nav in first paint; no JS-only menus\n","# SEO Technical: Rendering Strategies\n\nGuides 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.\n\n**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.\n\n## Scope (Technical SEO)\n\n- **Static vs dynamic**: SSG, SSR, ISR, CSR; when to use each\n- **Crawler behavior**: Googlebot renders JS (with delays); AI crawlers do not\n- **Component-level**: Content in initial HTML; tabs, carousels, nav\n- **Dynamic rendering**: Prerender for bots when full SSR\u002FSSG is not feasible\n\n## Rendering Methods\n\n| Method | When HTML generated | SEO | Best for |\n|--------|---------------------|-----|----------|\n| **SSG** (Static Site Generation) | Build time | ✅ Best | Blog, docs, marketing pages; content rarely changes |\n| **SSR** (Server-Side Rendering) | Request time | ✅ Good | News, product pages; dynamic, personalized content |\n| **ISR** (Incremental Static Regeneration) | Build + revalidate | ✅ Good | Large sites; static with periodic updates |\n| **CSR** (Client-Side Rendering) | Browser (after JS) | ❌ Poor | Dashboards, account pages; no SEO needed |\n| **Dynamic rendering** | On-demand for bots | ✅ Fallback | SPAs; prerender for crawlers, SPA for users |\n\n### SSG (Static Site Generation)\n\nHTML generated at build time; same HTML for every request. **Best for SEO**: crawlers receive full HTML immediately; optimal performance.\n\n- **Use when**: Blog, docs, marketing pages, content that doesn't change frequently\n- **Framework**: Next.js `getStaticProps`, Astro, Gatsby\n\n### SSR (Server-Side Rendering)\n\nHTML generated on each request. **Good for SEO**: crawlers receive complete HTML; supports dynamic, personalized content.\n\n- **Use when**: News, product pages, user-specific content\n- **Tradeoff**: Higher server load; slower TTFB than SSG\n- **Framework**: Next.js `getServerSideProps`, Remix\n\n### ISR (Incremental Static Regeneration)\n\nStatic at build; pages can revalidate after a period. **Good for SEO**: combines static performance with freshness.\n\n- **Use when**: Large sites (millions of pages); content updates periodically\n- **Framework**: Next.js `revalidate` in `getStaticProps`\n\n### CSR (Client-Side Rendering)\n\nServer sends minimal HTML shell; content renders in browser after JS loads. **Not for SEO**: crawlers may see empty content; indexing delays or failures.\n\n- **Use when**: Dashboards, account pages, internal tools—no search visibility needed\n- **Avoid for**: Public content, marketing pages, blog\n\n### Dynamic Rendering\n\nServe prerendered HTML to crawlers; serve SPA to users. **Fallback** when full SSR\u002FSSG is not feasible (e.g. legacy SPA migration).\n\n- **How**: Detect crawler user-agent; route to prerender service (e.g. Prerender.io) or headless render\n- **When**: JavaScript-heavy sites; migration period; product\u002Fdocs with CSR\n- **Note**: Google permits this; prerendered content should match user experience\n\n## Crawler Behavior\n\n| Crawler | JavaScript | Content in initial HTML |\n|---------|------------|-------------------------|\n| **Googlebot** | Renders JS (Chrome); may have multi-day queue | Full weight; SSR\u002FSSG preferred |\n| **AI crawlers** (GPTBot, ClaudeBot, PerplexityBot) | Do **not** execute JS | **Required**—CSR content invisible |\n| **Bingbot** | Renders JS | Same as Googlebot |\n\n**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.\n\n## Component-Level: Content in Initial HTML\n\nGoogle does **not** simulate user clicks (tabs, carousels, \"Load more\"). Content loaded via AJAX or on interaction is not discoverable.\n\n| Component | Requirement | Implementation |\n|------------|-------------|----------------|\n| **Tabs \u002F Accordion** | All tab content in DOM at load | Server-render; use `\u003Cdetails>`\u002F`\u003Csummary>` or CSS show\u002Fhide |\n| **Carousel** | All slides in initial HTML | Server-render; CSS\u002FJS for show\u002Fhide only |\n| **Hero** | Headline, CTA, LCP image in HTML | No JS-only rendering |\n| **Navigation** | All nav links in first paint | No JS-injected menus for critical links |\n\n**Recommendation**: Server-render (SSR\u002FSSG) all critical content; use JS only for interaction (show\u002Fhide, animation). Content loaded on click = not indexed.\n\n## Decision Guide\n\n| Content type | Rendering | Reason |\n|--------------|-----------|--------|\n| Blog, docs, marketing | SSG or ISR | Best SEO; fast; static |\n| Product, news, dynamic | SSR | Fresh content; crawler-ready |\n| Dashboard, account | CSR | No SEO; auth required |\n| Legacy SPA | Dynamic rendering | Bridge until SSR\u002FSSG migration |\n\n## Output Format\n\n- **Current setup**: SSG, SSR, CSR, or hybrid\n- **Recommendation**: By page type\n- **Component checks**: Tabs, carousel, nav—content in initial HTML?\n- **References**: [Next.js Rendering](https:\u002F\u002Fnextjs.org\u002Flearn\u002Fseo\u002Frendering-strategies), [Vercel SSR vs SSG](https:\u002F\u002Fvercel.com\u002Fblog\u002Fnextjs-server-side-rendering-vs-static-generation)\n\n## Related Skills\n\n- **site-crawlability**: AI crawler optimization; SSR for critical content; URL management\n- **generative-engine-optimization**: GEO; AI crawlers don't execute JS\n- **core-web-vitals**: LCP; SSR\u002FSSG for above-fold; client-side hurts LCP\n- **mobile-friendly**: Mobile-first indexing; content parity\n- **tab-accordion**: Content in DOM at load; server-render tabs\n- **carousel**: Content in initial HTML; server-render slides\n- **hero-generator**: Hero in initial HTML; avoid JS-only\n- **navigation-menu-generator**: Nav in first paint; no JS-only menus\n",{"name":5,"metadata":51,"description":7},{"version":52},"1.0.2","main","c7ec8d78e5dc37484c2cfe90ab04de163d97dd41","marketing-skills\u002Fseo\u002Ftechnical\u002Frendering-strategies",0,"https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills","https:\u002F\u002Fhyperion360.com\u002Fblog\u002Fparallel-ai-agents-engineering-workflow\u002F","https:\u002F\u002Fgithub.com\u002Fariadoss","https:\u002F\u002Fdanilosapad.com\u002F","CEO & Founder of @Hyperion360","2026-11-01 12:36:50",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add ariadoss\u002Fsuperskills --skill rendering-strategies",{"tool":69,"command":70},"bunx","bunx skills add ariadoss\u002Fsuperskills --skill rendering-strategies",{"tool":72,"command":73},"pnpm","pnpm dlx skills add ariadoss\u002Fsuperskills --skill rendering-strategies","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fmarketing-skills\u002Fseo\u002Ftechnical\u002Frendering-strategies\u002FSKILL.md",true,[],[78,102,126,145,172,188],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":87,"publishedAt":46},"01M71AZE3MPF891RM354EMRYA1","youtube","Download YouTube video transcripts when user provides a YouTube URL or asks to download\u002Fget\u002Ffetch a transcript from YouTube. Also use when user wants to transcribe or get captions\u002Fsubtitles from a YouTube video.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube\u002FSKILL.md",[84],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[80,32,88,89,90,91,92,93,94,37,95,96,97,98,99,38,100,101],"download","transcribe","write","transcript","video transcripts","Bash","URL","Captions","get","fetch","Video","read","subtitles","transcripts",{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":46},"01M71AZAYR85PW6BJGSQXS4BN2","write-plan","Use when you have a spec or requirements for a multi-step task, before touching code. Produces an engineering plan complete with TDD tasks, DRY\u002FSOLID\u002FYAGNI principles, a required Test Plan & Verification section, and a coverage target — then auto-runs \u002Fplan-eng-review as an independent double-check before execution.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fwrite-plan\u002FSKILL.md",[],[109,110,90,111,112,113,114,115,116,37,117,118,119,120,121,43,122,123,124,125],"write plan","plan","dry","verification","review","tasks","code","you","auto","eng","coverage","complete","section","test plan","target","as","yagni",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":132,"publishedAt":46},"01M71AZ8NDDP5ZMGEE6FSC4FKR","worktrees","Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fworktrees\u002FSKILL.md",[],[128,133,134,135,38,136,137,138,139,140,141,112,142,37,143,144],"implementation","workspace","with","plans","feature","isolation","git","directory","work","git worktrees","selection","Safety",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":154,"publishedAt":46},"01M71AZ4ZQHTNWFRZVYHKQFP08","web-perf","Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fweb-perf\u002FSKILL.md",[151],{"categoryNo":152,"categoryName":153,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[155,156,157,158,159,160,36,161,162,37,163,164,165,41,166,167,168,169,170,171],"web","perf","web perf","resources","MCP","layout","documentation","caching","qa","knowledge","devtools","render","re","performance","chrome devtools","vitals","never",{"skillNo":173,"name":174,"nameZh":6,"description":175,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":176,"categories":177,"keywords":178,"publishedAt":46},"01M71AZ2KZNWYEGKKRMJH8PYG2","verify","Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fverify\u002FSKILL.md",[],[174,120,179,180,141,112,181,182,37,183,38,184,185,186,187],"commands","about","claims","output","assertions","claim","prs","evidence","running",{"skillNo":189,"name":190,"nameZh":6,"description":191,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":192,"categories":193,"keywords":194,"publishedAt":46},"01M71AZ0ACCK7N1QMWQK1FV2HJ","validate-idea","Validate a business idea using the minimalist entrepreneur framework. Use when someone has a business idea and wants to test if it's worth pursuing before building anything.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fvalidate-idea\u002FSKILL.md",[],[195,196,197,198,199,200,201,37,202,38,203],"validate","idea","validate idea","framework","it","minimalist","test","business","before building"]