Hydration Safety Skill

Overview

Next.js uses Server-Side Rendering (SSR), which means components render twice:

1. Server-side - Initial HTML generation
2. Client-side - React hydration with JavaScript

Mismatches between these two renders cause hydration errors. This skill covers patterns to prevent and fix these issues.

The Core Problem