implement ssr

apps/frontend/src/components/formattedDate.tsx

@@ -0,0 +1,22 @@
+import { useHydrated } from "../ssr/hydrated";
+
+// The server render and the hydration pass use a fixed locale and timezone so
+// both produce identical markup. Once hydrated we switch to the visitor's own
+// locale and timezone, which is what the page showed before it was
+// server-rendered.
+const stableFormatter = new Intl.DateTimeFormat("en-US", {
+  timeZone: "UTC",
+  dateStyle: "short",
+  timeStyle: "medium",
+});
+
+export default function FormattedDate({ value }: { value: string }) {
+  const hydrated = useHydrated();
+  const date = new Date(value);
+
+  return (
+    <time dateTime={date.toISOString()}>
+      {hydrated ? date.toLocaleString() : stableFormatter.format(date)}
+    </time>
+  );
+}

apps/frontend/src/components/postRow.tsx

@@ -1,4 +1,5 @@
 import type { Post } from "../utils/types";
+import FormattedDate from "./formattedDate";
 
 export default function PostRow({ post }: { post: Post }) {
   return (
@@ -8,7 +9,7 @@ export default function PostRow({ post }: { post: Post }) {
           <h1>{post.title}</h1>
           <p>{post.description}</p>
           <p className="text-xs opacity-50">
-            Posted on {new Date(post.createdAt).toLocaleString()}
+            Posted on <FormattedDate value={post.createdAt} />
           </p>
         </div>
       </a>