Cache ContractCard, speed up /explore pageload

Author: MananTank

apps/dashboard/src/@/components/contracts/contract-card/contract-card.tsx

@@ -1,19 +1,24 @@
+import "server-only";
 import { moduleToBase64 } from "app/(app)/(dashboard)/published-contract/utils/module-base-64";
 import { RocketIcon, ShieldCheckIcon } from "lucide-react";
+import { unstable_cache } from "next/cache";
 import Link from "next/link";
+import { resolveAvatar } from "thirdweb/extensions/ens";
+import { Blobbie } from "thirdweb/react";
 import { fetchPublishedContractVersion } from "@/api/contract/fetch-contracts-with-versions";
-import { ClientOnly } from "@/components/blocks/client-only";
+import { Img } from "@/components/blocks/Img";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
+import { resolveEns } from "@/lib/ens";
 import { replaceDeployerAddress } from "@/lib/publisher-utils";
 import { cn } from "@/lib/utils";
 import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
-import { ContractPublisher } from "./contract-publisher";
+import { shortenIfAddress } from "@/utils/usedapp-external";
 
-interface ContractCardProps {
+type ContractCardProps = {
   publisher: string;
   contractId: string;
   titleOverride?: string;
@@ -29,7 +34,7 @@ interface ContractCardProps {
     moduleId: string;
     version?: string;
   }[];
-}
+};
 
 function getContractUrl(
   {
@@ -74,6 +79,72 @@ function getContractUrl(
   return replaceDeployerAddress(pathName);
 }
 
+const cached_fetchPublishedContractVersion = unstable_cache(
+  async (publisher: string, contractId: string, version: string = "latest") => {
+    const result = await fetchPublishedContractVersion(
+      publisher,
+      contractId,
+      serverThirdwebClient,
+      version,
+    ).catch(() => null);
+
+    if (!result) {
+      return null;
+    }
+
+    const publisherEnsAndAvatar = result.publisher
+      ? await cached_resolvePublisherEnsAndAvatar(result.publisher)
+      : undefined;
+
+    // Note: Do not return BigInt - it can't be serialized and cached by unstable_cache and will throw an error
+    return {
+      name: result.name,
+      displayName: result.displayName,
+      description: result.description,
+      publisher: {
+        address: result.publisher,
+        ensName: publisherEnsAndAvatar?.ensName,
+        ensAvatar: publisherEnsAndAvatar?.ensAvatar,
+      },
+      version: result.version,
+      audit: result.audit,
+    };
+  },
+  ["fetchPublishedContractVersion"],
+  {
+    revalidate: 3600, // 1 hour
+  },
+);
+
+const cached_resolvePublisherEnsAndAvatar = unstable_cache(
+  async (_addressOrEns: string) => {
+    const addressOrEns = replaceDeployerAddress(_addressOrEns);
+    const [ensNameInfo, ensAvatar] = await Promise.allSettled([
+      resolveEns(addressOrEns, serverThirdwebClient),
+      resolveAvatar({
+        client: serverThirdwebClient,
+        name: addressOrEns,
+      }),
+    ]);
+
+    return {
+      ensName:
+        ensNameInfo.status === "fulfilled"
+          ? ensNameInfo.value?.ensName
+          : undefined,
+      address:
+        ensNameInfo.status === "fulfilled"
+          ? ensNameInfo.value?.address
+          : undefined,
+      ensAvatar: ensAvatar.status === "fulfilled" ? ensAvatar.value : undefined,
+    };
+  },
+  ["resolveAddressAndEns"],
+  {
+    revalidate: 3600, // 1 hour
+  },
+);
+
 export async function ContractCard({
   publisher,
   contractId,
@@ -83,12 +154,11 @@ export async function ContractCard({
   modules = [],
   isBeta,
 }: ContractCardProps) {
-  const publishedContractResult = await fetchPublishedContractVersion(
+  const publishedContractResult = await cached_fetchPublishedContractVersion(
     publisher,
     contractId,
-    serverThirdwebClient,
     version,
-  ).catch(() => null);
+  );
 
   if (!publishedContractResult) {
     return null;
@@ -186,13 +256,12 @@ export async function ContractCard({
           !modules?.length && "mt-auto",
         )}
       >
-        {publishedContractResult.publisher && (
-          <ClientOnly ssr={<Skeleton className="size-5 rounded-full" />}>
-            <ContractPublisher
-              addressOrEns={publishedContractResult.publisher}
-              client={getClientThirdwebClient()}
-            />
-          </ClientOnly>
+        {publishedContractResult.publisher.address && (
+          <ContractPublisher
+            address={publishedContractResult.publisher.address}
+            ensName={publishedContractResult.publisher.ensName || undefined}
+            ensAvatar={publishedContractResult.publisher.ensAvatar || undefined}
+          />
         )}
 
         <div className="flex items-center justify-between">
@@ -226,3 +295,31 @@ export async function ContractCard({
 export function ContractCardSkeleton() {
   return <Skeleton className="h-[218px] border" />;
 }
+
+function ContractPublisher(props: {
+  ensName: string | undefined;
+  address: string;
+  ensAvatar: string | undefined;
+}) {
+  const displayName = props.ensName || props.address;
+  return (
+    <Link
+      className="flex shrink-0 items-center gap-1.5 hover:underline"
+      href={`/${displayName}`}
+      target="_blank"
+    >
+      <Img
+        className="size-5 rounded-full object-cover"
+        src={
+          resolveSchemeWithErrorHandler({
+            client: getClientThirdwebClient(),
+            uri: props.ensAvatar,
+          }) || ""
+        }
+        fallback={<Blobbie address={props.address} />}
+      />
+
+      <span className="text-xs"> {shortenIfAddress(displayName)}</span>
+    </Link>
+  );
+}

apps/dashboard/src/@/components/contracts/contract-card/contract-publisher.tsx

@@ -1,3 +1,4 @@
+import "server-only";
 import { ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
 import { Suspense } from "react";
@@ -7,11 +8,7 @@ import {
 } from "@/components/contracts/contract-card/contract-card";
 import type { ExploreCategory } from "../../data";
 
-interface ContractRowProps {
-  category: ExploreCategory;
-}
-
-export function ContractRow({ category }: ContractRowProps) {
+export function ContractRow({ category }: { category: ExploreCategory }) {
   return (
     <section>
       {/* Title, Description + View all link */}