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,6 +13,8 @@ export const GET = async (): Promise<
     }>;
   }>
 > => {
+  const { total, pages } = await cache(
+    async () => {
       // get all keys (aka slugs)
       const slugs = await redis.scan(0, {
         match: "hits:*",
@@ -42,5 +42,14 @@ export const GET = async (): Promise<
         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) => {