properly use vercel data cache for fetch results

app/api/hits/route.ts

@@ -1,9 +1,7 @@
 import { NextResponse } from "next/server";
+import { unstable_cache as cache } from "next/cache";
 import redis from "../../../lib/helpers/redis";
 
-export const dynamic = "force-static";
-export const revalidate = 1800; // 30 mins
-
 export const GET = async (): Promise<
   NextResponse<{
     total: {
@@ -15,32 +13,43 @@ export const GET = async (): Promise<
     }>;
   }>
 > => {
-  // get all keys (aka slugs)
-  const slugs = await redis.scan(0, {
-    match: "hits:*",
-    type: "string",
-    // set an arbitrary yet generous upper limit, just in case...
-    count: 99,
-  });
+  const { total, pages } = await cache(
+    async () => {
+      // get all keys (aka slugs)
+      const slugs = await redis.scan(0, {
+        match: "hits:*",
+        type: "string",
+        // set an arbitrary yet generous upper limit, just in case...
+        count: 99,
+      });
 
-  // get the value (number of hits) for each key (the slug of the page)
-  const values = await redis.mget<string[]>(...slugs[1]);
+      // get the value (number of hits) for each key (the slug of the page)
+      const values = await redis.mget<string[]>(...slugs[1]);
 
-  // pair the slugs with their hit values
-  const pages = slugs[1].map((slug, index) => ({
-    slug: slug.split(":").pop() as string, // remove the "hits:" prefix
-    hits: parseInt(values[index], 10),
-  }));
+      // pair the slugs with their hit values
+      const pages = slugs[1].map((slug, index) => ({
+        slug: slug.split(":").pop() as string, // remove the "hits:" prefix
+        hits: parseInt(values[index], 10),
+      }));
 
-  // sort descending by hits
-  pages.sort((a, b) => b.hits - a.hits);
+      // sort descending by hits
+      pages.sort((a, b) => b.hits - a.hits);
 
-  // calculate total hits
-  const total = { hits: 0 };
-  pages.forEach((page) => {
-    // add these hits to running tally
-    total.hits += page.hits;
-  });
+      // calculate total hits
+      const total = { hits: 0 };
+      pages.forEach((page) => {
+        // add these hits to running tally
+        total.hits += page.hits;
+      });
+
+      return { total, pages };
+    },
+    undefined,
+    {
+      revalidate: 1800, // 30 minutes
+      tags: ["hits"],
+    }
+  )();
 
   return NextResponse.json({ total, pages });
 };

app/projects/page.tsx

@@ -86,8 +86,8 @@ const getRepos = async (): Promise<Project[] | null> => {
             ...options,
             cache: "force-cache",
             next: {
-              // 10 minutes
-              revalidate: 600,
+              revalidate: 600, // 10 minutes
+              tags: ["github-api"],
             },
           });
         },

components/Gist/Gist.tsx

@@ -12,8 +12,8 @@ const Gist = async ({ id, file }: GistProps) => {
   const scriptResponse = await fetch(scriptUrl, {
     cache: "force-cache",
     next: {
-      // cache indefinitely in data store
-      revalidate: false,
+      revalidate: false, // cache indefinitely in data store
+      tags: ["gist"],
     },
   });
 

components/Tweet/Tweet.tsx

@@ -1,4 +1,4 @@
-import { unstable_cache } from "next/cache";
+import { unstable_cache as cache } from "next/cache";
 import Image from "next/image";
 import { EmbeddedTweet, TweetNotFound } from "react-tweet";
 import { fetchTweet as _fetchTweet } from "react-tweet/api";
@@ -12,9 +12,9 @@ export type TweetProps = Omit<ComponentPropsWithoutRef<typeof EmbeddedTweet>, "t
   className?: string;
 };
 
-const fetchTweet = unstable_cache(async (id: string) => _fetchTweet(id), [], {
-  // cache indefinitely
-  revalidate: false,
+const fetchTweet = cache(async (id: string) => _fetchTweet(id), undefined, {
+  revalidate: false, // cache indefinitely
+  tags: ["tweet"],
 });
 
 const Tweet = async ({ id, className, ...rest }: TweetProps) => {