hydration-safety

What problem does it solve?

Next.js applications render both on the server and in the browser, which can lead to hydration mismatches when browser-only APIs are accessed during server rendering. This Skill provides patterns to keep SSR and client hydration in sync, preventing runtime errors.

Core Features & Use Cases

• IsMounted pattern: safe client-only access by delaying browser API usage until after mount.
• Hydration-safe components: practices for conditional rendering and avoiding window/document access on the server.
• Practical examples: applying these patterns in common components (auth, localStorage, time-based UI) to ensure stable hydration across routes.

Quick Start

• Add "use client" to the component that uses browser APIs.
• Implement the isMounted pattern using useEffect and conditional rendering.
• Verify SSR and client render parity by comparing initial output and subsequent hydration.