server all the actions!

app/notes/[slug]/counter.tsx

@@ -0,0 +1,27 @@
+import { connection } from "next/server";
+import commaNumber from "comma-number";
+import { prisma } from "../../../lib/helpers/prisma";
+
+const HitCounter = async ({ slug }: { slug: string }) => {
+  await connection();
+
+  try {
+    const { hits } = await prisma.hits.upsert({
+      where: { slug },
+      create: { slug },
+      update: {
+        hits: {
+          increment: 1,
+        },
+      },
+    });
+
+    // we have data!
+    return <span title={`${commaNumber(hits)} ${hits === 1 ? "view" : "views"}`}>{commaNumber(hits)}</span>;
+  } catch (error) {
+    console.error(error);
+    throw new Error();
+  }
+};
+
+export default HitCounter;

app/notes/[slug]/page.module.css

@@ -35,7 +35,6 @@
   white-space: nowrap;
   margin-right: 0.75em;
 }
-
 .meta .tag:before {
   content: "\0023"; /* cosmetically hashtagify tags */
   padding-right: 0.125em;

app/notes/[slug]/page.tsx

@@ -1,11 +1,13 @@
+import { Suspense } from "react";
 import * as runtime from "react/jsx-runtime";
 import { ErrorBoundary } from "react-error-boundary";
 import { evaluate } from "@mdx-js/mdx";
 import Content from "../../../components/Content";
 import Link from "../../../components/Link";
 import Time from "../../../components/Time";
-import HitCounter from "../../../components/HitCounter";
 import Comments from "../../../components/Comments";
+import Loading from "../../../components/Loading";
+import HitCounter from "./counter";
 import { getPostSlugs, getPostData } from "../../../lib/helpers/posts";
 import * as mdxComponents from "../../../lib/helpers/mdx-components";
 import { metadata as defaultMetadata } from "../../layout";
@@ -19,6 +21,9 @@ import styles from "./page.module.css";
 // https://nextjs.org/docs/app/api-reference/functions/generate-static-params#disable-rendering-for-unspecified-paths
 export const dynamicParams = false;
 
+// https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering#using-partial-prerendering
+export const experimental_ppr = true;
+
 export async function generateStaticParams() {
   const slugs = await getPostSlugs();
 
@@ -135,20 +140,21 @@ export default async function Page({ params }: { params: Promise<{ slug: string
 
         {/* only count hits on production site */}
         {process.env.NEXT_PUBLIC_VERCEL_ENV === "production" && (
-          <div
-            className={styles.item}
-            style={{
-              // fix potential layout shift when number of hits loads
-              minWidth: "7em",
-              marginRight: 0,
-            }}
-          >
-            {/* completely hide this block if anything goes wrong on the backend */}
-            <ErrorBoundary fallback={null}>
+          <ErrorBoundary fallback={null}>
+            <div
+              className={styles.item}
+              style={{
+                // fix potential layout shift when number of hits loads
+                minWidth: "7em",
+                marginRight: 0,
+              }}
+            >
               <FiEye className={styles.icon} />
-              <HitCounter slug={`notes/${frontMatter.slug}`} />
-            </ErrorBoundary>
-          </div>
+              <Suspense fallback={<Loading boxes={3} width={20} />}>
+                <HitCounter slug={`notes/${frontMatter.slug}`} />
+              </Suspense>
+            </div>
+          </ErrorBoundary>
         )}
       </div>