skills.rest
farming-labs
farming-labsOFFICIAL
Explore all skills by this author →
Website𝕏@KinfishTGitHub

hydration-patterns

Explain hydration patterns and criteria for SSR/SSG interactivity decisions.

35|5|Updated Feb 5, 2026
One-click install
npx skills add https://github.com/farming-labs/fm-skills --skill hydration-patterns-farming-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hydration-patterns
Source: https://github.com/farming-labs/fm-skills/tree/main/hydration-patterns
Command: npx skills add https://github.com/farming-labs/fm-skills --skill hydration-patterns-farming-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Hydration patterns determine how server-rendered HTML becomes interactive, balancing fast content display with client-side interactivity, and helping teams reason about when to hydrate, partial hydrate, islands, or resumability.

Core Features & Use Cases

  • Foundational knowledge: explains traditional hydration, partial hydration, progressive hydration, and islands architecture.
  • Performance decision guide: helps decide when to hydrate, defer, or use islands based on workload and rendering strategy.
  • Practical examples: offers concrete scenarios from SSR/SSG setups and streaming hydration.

Quick Start

Provide a concise hydration strategy recommendation for a sample page, including whether to use full hydration, islands, or resumability, and list the key criteria to decide for implementation.

Frequently Asked Questions about hydration-patterns

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

FAQPage Schema
What is the difference between partial hydration and progressive hydration in SSR?▼

Partial hydration selectively attaches JavaScript only to interactive components, while progressive hydration delays and sequences hydration to prioritize critical page areas, both reducing initial JavaScript execution cost in server-rendered setups.

How do I choose between full hydration and islands architecture for my web app?▼

Choose islands architecture for mostly static pages with isolated interactive widgets to minimize JavaScript, and use full hydration when the entire page requires immediate client-side interactivity across all components.

When should I use streaming hydration in my rendering strategy?▼

Use streaming hydration when you need to send server-rendered HTML chunks to the browser progressively, allowing components to hydrate as they arrive rather than waiting for the entire page payload to download.

Does islands architecture work with SSG setups?▼

Yes, islands architecture works effectively with SSG setups by allowing static HTML to be generated at build time while selectively hydrating only the specific interactive components needed on the page.

Why does my server-rendered HTML lose interactivity before hydration completes?▼

Server-rendered HTML remains static until hydration attaches event listeners to the DOM, meaning interactivity is delayed until the client-side JavaScript downloads, parses, and executes successfully.

Related Skills

vallafedericovallafederico

solid-core-rendering-ssr

Explain SolidJS rendering and server-side rendering techniques.

Community
Intermediate
tankpkgtankpkg
1

@tank/rendering-patterns

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

Official
Advanced
grvpanchalgrvpanchal
1

server-ssr

Coordinates SSR HTML generation, hydration, and data fetching for Next.js and Express applications.

Community
Advanced
trungtnmtrungtnm

vercel-react-best-practices

Identify React/Next.js performance anti-patterns and enforce optimized coding practices.

Community
Advanced