Use next/after to increment views

app/_components/views.tsx

@@ -0,0 +1,76 @@
+import { db } from "@/_db/connection";
+import { post } from "@/_db/schema";
+import { Ratelimit } from "@upstash/ratelimit";
+import { Redis } from "@upstash/redis";
+import { eq } from "drizzle-orm";
+import { headers } from "next/headers";
+import { unstable_after as after } from "next/server";
+import { Suspense } from "react";
+
+type ViewsProps = {
+  slug: string;
+  increment?: boolean;
+};
+
+const Views = ({ slug, increment = false }: ViewsProps) => {
+  return (
+    <Suspense fallback={<span className="invisible">0 views</span>}>
+      <ViewsBase slug={slug} increment={increment} />
+    </Suspense>
+  );
+};
+
+export default Views;
+
+const ratelimit = new Ratelimit({
+  redis: Redis.fromEnv(),
+  limiter: Ratelimit.slidingWindow(1, "60 s"),
+  analytics: true,
+});
+
+const ViewsBase = async ({ slug, increment }: ViewsProps) => {
+  const headersStore = await headers();
+
+  const results = await db.select().from(post).where(eq(post.slug, slug));
+  const views = results[0]?.views ?? 0;
+
+  if (increment) {
+    after(async () => {
+      let ip = "";
+
+      const FALLBACK_IP_ADDRESS = "0.0.0.0";
+      const forwardedFor = headersStore.get("x-forwarded-for");
+
+      if (forwardedFor) {
+        ip = forwardedFor.split(",")[0] ?? FALLBACK_IP_ADDRESS;
+      } else {
+        ip = headersStore.get("x-real-ip") ?? FALLBACK_IP_ADDRESS;
+      }
+
+      const { success } = await ratelimit.limit(`${ip}-${slug}`);
+
+      if (!success) {
+        return false;
+      }
+
+      // Check if row exists
+      const results = await db.select().from(post).where(eq(post.slug, slug));
+      const result = results[0];
+      if (!result) {
+        // Create the record
+        await db.insert(post).values({
+          slug,
+          views: 1,
+        });
+      } else {
+        // Update the record
+        await db
+          .update(post)
+          .set({ views: result.views + 1 })
+          .where(eq(post.slug, slug));
+      }
+    });
+  }
+
+  return <span>{views} views</span>;
+};

app/blog/[slug]/page.tsx

@@ -77,7 +77,7 @@ const BlogPostPage = async (props: BlogPostPageProps) => {
           {" - "}
         </span>
 
-        <Views slug={post._meta.path} incrementOnMount />
+        <Views slug={post._meta.path} increment />
       </div>
 
       <MDXComponent mdx={post.mdx} />

next.config.mjs

@@ -8,9 +8,8 @@ const withBundleAnalyzer = bundleAnalyzer({
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
+    after: true,
     reactCompiler: true,
-    ppr: true,
-    dynamicIO: true,
   },
   reactStrictMode: true,
   images: {
@@ -41,4 +40,4 @@ const nextConfig = {
   },
 };
 
-export default withBundleAnalyzer(withContentCollections(nextConfig));
+export default withContentCollections(withBundleAnalyzer(nextConfig));