fix: don't pre-render view and comment count components

- Introduced a new PostStats component to handle view and comment counts, replacing the previous async implementation with a client-side approach.
- Updated CommentCount component to use client-side state management for fetching comment counts.
- Removed unnecessary caching logic from view and comment fetching functions.
- Simplified date formatting by moving it inline, enhancing performance and readability.

app/api/hits/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { getViewCounts } from "@/lib/views";
+import { getAllViewCounts } from "@/lib/server/views";
 
 export const GET = async (): Promise<
   NextResponse<{
@@ -13,7 +13,7 @@ export const GET = async (): Promise<
   }>
 > => {
   // note: while hits have been renamed to views in most places, this API shouldn't change due to it being snapshotted
-  const views = await getViewCounts();
+  const views = await getAllViewCounts();
 
   const total = {
     hits: Object.values(views).reduce((acc, curr) => acc + curr, 0),

app/notes/[slug]/page.tsx

@@ -1,9 +1,7 @@
 import { env } from "@/lib/env";
 import { Suspense } from "react";
-import { cacheLife } from "next/cache";
 import Link from "next/link";
 import { JsonLd } from "react-schemaorg";
-import { formatDate, formatDateISO } from "@/lib/date";
 import { CalendarDaysIcon, TagIcon, SquarePenIcon, EyeIcon, MessagesSquareIcon } from "lucide-react";
 import ViewCounter from "@/components/view-counter";
 import CommentCount from "@/components/comment-count";
@@ -47,22 +45,23 @@ export const generateMetadata = async ({ params }: { params: Promise<{ slug: str
   });
 };
 
-// Cached helper to format dates - needed for Cache Components compatibility
-const getFormattedDates = async (date: string) => {
-  "use cache";
-  cacheLife("max");
-
-  return {
-    dateISO: formatDateISO(date),
-    dateTitle: formatDate(date, "MMM d, y, h:mm a O"),
-    dateDisplay: formatDate(date, "MMMM d, y"),
-  };
-};
-
 const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
   const { slug } = await params;
   const frontmatter = await getFrontMatter(slug);
-  const formattedDates = await getFormattedDates(frontmatter!.date);
+  const d = new Date(frontmatter!.date);
+
+  const formattedDates = {
+    dateISO: d.toISOString(),
+    dateTitle: d.toLocaleString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      timeZoneName: "short",
+    }),
+    dateDisplay: d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }),
+  };
 
   const { default: MDXContent } = await import(`../../../${POSTS_DIR}/${slug}/index.mdx`);
 
@@ -99,7 +98,7 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
           className={"text-foreground/70 flex flex-nowrap items-center gap-1.5 whitespace-nowrap hover:no-underline"}
         >
           <CalendarDaysIcon className="inline size-3 shrink-0" aria-hidden="true" />
-          <time dateTime={formattedDates.dateISO} title={formattedDates.dateTitle}>
+          <time dateTime={formattedDates.dateISO} title={formattedDates.dateTitle} suppressHydrationWarning>
             {formattedDates.dateDisplay}
           </time>
         </Link>
@@ -134,16 +133,12 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
           className="text-foreground/70 flex flex-nowrap items-center gap-1.5 whitespace-nowrap hover:no-underline"
         >
           <MessagesSquareIcon className="inline size-3 shrink-0" aria-hidden="true" />
-          <Suspense fallback={<span className="motion-safe:animate-pulse">0</span>}>
-            <CommentCount slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
-          </Suspense>
+          <CommentCount slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
         </Link>
 
         <div className="flex min-w-14 flex-nowrap items-center gap-1.5 whitespace-nowrap">
           <EyeIcon className="inline size-3 shrink-0" aria-hidden="true" />
-          <Suspense fallback={<span className="motion-safe:animate-pulse">0</span>}>
-            <ViewCounter slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
-          </Suspense>
+          <ViewCounter slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
         </div>
       </div>
 

app/notes/page.tsx

@@ -1,15 +1,9 @@
-import { env } from "@/lib/env";
-import { Suspense } from "react";
-import { cacheLife } from "next/cache";
 import Link from "next/link";
-import { EyeIcon, MessagesSquareIcon } from "lucide-react";
 import PageTitle from "@/components/layout/page-title";
