fix tweet embed hydration error

https://jarvis-0a.sentry.io/issues/6491259084/

components/Gist/Gist.tsx

@@ -13,7 +13,7 @@ const Gist = async ({ id, file }: GistProps) => {
     cache: "force-cache",
     next: {
       // cache indefinitely in data store
-      revalidate: 0,
+      revalidate: false,
     },
   });
 

components/Tweet/Tweet.tsx

@@ -1,7 +1,7 @@
-import { Suspense } from "react";
+import { unstable_cache } from "next/cache";
 import Image from "next/image";
-import { EmbeddedTweet, TweetSkeleton, TweetNotFound } from "react-tweet";
-import { getTweet } from "react-tweet/api";
+import { EmbeddedTweet, TweetNotFound } from "react-tweet";
+import { fetchTweet as _fetchTweet } from "react-tweet/api";
 import clsx from "clsx";
 import type { ComponentPropsWithoutRef } from "react";
 
@@ -12,39 +12,37 @@ export type TweetProps = Omit<ComponentPropsWithoutRef<typeof EmbeddedTweet>, "t
   className?: string;
 };
 
+const fetchTweet = unstable_cache(async (id: string) => _fetchTweet(id), [], {
+  // cache indefinitely
+  revalidate: false,
+});
+
 const Tweet = async ({ id, className, ...rest }: TweetProps) => {
   try {
-    const tweet = await getTweet(id, {
-      next: {
-        // cache for 12 hours
-        revalidate: 43200,
-      },
-    });
+    const { data } = await fetchTweet(id);
 
     return (
       <div className={clsx(styles.tweet, className)}>
-        <Suspense fallback={<TweetSkeleton />}>
-          {tweet ? (
-            <EmbeddedTweet
-              tweet={tweet}
-              components={{
-                // https://react-tweet.vercel.app/twitter-theme/api-reference#custom-tweet-components
-                // eslint-disable-next-line jsx-a11y/alt-text
-                AvatarImg: (props) => <Image {...props} unoptimized />,
-                // eslint-disable-next-line jsx-a11y/alt-text
-                MediaImg: (props) => <Image {...props} fill unoptimized />,
-              }}
-              {...rest}
-            />
-          ) : (
-            <TweetNotFound />
-          )}
-        </Suspense>
+        {data ? (
+          <EmbeddedTweet
+            tweet={data}
+            components={{
+              // https://react-tweet.vercel.app/twitter-theme/api-reference#custom-tweet-components
+              // eslint-disable-next-line jsx-a11y/alt-text
+              AvatarImg: (props) => <Image {...props} />,
+              // eslint-disable-next-line jsx-a11y/alt-text
+              MediaImg: (props) => <Image {...props} fill sizes="640w" />,
+            }}
+            {...rest}
+          />
+        ) : (
+          <TweetNotFound />
+        )}
       </div>
     );
-  } catch (
-    error // eslint-disable-line @typescript-eslint/no-unused-vars
-  ) {
+  } catch (error) {
+    console.error(error);
+
     return (
       <div className={clsx(styles.tweet, className)}>
         <TweetNotFound />