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:
parent
14b179bb0c
commit
545469eae0
3 changed files with 19 additions and 2 deletions
15
apps/journal/app/components/ClientDate.tsx
Normal file
15
apps/journal/app/components/ClientDate.tsx
Normal 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>;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue