skills.rest
tankpkg
tankpkgOFFICIAL
Explore all skills by this author →
GitHub

@tank/rendering-patterns

Selects web rendering and hydration strategies based on SEO, Core Web Vitals, and framework compatibility.

1|1|Updated Feb 20, 2026
Search Tags:#rendering#ssr#ssg#hydration#isr#islands#view transitions
One-click install
npx skills add https://github.com/tankpkg/packages --skill tank-rendering-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: @tank/rendering-patterns
Source: https://github.com/tankpkg/packages/tree/main/skills/rendering-patterns
Command: npx skills add https://github.com/tankpkg/packages --skill tank-rendering-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you choose, compare, and explain the right web rendering and hydration strategy for modern sites and apps, so you can improve speed, SEO, interactivity, and developer experience without guessing.

Core Features & Use Cases

  • Rendering strategy selection: Compare CSR, SSR, streaming SSR, SSG, ISR, islands architecture, React Server Components, and resumability.
  • Hydration optimization: Reduce client JavaScript cost with progressive hydration, selective hydration, and static islands.
  • Tradeoff analysis: Evaluate Core Web Vitals impact, caching behavior, server cost, complexity, and framework fit.
  • Use case: Decide whether a marketing page should be SSG, an authenticated dashboard should be SSR, or a mixed content site should use islands or RSC.

Quick Start

Ask for a rendering strategy recommendation for your page or app, including the best pattern, the main tradeoffs, and the expected impact on performance and SEO.

Frequently Asked Questions about @tank/rendering-patterns

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

FAQPage Schema
What is the best web rendering strategy for SEO and Core Web Vitals?▼

To choose a web rendering pattern, analyze your page's SEO requirements, Core Web Vitals targets, server cost, and interactivity needs. Compare CSR, SSR, streaming SSR, SSG, ISR, islands architecture, and React Server Components to select the most suitable strategy for your specific use case.

How do I reduce client JavaScript cost with hydration optimization?▼

Reduce client JavaScript cost by implementing progressive hydration, selective hydration, and static islands. These hydration optimization strategies minimize JavaScript execution on the client, improving page load performance and Core Web Vitals while maintaining necessary interactivity.

When should I use islands architecture vs React Server Components?▼

Use islands architecture for mixed content sites needing isolated interactive widgets, and React Server Components for apps requiring component-level rendering decisions. Both reduce client JavaScript cost, but differ in framework compatibility, hydration boundaries, and server cost tradeoffs.

Does SSG or ISR work better for marketing sites and blogs?▼

SSG is optimal for static marketing sites and blogs with infrequent updates, providing excellent Core Web Vitals. ISR suits pages needing incremental data updates without full rebuilds, balancing caching behavior, server cost, and content freshness for frequently updated content.

What are the limitations of using SSR for an authenticated dashboard?▼

Limitations of SSR for authenticated dashboards include higher server cost from per-request rendering and complex caching behavior. While SSR delivers dynamic content, it can increase Time to First Byte, requiring streaming SSR or selective hydration to mitigate Core Web Vitals impact.

Related Skills

Explore More Software Engineering Skills→
adcuelloaadcuelloa

core-web-vitals

Diagnose and resolve Core Web Vitals issues with code examples and checklists.

Community
Advanced
dhruvil7797dhruvil7797

optimize

Optimize front-end UI performance to improve Core Web Vitals metrics.

Community
Advanced
vecearvecear

react-server-components

Build React apps with server components and Next.js App Router.

Community
Advanced
dt418dt418

Docs Pack

Build documentation platforms with versioned docs, search, navigation, code highlighting, and API reference generation.

Community
Intermediate