Chrono demo — hayley-ssg-template

Chrono

Common chrono patterns used across this template and in the nav UTC clock.

SSG vs client navigation

Full page load (open /demo/chrono in a new tab, or refresh): Dioxus SSG runs your components at and writes HTML to public/. Any Utc::now() in the component is evaluated then and baked into the file — it will not change until you rebuild.

Client-side navigation (click Chrono in the nav): the router mounts the page in WASM only. Utc::now() in the component body runs at navigation time, so you see the current clock.

Hydration on a full load reuses that static HTML for the first paint; the client must not disagree with it. For live values, call Utc::now() in use_effect (after hydration), like UtcClock and the section below — not in the main render path.

Now (UTC) — client after hydration

These lines call Utc::now() only inside use_effect, so a full-page load from SSG does not show the build timestamp (see SSG note below).

Utc::now()
  → …
  → formatted: …
  → … days since 2024-06-01T12:00:00Z
  → … days since 1969-07-20

Parse RFC 3339 (static)

DateTime::parse_from_rfc3339("2024-06-01T12:00:00Z")
  → 2024-06-01 12:00:00 +00:00

Naive dates & durations (static)

NaiveDate::from_ymd_opt(1969, 7, 20)
  → 1969-07-20
Duration::days(7) + parsed = 2024-06-08 12:00 UTC

Tips

On WASM, enable chrono's wasmbind feature in Cargo.toml — without it, Utc::now() panics in the browser.
Prefer Utc in shared/server code; use Local only after hydration if you need the browser timezone.
SSG-safe live data: placeholder in rsx!, then use_effect to set signals (see UtcClock).
If you want build-time values in HTML (e.g. "Generated on …"), call Utc::now() in render intentionally and rebuild to refresh — or use use_server_future in fullstack mode to serialize server time for hydration.
Tick every second with dioxus_sdk_time::use_interval, not a manual loop.