Revert "Use next/after to increment views"

This reverts commit 6561fd1.

app/_components/views/actions.ts

@@ -0,0 +1,55 @@
+"use server";
+
+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 { revalidatePath } from "next/cache";
+import { headers } from "next/headers";
+
+const ratelimit = new Ratelimit({
+  redis: Redis.fromEnv(),
+  limiter: Ratelimit.slidingWindow(1, "60 s"),
+  analytics: true,
+});
+
+export const incrementViews = async (slug: string) => {
+  let ip = "";
+
+  const FALLBACK_IP_ADDRESS = "0.0.0.0";
+  const forwardedFor = headers().get("x-forwarded-for");
+
+  if (forwardedFor) {
+    ip = forwardedFor.split(",")[0] ?? FALLBACK_IP_ADDRESS;
+  } else {
+    ip = headers().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));
+  }
+
+  revalidatePath("/blog", "layout");
+
+  return true;
+};

app/_components/views/index.ts

@@ -0,0 +1 @@
+export { default } from "./views";

app/_components/views/views-incrementer.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useEffect } from "react";
+import { incrementViews } from "./actions";
+
+type ViewsIncrementerProps = {
+  slug: string;
+  incrementOnMount: boolean;
+};
+
+const ViewsIncrementer = ({
+  slug,
+  incrementOnMount,
+}: ViewsIncrementerProps) => {
+  useEffect(() => {
+    if (incrementOnMount) {
+      incrementViews(slug);
+    }
+  }, [slug, incrementOnMount]);
+
+  return null;
+};
+
+export default ViewsIncrementer;

app/_components/views/views.tsx

@@ -0,0 +1,35 @@
+import { db } from "@/_db/connection";
+import { post } from "@/_db/schema";
+import { eq } from "drizzle-orm";
+import { Suspense } from "react";
+import ViewsIncrementer from "./views-incrementer";
+
+type ViewsProps = {
+  slug: string;
+};
+
+const Views = async ({ slug }: ViewsProps) => {
+  const results = await db.select().from(post).where(eq(post.slug, slug));
+  const views = results[0]?.views ?? 0;
+
+  return <span>{views} views</span>;
+};
+
+type ViewsRootProps = {
+  slug: string;
+  incrementOnMount?: boolean;
+};
+
+const ViewsRoot = ({ slug, incrementOnMount = false }: ViewsRootProps) => {
+  return (
+    <>
+      <Suspense fallback={<span className="invisible">0 views</span>}>
+        <Views slug={slug} />
+      </Suspense>
+
+      <ViewsIncrementer slug={slug} incrementOnMount={incrementOnMount} />
+    </>
+  );
+};
+
+export default ViewsRoot;

next.config.js

@@ -9,7 +9,6 @@ const nextConfig = {
   experimental: {
     reactCompiler: true,
     ppr: true,
-    after: true,
   },
   reactStrictMode: true,
   images: {