Fix SSR hydration mismatch for dates

Created ClientDate component that renders dates client-only via
useEffect to prevent server/client locale mismatches. Server
renders with de-DE as default, client updates to user's locale.

Applied to route detail (version dates) and route list (updated dates).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-03-24 21:21:16 +01:00 committed by GitHub
parent 14b179bb0c
commit 545469eae0
3 changed files with 19 additions and 2 deletions

View file

@ -0,0 +1,15 @@
import { useState, useEffect } from "react";
/**
* Renders a date only on the client to avoid SSR hydration mismatches.
* Server renders empty, client fills in with user's locale.
*/
export function ClientDate({ iso }: { iso: string }) {
const [formatted, setFormatted] = useState(new Date(iso).toLocaleDateString("en-US"));
useEffect(() => {
setFormatted(new Date(iso).toLocaleDateString());
}, [iso]);
return <time dateTime={iso}>{formatted}</time>;
}