How to fix Hydration mismatch: the server-rendered page does not match the client in React

# Example error output:
Warning: Text content did not match. Server: "Loading..." Client: "12/09/2025 3:45 PM"
  in div (at Component.tsx:12)

// WRONG - causes hydration mismatch
function WelcomeMessage() {
  const username = localStorage.getItem('username');
  return <div>Welcome {username}!</div>;
}

// CORRECT - server and client render the same initially
function WelcomeMessage() {
  const [username, setUsername] = useState<string | null>(null);
  
  useEffect(() => {
    setUsername(localStorage.getItem('username'));
  }, []);
  
  return <div>Welcome {username || 'Guest'}!</div>;
}

// WRONG - server and client times will differ
function Timestamp() {
  return <div>Page loaded at {new Date().toLocaleString()}</div>;
}

// CORRECT - use useEffect to update after hydration
function Timestamp() {
  const [timestamp, setTimestamp] = useState<string>('')
  
  useEffect(() => {
    setTimestamp(new Date().toLocaleString());
  }, []);
  
  return <div>{timestamp ? `Page loaded at ${timestamp}` : 'Loading...'}</div>;
}

// ALTERNATIVE - pass formatted date from server
export async function getServerSideProps() {
  return {
    props: {
      serverTime: new Date().toISOString()
    }
  };
}

// WRONG - div cannot be inside p
<p>
  <div>Content</div>
</p>

// WRONG - button cannot be inside button
<button>
  <button>Click me</button>
</button>

// CORRECT - use valid nesting
<div>
  <div>Content</div>
</div>

// For styled text, use span inside p
<p>
  <span className="highlight">Content</span>
</p>

<div suppressHydrationWarning>
  Rendered on server at {new Date().toISOString()}
</div>

import dynamic from 'next/dynamic';

// Component will only render on client, preventing hydration issues
const ClientOnlyComponent = dynamic(
  () => import('../components/ClientOnlyComponent'),
  { ssr: false }
);

export default function Page() {
  return (
    <div>
      <h1>My Page</h1>
      <ClientOnlyComponent />
    </div>
  );
}

// pages/posts/[id].tsx
export async function getServerSideProps({ params }) {
  const post = await fetchPost(params.id);
  return { props: { post } };
}

export default function Post({ post }) {
  // Both server and client receive same post data
  return <article>{post.content}</article>;
}

npm run build
npm run start
# Visit your app and check browser console for hydration errors