+import PostStats from "@/components/post-stats";
 import { getFrontMatter, POSTS_DIR, type FrontMatter } from "@/lib/posts";
 import { createMetadata } from "@/lib/metadata";
-import { formatDate, formatDateISO } from "@/lib/date";
 import authorConfig from "@/lib/config/author";
-import { getViewCounts } from "@/lib/views";
-import { getCommentCounts } from "@/lib/server/comments";
 
 export const metadata = createMetadata({
   title: "Notes",
@@ -17,61 +11,26 @@ export const metadata = createMetadata({
   canonical: `/${POSTS_DIR}`,
 });
 
-// Hoist number formatter to avoid re-creating on every render
-const numberFormatter = new Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE);
-
-// Async component that fetches and displays stats for a single post
-const PostStats = async ({ slug }: { slug: string }) => {
-  const [views, comments] = await Promise.all([getViewCounts(slug), getCommentCounts(slug)]);
-
-  return (
-    <>
-      {views > 0 && (
-        <span className="bg-muted text-foreground/65 inline-flex h-5 flex-nowrap items-center gap-1 rounded-md px-1.5 align-text-top text-xs font-semibold text-nowrap shadow select-none">
-          <EyeIcon className="inline-block size-4 shrink-0" aria-hidden="true" />
-          <span className="inline-block leading-none tabular-nums">{numberFormatter.format(views)}</span>
-        </span>
-      )}
-
-      {comments > 0 && (
-        <Link
-          href={`/${slug}#comments`}
-          title={`${numberFormatter.format(comments)} ${comments === 1 ? "comment" : "comments"}`}
-          className="inline-flex hover:no-underline"
-        >
-          <span className="bg-muted text-foreground/65 inline-flex h-5 flex-nowrap items-center gap-1 rounded-md px-1.5 align-text-top text-xs font-semibold text-nowrap shadow select-none">
-            <MessagesSquareIcon className="inline-block size-3 shrink-0" aria-hidden="true" />
-            <span className="inline-block leading-none tabular-nums">{numberFormatter.format(comments)}</span>
-          </span>
-        </Link>
-      )}
-    </>
-  );
-};
-
-// Cached helper to format dates for posts - needed for Cache Components compatibility
-const getFormattedPostDates = async (posts: FrontMatter[]) => {
-  "use cache";
-  cacheLife("max");
-
-  return posts.map((post) => {
-    const year = new Date(post.date).getUTCFullYear();
-    return {
-      ...post,
-      year,
-      dateISO: formatDateISO(post.date),
-      dateTitle: formatDate(post.date, "MMM d, y, h:mm a O"),
-      dateDisplay: formatDate(post.date, "MMM d"),
-    };
-  });
-};
-
-// Renders the posts list with static content, deferring stats to runtime via Suspense
 const PostsList = async () => {
   const posts = await getFrontMatter();
 
-  // Format dates in a cached function to avoid date-fns using new Date() during render
-  const formattedPosts = await getFormattedPostDates(posts);
+  const formattedPosts = posts.map((post) => {
+    const d = new Date(post.date);
+    return {
+      ...post,
+      year: d.getUTCFullYear(),
+      dateISO: d.toISOString(),
+      dateTitle: d.toLocaleString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+        timeZoneName: "short",
+      }),
+      dateDisplay: d.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+    };
+  });
 
   const postsByYear: {
     [year: string]: (FrontMatter & {
@@ -98,7 +57,7 @@ const PostsList = async () => {
           {posts.map(({ slug, dateISO, dateTitle, dateDisplay, title, htmlTitle }) => (
             <li className="flex text-base leading-relaxed" key={slug}>
               <span className="text-muted-foreground w-18 shrink-0 md:w-22">
-                <time dateTime={dateISO} title={dateTitle}>
+                <time dateTime={dateISO} title={dateTitle} suppressHydrationWarning>
                   {dateDisplay}
                 </time>
               </span>
@@ -111,9 +70,7 @@ const PostsList = async () => {
                   style={{ viewTransitionName: `note-title-${slug}` }}
                 />
 
-                <Suspense>
-                  <PostStats slug={`${POSTS_DIR}/${slug}`} />
-                </Suspense>
+                <PostStats slug={`${POSTS_DIR}/${slug}`} />
               </div>
             </li>
           ))}