Hydration failed because the initial UI does not match what was rendered on the server?

Hydration failed because the initial UI does not match what was rendered on the server? | BaseCase

Sachin Chandra Yadav

Hydration failed because the initial UI does not match what was rendered on the server?

6 months ago

319

I am getting the classic Next.js Hydration Error. It seems to happen specifically when I try to render a "Time Ago" string (e.g., "Asked 2 hours ago") for my questions. Since the server time and the client browser time are slightly different, the HTML mismatch causes the app to break. What is the best way to handle relative timestamps in a server-rendered app?

nextjs

typescript

javascript

2 Answers

Sachin Chandra Yadav

• answered 5 months ago

The "Hydration failed" error in Next.js, especially with relative timestamps like "2 hours ago," is a common issue. It occurs because the HTML generated on the server for the relative time string does not precisely match what the client-side React code attempts to render during hydration. This mismatch often stems from:

Time Discrepancies: The server's clock and the client's clock (or their respective timezones/moment of render) can differ by a few seconds or minutes.
Render Time: The exact moment the string is generated on the server versus when it's generated on the client after hydration can lead to a slight difference in "ago" calculations (e.g., "1 hour ago" vs. "59 minutes ago").

To effectively handle relative timestamps and avoid hydration errors, you should ensure that the dynamic, time-sensitive parts of your UI are rendered consistently or only on the client.

Here are the best approaches:

1. Client-Side Rendering for Dynamic Content (Recommended)

The most robust solution is to render the dynamic "time ago" string exclusively on the client after the component has mounted. This ensures that the server renders a consistent placeholder (or nothing), and the actual time calculation happens only where the time is truly known and stable: the client's browser.

Implementation Steps:

Introduce State: Use React's hook to manage the relative time string.

Write your answer here

useState

1// This component causes the error
2const QuestionDate = ({ date }) => {
3  return (
4    <span>{formatRelativeTime(date)}</span>
5  );
6};

1// This component causes the error
2const QuestionDate = ({ date }) => {
3  return (
4    <span>{formatRelativeTime(date)}</span>
5  );
6};

1<span suppressHydrationWarning>
2  {formatRelativeTime(date)}
3</span>
4

1<span suppressHydrationWarning>
2  {formatRelativeTime(date)}
3</span>
4

1import { useEffect, useState } from 'react';
2
3// Assume formatRelativeTime is a utility function you've defined
4// that takes a Date object or timestamp and returns a string like "2 hours ago".
5const formatRelativeTime = (dateString) => {
6  const date = new Date(dateString);
7  const now = new Date();
8  const diffSeconds = Math.round((now.getTime() - date.getTime()) / 1000);
9
10  if (diffSeconds < 60) return `${diffSeconds} seconds ago`;
11  if (diffSeconds < 3600) return `${Math.round(diffSeconds / 60)} minutes ago`;
12  if (diffSeconds < 86400) return `${Math.round(diffSeconds / 3600)} hours ago`;
13  if (diffSeconds < 604800) return `${Math.round(diffSeconds / 86400)} days ago`;
14  // ... add more complex logic for weeks, months, years as needed
15  return date.toLocaleDateString(); // Fallback for very old dates
16};
17
18const QuestionDate = ({ date }) => {
19  const [relativeTime, setRelativeTime] = useState('');
20
21  useEffect(() => {
22    // This code runs only on the client after hydration
23    setRelativeTime(formatRelativeTime(date));
24
25    // Optional: If you want to update it periodically (e.g., every minute)
26    // const interval = setInterval(() => {
27    //   setRelativeTime(formatRelativeTime(date));
28    // }, 60000);
29    // return () => clearInterval(interval);
30  }, [date]); // Re-run if the date prop changes
31
32  return (
33    <span>{relativeTime || 'Loading...'}</span> // Display a loading state or empty string initially
34  );
35};

1import { useEffect, useState } from 'react';
2
3// Assume formatRelativeTime is a utility function you've defined
4// that takes a Date object or timestamp and returns a string like "2 hours ago".
5const formatRelativeTime = (dateString) => {
6  const date = new Date(dateString);
7  const now = new Date();
8  const diffSeconds = Math.round((now.getTime() - date.getTime()) / 1000);
9
10  if (diffSeconds < 60) return `${diffSeconds} seconds ago`;
11  if (diffSeconds < 3600) return `${Math.round(diffSeconds / 60)} minutes ago`;
12  if (diffSeconds < 86400) return `${Math.round(diffSeconds / 3600)} hours ago`;
13  if (diffSeconds < 604800) return `${Math.round(diffSeconds / 86400)} days ago`;
14  // ... add more complex logic for weeks, months, years as needed
15  return date.toLocaleDateString(); // Fallback for very old dates
16};
17
18const QuestionDate = ({ date }) => {
19  const [relativeTime, setRelativeTime] = useState('');
20
21  useEffect(() => {
22    // This code runs only on the client after hydration
23    setRelativeTime(formatRelativeTime(date));
24
25    // Optional: If you want to update it periodically (e.g., every minute)
26    // const interval = setInterval(() => {
27    //   setRelativeTime(formatRelativeTime(date));
28    // }, 60000);
29    // return () => clearInterval(interval);
30  }, [date]); // Re-run if the date prop changes
31
32  return (
33    <span>{relativeTime || 'Loading...'}</span> // Display a loading state or empty string initially
34  );
35};

1// Assume formatRelativeTime is your utility function
2const formatRelativeTime = (dateString) => {
3  const date = new Date(dateString);
4  const now = new Date();
5  const diffSeconds = Math.round((now.getTime() - date.getTime()) / 1000);
6
7  if (diffSeconds < 60) return `${diffSeconds} seconds ago`;
8  if (diffSeconds < 3600) return `${Math.round(diffSeconds / 60)} minutes ago`;
9  if (diffSeconds < 86400) return `${Math.round(diffSeconds / 3600)} hours ago`;
10  return date.toLocaleDateString();
11};
12
13const QuestionDate = ({ date }) => {
14  return (
15    <span suppressHydrationWarning>
16      {formatRelativeTime(date)}
17    </span>
18  );
19};

1// Assume formatRelativeTime is your utility function
2const formatRelativeTime = (dateString) => {
3  const date = new Date(dateString);
4  const now = new Date();
5  const diffSeconds = Math.round((now.getTime() - date.getTime()) / 1000);
6
7  if (diffSeconds < 60) return `${diffSeconds} seconds ago`;
8  if (diffSeconds < 3600) return `${Math.round(diffSeconds / 60)} minutes ago`;
9  if (diffSeconds < 86400) return `${Math.round(diffSeconds / 3600)} hours ago`;
10  return date.toLocaleDateString();
11};
12
13const QuestionDate = ({ date }) => {
14  return (
15    <span suppressHydrationWarning>
16      {formatRelativeTime(date)}
17    </span>
18  );
19};

1import { useState, useEffect } from 'react';
2import { formatRelativeTime } from './utils'; // Your formatting logic
3
4const QuestionDate = ({ date }) => {
5  const [hasMounted, setHasMounted] = useState(false);
6
7  useEffect(() => {
8    setHasMounted(true);
9  }, []);
10
11  // Server-side / Initial render: show a static ISO date or nothing
12  if (!hasMounted) {
13    return <span>{new Date(date).toLocaleDateString()}</span>;
14  }
15
16  // Client-side render: show the dynamic "time ago" string
17  return <span>{formatRelativeTime(date)}</span>;
18};
19

1import { useState, useEffect } from 'react';
2import { formatRelativeTime } from './utils'; // Your formatting logic
3
4const QuestionDate = ({ date }) => {
5  const [hasMounted, setHasMounted] = useState(false);
6
7  useEffect(() => {
8    setHasMounted(true);
9  }, []);
10
11  // Server-side / Initial render: show a static ISO date or nothing
12  if (!hasMounted) {
13    return <span>{new Date(date).toLocaleDateString()}</span>;
14  }
15
16  // Client-side render: show the dynamic "time ago" string
17  return <span>{formatRelativeTime(date)}</span>;
18};
19

1import dynamic from 'next/dynamic';
2
3const RelativeTime = dynamic(() => import('./RelativeTimeComponent'), { 
4  ssr: false,
5  loading: () => <span>Loading...</span> // Optional placeholder
6});
7

1import dynamic from 'next/dynamic';
2
3const RelativeTime = dynamic(() => import('./RelativeTimeComponent'), { 
4  ssr: false,
5  loading: () => <span>Loading...</span> // Optional placeholder
6});
7

All Questions

Top Questions

Popular Tags

Hydration failed because the initial UI does not match what was rendered on the server?

2 Answers

1. Client-Side Rendering for Dynamic Content (Recommended)

Write your answer here

2. Suppressing Hydration Warnings (Use with Caution)

Conclusion

1. The Recommended Way: `useEffect` (The "Two-Pass" Render)

2. The Next.js Way: Dynamic Imports

3. The "Suppress Warning" Way (Quick Fix)

Which one should you use?

All Questions

Top Questions

Popular Tags

Hydration failed because the initial UI does not match what was rendered on the server?

2 Answers

1. Client-Side Rendering for Dynamic Content (Recommended)

Write your answer here

2. Suppressing Hydration Warnings (Use with Caution)

Conclusion

1. The Recommended Way: useEffect (The "Two-Pass" Render)

2. The Next.js Way: Dynamic Imports

3. The "Suppress Warning" Way (Quick Fix)

Which one should you use?

1. The Recommended Way: `useEffect` (The "Two-Pass" Render)