Signed in at {time}
; } ``` Set the cookie from the browser once, after hydration, so the next request renders in the right zone: ```tsx title="app/timezone-cookie.tsx" "use client"; import { useEffect } from "react"; export function TimeZoneCookie() { useEffect(() => { const zone = Intl.DateTimeFormat().resolvedOptions().timeZone; document.cookie = `tz=${zone}; path=/; max-age=31536000; samesite=lax`; }, []); return null; } ``` The first visit renders in UTC. Every visit after it matches the visitor. ### Intl.DateTimeFormat timeZone: hydration-safe formatting When one zone is right for everyone (an event schedule, a log viewer, a changelog), pin it in the formatter. Replace local getters with their UTC versions: ```tsx title="schedule.tsx" // Before: the runtime's zone, different on each side const localFormat = new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short", }); // After: the same zone everywhere const format = new Intl.DateTimeFormat("en-US", { timeZone: "UTC", dateStyle: "medium", timeStyle: "short", }); export function Posted({ at }: { at: number }) { const date = new Date(at); // getUTCDate() instead of getDate(), getUTCMonth() instead of getMonth() return ({format.format(date)} ({date.getUTCDate()}/{date.getUTCMonth() + 1})
); } ``` A locale-sensitive formatter also needs an explicit locale, or the two sides still disagree about the format. See [locale formatting](https://hydration.jscrate.dev/docs/causes/locale). ### Format in the visitor's zone after mount If the server cannot know the zone and the time must be local, render a neutral value first and replace it in an effect. Effects never run on the server, so the first client render still matches: ```tsx title="local-time.tsx" "use client"; import { useEffect, useState } from "react"; export function LocalTime({ at }: { at: number }) { const [text, setText] = useState(() => new Date(at).toISOString().slice(0, 10) ); useEffect(() => { setText( new Date(at).toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short", }) ); }, [at]); return ; } ``` The [two-pass rendering pattern](https://hydration.jscrate.dev/docs/guides/useeffect-two-pass-rendering) explains the trade-off: the placeholder shows until the page hydrates. ### i18n libraries next-intl and similar libraries format with a configured zone. Set `timeZone` in the request config so the server and the client provider use the same one. The [locale guide](https://hydration.jscrate.dev/docs/causes/locale#fix-an-i18n-hydration-error-in-next-intl) shows the setup. ## Catch it with ESLint [`no-timezone-without-explicit-timezone`](https://hydration.jscrate.dev/docs/rules/no-timezone-without-explicit-timezone) reports every formatter and getter above in render code. It suggests adding `timeZone: 'UTC'` (or the zone in its `defaultTimeZone` option) and swapping `getHours()` for `getUTCHours()`. Server Components are skipped, because they only render on the server. ```bash npm install -D eslint-plugin-hydration-proof ``` ## Catch it in CI The default scenario uses the machine's own timezone, and a server started on the same machine renders with it, so the two sides agree. Test other zones with the environment matrix: ```ts title="hydration-proof.config.ts" import { defineConfig } from "hydration-proof"; export default defineConfig({ matrix: { timezoneId: ["UTC", "Asia/Karachi", "America/Los_Angeles"], }, }); ``` Each finding is reported as HP1001, and the report names the values that separate failing pages from passing ones ("Only found with timezone Asia/Karachi"). With `--probe`, hydration-proof reloads the page with only the browser's timezone switched to the server's. If the finding disappears, the timezone is the proven cause. See the [environment matrix](https://hydration.jscrate.dev/docs/environment-matrix) and [probes](https://hydration.jscrate.dev/docs/probes). ```bash npx hydration-proof test --probe ``` ## Related - [Date and time hydration errors](https://hydration.jscrate.dev/docs/causes/time) - [Locale-dependent formatting](https://hydration.jscrate.dev/docs/causes/locale) - [HP1001: text differs between server and client](https://hydration.jscrate.dev/docs/issues/hp1001) - [The no-timezone-without-explicit-timezone rule](https://hydration.jscrate.dev/docs/rules/no-timezone-without-explicit-timezone) - [All causes of hydration errors](https://hydration.jscrate.dev/docs/causes)