refactor: convert Tweet and Gist to cache components

components/third-party/gist.tsx

@@ -1,3 +1,4 @@
+import { cacheLife, cacheTag } from "next/cache";
 import { cn } from "@/lib/utils";
 
 const Gist = async ({
@@ -6,16 +7,14 @@ const Gist = async ({
   className,
   ...rest
 }: { id: string; file?: string } & React.ComponentProps<"iframe">) => {
+  "use cache";
+  cacheLife("max");
+  cacheTag("gist", `gist-${id}${file ? `-${file}` : ""}`);
+
   const iframeId = `gist-${id}${file ? `-${file}` : ""}`;
 
   const scriptUrl = `https://gist.github.com/${id}.js${file ? `?file=${file}` : ""}`;
-  const scriptResponse = await fetch(scriptUrl, {
-    cache: "force-cache",
-    next: {
-      revalidate: false, // cache indefinitely in data store
-      tags: ["gist"],
-    },
-  });
+  const scriptResponse = await fetch(scriptUrl);
 
   if (!scriptResponse.ok) {
     console.warn(`[gist] failed to fetch js:`, scriptResponse.statusText);

components/third-party/tweet.tsx

@@ -2,18 +2,31 @@ import { cacheLife, cacheTag } from "next/cache";
 import Image from "next/image";
 import type { Tweet as TweetType } from "react-tweet/api";
 import { EmbeddedTweet, TweetNotFound } from "react-tweet";
-import { fetchTweet as _fetchTweet } from "react-tweet/api";
+import { fetchTweet } from "react-tweet/api";
 import { cn } from "@/lib/utils";
 
-const fetchTweet = async (id: string) => {
+const Tweet = async ({ id, className }: { id: string; className?: string }) => {
   "use cache";
-  cacheLife("max"); // cache indefinitely
+  cacheLife("max");
   cacheTag("tweet", `tweet-${id}`);
 
-  return _fetchTweet(id);
-};
+  let data: TweetType | undefined;
+
+  try {
+    const result = await fetchTweet(id);
+    data = result?.data;
+  } catch (error) {
+    console.error(error);
+  }
+
+  if (!data) {
+    return (
+      <div className={cn("my-6 min-h-30 *:mx-auto! *:font-sans!", className)}>
+        <TweetNotFound />
+      </div>
+    );
+  }
 
-const TweetContent = ({ data, className }: { data: TweetType; className?: string }) => {
   return (
     <div
       className={cn(
@@ -36,25 +49,4 @@ const TweetContent = ({ data, className }: { data: TweetType; className?: string
   );
 };
 
-const Tweet = async ({ id, className }: { id: string; className?: string }) => {
-  let data: TweetType | undefined;
-
-  try {
-    const result = await fetchTweet(id);
-    data = result?.data;
-  } catch (error) {
-    console.error(error);
-  }
-
-  if (!data) {
-    return (
-      <div className={cn("my-6 min-h-30 *:mx-auto! *:font-sans!", className)}>
-        <TweetNotFound />
-      </div>
-    );
-  }
-
-  return <TweetContent data={data} className={className} />;
-};
-
 export { Tweet };