hydration-patterns

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

35|5|Updated Feb 5, 2026

Ready to run

npx skills add https://github.com/farming-labs/fm-skills --skill hydration-patterns-farming-labs

💬 Prompt for ChatGPT / Claude Chat▼

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.