Back to Glossary

Hydration

الترطيب (Hydration)

GLS-000086

Intermediatereact-nextjs1 min read
react hydrationclient hydrationhydraterehydration
Official DocsSign in to save & take notes

Definition

The process where React takes server-rendered HTML and attaches JavaScript event listeners to make it interactive.

العملية التي يأخذ فيها React HTML المُصيَّر من الخادم ويُرفق مستمعي أحداث JavaScript لجعله تفاعليًا.

Why It Matters

Hydration errors are common bugs in Next.js apps — usually caused by using browser-only APIs (window, localStorage) during server rendering.

أخطاء الترطيب هي أخطاء شائعة في تطبيقات Next.js — عادةً ناجمة عن استخدام APIs خاصة بالمتصفح (window وlocalStorage) أثناء التصيير من الخادم.

Full Definition

When Next.js renders a page on the server, it sends HTML to the browser immediately (fast first paint). Then JavaScript loads and React 'hydrates' the HTML — matching its virtual DOM to the existing HTML and attaching event listeners. A hydration mismatch error occurs when the server-rendered HTML differs from what React expects on the client.
عندما يُصيِّر Next.js صفحة على الخادم، يرسل HTML إلى المتصفح فورًا (رسم أول سريع). ثم يُحمَّل JavaScript ويقوم React بـ'ترطيب' HTML — مطابقة DOM الافتراضي الخاص به مع HTML الموجود وإرفاق مستمعي الأحداث. خطأ عدم تطابق الترطيب يحدث عندما يختلف HTML المُصيَّر من الخادم عما يتوقعه React على العميل.

Example Usage

“Reading localStorage in a Server Component causes a hydration mismatch. Fix: use 'use client' and read it inside useEffect.”

“قراءة localStorage في Server Component تسبب عدم تطابق ترطيب. الإصلاح: استخدم 'use client' واقرأها داخل useEffect.”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Hydration:

1

Accessing window or document in a Server Component

2

Rendering different content on server vs client based on Math.random() or Date.now()

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Hydration.

Explain:
1. What is Hydration and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Accessing window or document in a Server Component, Rendering different content on server vs client based on Math.random() or Date.now()
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account