fix /api/hits edge caching

app/api/hits/route.ts

@@ -1,7 +1,8 @@
 import { NextResponse } from "next/server";
 import redis from "../../../lib/helpers/redis";
 
-export const revalidate = 900; // 15 mins
+export const dynamic = "force-static";
+export const revalidate = 1800; // 30 mins
 
 export const GET = async (): Promise<
   NextResponse<{
@@ -14,12 +15,15 @@ export const GET = async (): Promise<
     }>;
   }>
 > => {
+  // get all keys (aka slugs)
   const slugs = await redis.scan(0, {
-    count: 50,
+    type: "string",
+    // set an arbitrary yet generous upper limit, just in case...
+    count: 99,
   });
 
-  // fetch all rows from db sorted by most hits
-  const data = await Promise.all(
+  // get the value (number of hits) for each key (the slug of the page) and pair them together
+  const pages = await Promise.all(
     slugs[1].map(async (slug) => {
       const hits = (await redis.get(slug)) as number;
       return {
@@ -30,14 +34,14 @@ export const GET = async (): Promise<
   );
 
   // sort by hits
-  data.sort((a, b) => b.hits - a.hits);
+  pages.sort((a, b) => b.hits - a.hits);
 
   // calculate total hits
   const total = { hits: 0 };
-  data.forEach((page) => {
+  pages.forEach((page) => {
     // add these hits to running tally
     total.hits += page.hits;
   });
 
-  return NextResponse.json({ total, pages: data });
+  return NextResponse.json({ total, pages });
 };

app/notes/[slug]/counter.tsx

@@ -7,6 +7,11 @@ const HitCounter = async ({ slug }: { slug: string }) => {
   await connection();
 
   try {
+    // if this is a new slug, redis will automatically create a new key and set its value to 0 (and then 1, obviously)
+    // https://upstash.com/docs/redis/sdks/ts/commands/string/incr
+    // TODO: maybe don't allow this? or maybe it's fine? kinda unclear how secure this is:
+    // https://nextjs.org/blog/security-nextjs-server-components-actions
+    // https://nextjs.org/docs/app/building-your-application/rendering/server-components
     const hits = await redis.incr(slug);
 
     // we have data!