Server-render entry word count, read time and relative dates

apps/web/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-page-listen.tsx

@@ -9,25 +9,18 @@ import { Button } from "@/features/ui";
 import { Modal, ModalBody, ModalHeader, ModalTitle } from "@ui/modal";
 import { Spinner } from "@ui/spinner";
 import { Select } from "@ui/input/form-controls/select";
-import { getAccessToken, ensureValidToken, getPurePostText, getPurePostTextForWordCount } from "@/utils";
+import { getAccessToken, ensureValidToken, getPurePostText, countPostWords } from "@/utils";
 import { getTranslation, getLanguages, type Language } from "@/api/translation";
 import { useAiAssist } from "@ecency/sdk";
 import { UilPause, UilPlay, UilSetting } from "@tooni/iconscout-unicons-react";
 import i18next from "i18next";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useMount } from "react-use";
 
 interface Props {
   entry: Entry;
 }
 
-function countWords(entry: string): number {
-  const words = getPurePostTextForWordCount(entry)
-    .trim()
-    .split(/\s+/)
-    .filter((word) => word);
-  return words.length;
-}
+const WORDS_PER_MINUTE = 225;
 
 export function EntryPageListen({ entry }: Props) {
   const { activeUser } = useActiveAccount();
@@ -39,17 +32,13 @@ export function EntryPageListen({ entry }: Props) {
 
   const { mutateAsync: runAssist, isPending: isSummarizing } = useAiAssist(username, accessToken);
 
-  const [wordCount, setWordCount] = useState(0);
-  const [readTime, setReadTime] = useState(0);
+  // Pure derivations of entry.body, computed during SSR so the server HTML
+  // carries the final values instead of "0" placeholders that flip after
+  // hydration (#1662).
+  const wordCount = useMemo(() => countPostWords(entry.body), [entry.body]);
+  const readTime = useMemo(() => Math.ceil(wordCount / WORDS_PER_MINUTE), [wordCount]);
   const [summary, setSummary] = useState<string | null>(null);
 
-  useMount(() => {
-    const entryCount = countWords(entry.body);
-    const wordPerMinuite: number = 225;
-    setWordCount(entryCount);
-    setReadTime(Math.ceil(entryCount / wordPerMinuite));
-  });
-
   const handleClick = useCallback(() => {
     if (!speechRef.current) {
       return;

apps/web/src/features/shared/time-label/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useSyncExternalStore } from "react";
+import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import {
   dateToFormatted,
   dateToFormattedUtc,
@@ -60,10 +60,15 @@ interface Props {
    * - "fullRelative": long form, e.g. "5 hours ago"
    * - "absolute": formatted date using `format`
    *
-   * The first paint (SSR + initial client render) is always a UTC numeric
-   * string so the two sides agree and React doesn't fire hydration error
-   * #418. After mount the visible text and tooltip swap to the user's local
-   * timezone and locale.
+   * Relative modes render their value from the first SSR paint: a relative
+   * form is the difference of two instants, so it is timezone-independent
+   * and safe to compute server-side (#1662). The mount effect re-computes it
+   * so an edge-cached page self-corrects; `suppressHydrationWarning` on the
+   * span absorbs the boundary case where the two sides disagree by one unit.
+   *
+   * For "absolute" the first paint stays a UTC numeric string (a local
+   * format depends on the viewer's timezone and locale, which the server
+   * cannot know) and swaps after mount.
    */
   mode?: Mode;
   /** dayjs format token used when `mode` is "absolute". Defaults to "LLLL". */
@@ -78,15 +83,30 @@ export function TimeLabel({
   format = "LLLL",
   className = "date",
 }: Props) {
-  const [display, setDisplay] = useState<string | null>(null);
+  const [display, setDisplay] = useState<string | null>(() => {
+    // SERVER-ONLY initializer, deliberately. The client must start at null:
+    // with suppressHydrationWarning React keeps the server text in the DOM on
+    // a mismatch while its vdom holds the client-rendered value, so if the
+    // client initializer computed its own (possibly newer) relative value,
+    // the mount effect's setDisplay() would bail out on state equality and
+    // the stale server text would stay visible until the NEXT unit change
+    // (a day, even a month). Starting at null makes the mount effect a real
+    // state transition whose vdom diff (UTC fallback -> relative) always
+    // writes the text node.
+    if (typeof window !== "undefined") return null;
+    if (mode === "fullRelative") return dateToFullRelative(created);
+    if (mode === "relative") return dateToRelative(created);
+    return null;
+  });
   const [localFormatted, setLocalFormatted] = useState<string | null>(null);
 
   // Self-tick: re-runs the formatting effect ~once a minute for relative modes,
   // so timestamps stay fresh without the parent re-rendering the whole card.
   const tick = useTick(mode === "relative" || mode === "fullRelative");
 
-  // Numeric UTC — identical on server and client, no hydration mismatch.
-  const ssrSafe = dateToFormattedUtc(created);
+  // Numeric UTC fallback; memoized so feeds full of labels parse each date
+  // once per value instead of on every render.
+  const ssrSafe = useMemo(() => dateToFormattedUtc(created), [created]);
 
   useEffect(() => {
     setLocalFormatted(dateToFormatted(created));

apps/web/src/specs/features/entry/entry-page-listen-ssr.spec.tsx

@@ -0,0 +1,59 @@
+import { vi, describe, it, expect } from "vitest";
+import { renderToString } from "react-dom/server";
+import type { ReactNode } from "react";
+
+/*
+  SSR pin for #1662: the word count and read time are pure derivations of
+  entry.body and must be present in the server-rendered HTML, not "0"
+  placeholders that flip after hydration. renderToString runs no effects,
+  exactly like the server, so a regression back to useMount renders 0 here.
+
+  The collaborators are mocked at their module seams; the component itself,
+  countWords and the real getPurePostTextForWordCount run for real.
+*/
+vi.mock("@/utils", async () => ({
+  ...(await vi.importActual("@/utils")),
+  getAccessToken: vi.fn(() => undefined),
+  ensureValidToken: vi.fn()
+}));
+vi.mock("@/features/shared", () => ({ error: vi.fn(), success: vi.fn() }));
+vi.mock("@/features/text-to-speech", () => ({
+  useTts: vi.fn(() => ({ speechRef: { current: undefined }, hasPaused: false, hasStarted: false })),
+  TextToSpeechSettingsDialog: ({ children }: { children: ReactNode }) => <>{children}</>
+}));
+vi.mock("@/api/translation", () => ({
+  getTranslation: vi.fn(),
+  getLanguages: vi.fn(async () => [])
+}));
+vi.mock("@/config", () => ({
+  EcencyConfigManager: { useConfig: vi.fn(() => false) }
+}));
+vi.mock("@ui/modal", () => ({
+  Modal: () => null,
+  ModalBody: () => null,
+  ModalHeader: () => null,
+  ModalTitle: () => null
+}));
+
+import { EntryPageListen } from "@/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-page-listen";
+import { countPostWords } from "@/utils";
+import { mockEntry } from "@/specs/test-utils";
+
+describe("EntryPageListen SSR output (#1662)", () => {
+  const body = Array.from({ length: 574 }, (_, i) => `word${i}`).join(" ");
+  const entry = mockEntry({ body });
+
+  it("computes the body-derived stats it renders", () => {
+    expect(countPostWords(body)).toBe(574);
+  });
+
+  it("server-renders the real word count and read time, not 0 placeholders", () => {
+    // React separates adjacent text expressions with comment nodes; strip them
+    // so the assertion reads like the visible text.
+    const html = renderToString(<EntryPageListen entry={entry} />).replace(/<!-- -->/g, "");
+    expect(html).toContain(">574<");
+    // 574 words at 225 wpm rounds up to 3 minutes.
+    expect(html).toMatch(/>3 entry\.post-read-minutes/);
+    expect(html).not.toContain(">0<");
+  });
+});

apps/web/src/specs/features/shared/time-label.spec.tsx

@@ -1,5 +1,6 @@
 import { vi, describe, it, expect } from "vitest";
 import { render } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
 import "@testing-library/jest-dom";
 
 vi.mock("@/utils", async () => {
@@ -8,6 +9,78 @@ vi.mock("@/utils", async () => {
 });
 
 import { TimeLabel } from "@/features/shared/time-label";
+import { dateToFormattedUtc, dateToRelative } from "@/utils";
+import { hydrateRoot, type Root } from "react-dom/client";
+import { act } from "react";
+
+/*
+  TimeLabel's display initializer is server-only (typeof window guard), so a
+  jsdom renderToString would take the CLIENT branch. Stub window off to
+  exercise the real server path.
+*/
+function renderServerHtml(ui: Parameters<typeof renderToString>[0]): string {
+  const win = globalThis.window;
+  // @ts-expect-error deliberately simulating the server environment
+  delete globalThis.window;
+  try {
+    return renderToString(ui);
+  } finally {
+    globalThis.window = win;
+  }
+}
+
+describe("TimeLabel SSR output (#1662)", () => {
+  // A fixed offset from now, so the relative form is deterministic per run.
+  const tenDaysAgo = new Date(Date.now() - 10 * 24 * 3600 * 1000).toISOString();
+
+  it("server-renders the relative form for the default mode, not the UTC datetime", () => {
+    const html = renderServerHtml(<TimeLabel created={tenDaysAgo} />);
+    expect(html).toContain(`>${dateToRelative(tenDaysAgo)}<`);
+    expect(html).not.toContain(`>${dateToFormattedUtc(tenDaysAgo)}<`);
+  });
+
+  it("server-renders the UTC datetime for absolute mode (viewer timezone unknown)", () => {
+    const html = renderServerHtml(<TimeLabel created={tenDaysAgo} mode="absolute" />);
+    expect(html).toContain(`>${dateToFormattedUtc(tenDaysAgo)}<`);
+  });
+
+  it("corrects a stale cached SSR value after hydration", async () => {
+    /*
+      Edge-cached pages serve HTML whose SSR-computed relative value can be a
+      unit behind by hydration time. suppressHydrationWarning makes React keep
+      the server text on mismatch, so the correction must be a real state
+      transition; a client-side initializer that pre-computes the new value
+      makes the mount effect bail out on state equality and the DOM stays
+      stale (reproduced with React 19).
+    */
+    vi.useFakeTimers();
+    try {
+      const created = new Date("2026-01-01T00:00:00Z").toISOString();
+      vi.setSystemTime(new Date("2026-01-04T12:00:00Z"));
+      const serverValue = dateToRelative(created);
+      const html = renderServerHtml(<TimeLabel created={created} />);
+      expect(html).toContain(`>${serverValue}<`);
+
+      // The viewer loads the cached HTML 25 hours later: one relative unit on.
+      vi.setSystemTime(new Date("2026-01-05T13:00:00Z"));
+      const clientValue = dateToRelative(created);
+      expect(clientValue).not.toBe(serverValue);
+
+      const container = document.createElement("div");
+      container.innerHTML = html;
+      document.body.appendChild(container);
+      let root: Root | undefined;
+      await act(async () => {
+        root = hydrateRoot(container, <TimeLabel created={created} />);
+      });
+      expect(container.querySelector("span")?.textContent).toBe(clientValue);
+      await act(async () => root?.unmount());
+      container.remove();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});
 
 describe("TimeLabel", () => {
   const created = "2024-06-15T12:00:00Z";

apps/web/src/specs/setup-any-spec.ts

@@ -45,6 +45,7 @@ vi.mock("i18next", () => ({
   __esModule: true,
   default: {
     t: vi.fn((key) => key),
+    language: "en-US",
     init: vi.fn(),
     changeLanguage: vi.fn(),
     on: vi.fn()
@@ -157,6 +158,7 @@ vi.mock("@ecency/sdk", async () => ({
     queryFn: vi.fn()
   })),
   useRcDelegation: vi.fn(() => ({ mutateAsync: vi.fn() })),
+  useAiAssist: vi.fn(() => ({ mutateAsync: vi.fn(), isPending: false })),
   buildRcDelegationOp: vi.fn(() => ({})),
   getDeletedEntryQueryOptions: vi.fn((author, permlink) => ({
     queryKey: ["posts", "deleted-entry", `@${author}/${permlink}`],

apps/web/src/utils/get-pure-post-text.ts

@@ -43,3 +43,13 @@ export function getPurePostTextForWordCount(text: string) {
   text = text.replace(/[\u4E00-\u9FFF\u3400-\u4DBF\uF900-\uFAFF]/g, " $& ");
   return text;
 }
+
+/**
+ * Word count of a post body, as shown in the entry stats bar.
+ */
+export function countPostWords(body: string): number {
+  return getPurePostTextForWordCount(body)
+    .trim()
+    .split(/\s+/)
+    .filter((word) => word).length;
+}