What is Hydration in Next.js ⚠️?

Manish Kumar Sahu — Sat, 15 Nov 2025 21:41:48 +0000

When you use Next.js, the page render twice:

On the Server Side (SSR) :- In this process HTML is generated.
On the Client (Browser):- React hydrates that HTML and attaches the event listeners. Think of hydration as: “React wakes up the static HTML and converts it into an interactive app.” For hydration to work, the HTML that the server generates must match the HTML that React generates in the browser.

If they don’t match → Next.js throws a hydration error.

Eg:- Server generated HTML = A
Browser generated HTML = B
React is confused
Hydration breaks

Reason - Why Does This Happen?

1.Using browser-only APIs during SSR:-
Server → window doesn't exist → error
Client → window exists → mismatch

const width = window.innerWidth;

2.Using Date, Math.random(), or dynamic values during render:- Server timestamp ≠ client timestamp → mismatch.

<p>{Date.now()}</p>

3.Conditionally rendering components differently on server vs client:-
Server → window undefined → renders nothing
Client → window exists → renders sidebar
Mismatch → hydration error.

{typeof window !== "undefined" && <Sidebar />}

4.Fetching data differently on server and client:- You might accidentally:

Fetch server-side once
Fetch client-side again with a different result This changes HTML → mismatch.

How to Fix Hydration Issues?

1.Wrap client-only code inside useEffect:- Anything using window, document, localStorage:

const [width, setWidth] = useState(null);
useEffect(() => {
  setWidth(window.innerWidth);
}, []);

Server renders nothing → client fills it later.

2.Avoid Date.now() or Math.random() directly in render:- Use useEffect or calculate once.

const [time, setTime] = useState(null);
useEffect(() => setTime(Date.now()), []);

3.Use dynamic import for client-only components:- Example: charts, maps, heavy UI.

const Chart = dynamic(() => import("../Chart"), { ssr: false });

Now the component loads only on client → no mismatch.

4.Make sure data is consistent between server and client:- Use server-only fetching (app router) or React Query with proper hydration.

Hydration errors happen when the HTML React expects in the browser doesn’t match the HTML generated by Next.js on the server.

Things I Wish I Knew as a Fresher Developer on My First Project

Manish Kumar Sahu — Fri, 14 Nov 2025 15:57:11 +0000

If you’ve just joined a company as a fresher and you’re lucky enough to get a project early, there are a few important things you should always keep in mind:

Don’t hesitate to discuss your task.
Don’t hesitate to ask questions.
Don’t hesitate to ask for help from seniors.
Stick to the ETA you commit.
If you realize midway that the ETA isn’t enough, highlight it immediately. Don’t wait for the catch-up call.
Document your work.
Don’t be shy to talk about your work.
If you’re doing great and you stay silent about it, nobody will know the effort you’re putting in.
Always talk about your work. Always.

If you don’t communicate, it may reflect poorly on your performance. And if you’re stuck somewhere, ask your senior in a polite way — don’t rush or panic. Seniors have more responsibilities, so your patience and clarity matter.

Discuss technical things with them, take guidance, understand how they think. This will help you grow faster and understand your role and responsibilities from a senior perspective.

Most freshers (including me once) make a very common mistake:
When a task is assigned and the TL or RM asks for an ETA, let’s say you say 3 hours. Freshers usually start coding immediately — and that’s the biggest mistake.

Instead, spend the first 30 minutes understanding the requirement properly. Take a pen and paper, or open Excalidraw. Think through the flow, break the task down, understand what exactly needs to be done.

Once the flow is clear, then start writing the code.

You may face challenges depending on the complexity — that’s absolutely normal. Let’s say coding takes 1.5 hours. At this point, you’ve already used 2 hours. Now, if your gut feeling says the 3-hour ETA is not enough, immediately inform your TL or RM. Don’t wait to be asked.

Now you still have 1 hour left. Since you’ve already communicated the risk, your mind will be calmer, and your TL/RM will also be aware. Use that remaining time to push as much as possible, and if needed, take help from a senior.

And lastly — don’t forget to document your work.
And during catch-up calls, openly talk about your analysis, what you faced, and how you solved it. It builds trust and shows ownership.

Forem: Manish Kumar Sahu

What is Hydration in Next.js ⚠️?

Reason - Why Does This Happen?

How to Fix Hydration Issues?

Things I Wish I Knew as a Fresher Developer on My First Project