feat(dashboard): move homepage image fetching to server-side with caching (#4778)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Sarah Bawabe <[email protected]>
Co-authored-by: sarah bawabe <[email protected]>
Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com>

Author: 3 people

packages/fern-dashboard/src/app/api/homepage-images/get/handler.ts

@@ -0,0 +1,44 @@
+import "server-only";
+
+import { unstable_cache } from "next/cache";
+
+import { doesObjectExist, getPresignedUrlForS3Object } from "@/app/services/s3";
+
+import { getHomepageImagesS3BucketName } from "../../../api/homepage-images/constants";
+import generateHomepageImages from "../../../api/homepage-images/generate/handler";
+import { getS3KeyForHomepageScreenshot } from "../../../api/homepage-images/getS3KeyForHomepageScreenshot";
+import type { Theme } from "../../../api/homepage-images/types";
+
+async function getHomepageImageUrlUncached({ url, theme }: { url: string; theme: Theme }) {
+    console.debug(`Getting homepage image for ${url}`);
+    const bucketName = getHomepageImagesS3BucketName();
+    const objectKey = getS3KeyForHomepageScreenshot({ url, theme });
+
+    let screenshotExists = await doesObjectExist({
+        bucketName: bucketName,
+        objectKey
+    });
+
+    if (!screenshotExists) {
+        await generateHomepageImages({ url });
+        // Re-check if the object exists after generation
+        screenshotExists = await doesObjectExist({
+            bucketName: bucketName,
+            objectKey
+        });
+    }
+
+    if (screenshotExists) {
+        return {
+            imageUrl: await getPresignedUrlForS3Object({ bucketName, objectKey })
+        };
+    }
+
+    return null;
+}
+
+export function getHomepageImageUrl({ url, theme }: { url: string; theme: Theme }) {
+    return unstable_cache(() => getHomepageImageUrlUncached({ url, theme }), ["homepage-image-url", url, theme], {
+        revalidate: 3600 * 3 // 3 hours
+    })();
+}

packages/fern-dashboard/src/app/api/homepage-images/get/route.ts

@@ -4,7 +4,6 @@ import type { getMyOrganizations } from "@/app/api/get-my-organizations/route";
 import type { getOrgInvitations } from "@/app/api/get-org-invitations/route";
 import type { getOrgMembers } from "@/app/api/get-org-members/route";
 import type { validateGithubBranch } from "@/app/api/get-validate-github-branch/route";
-import type { getHomepageImageUrl } from "@/app/api/homepage-images/get/route";
 import type { postDocsGithubSource } from "@/app/api/post-docs-github-source/route";
 import type { postCreatePr } from "@/app/api/post-git-create-pr/route";
 import type { generateSignedUploadUrl } from "@/app/api/signed-image-url/generate/route";
@@ -18,8 +17,6 @@ export const DashboardApiClient = {
         typedFetch<getOrgInvitations.Response>("/api/get-org-invitations", request),
     getOrgMembers: (request: getOrgMembers.Request): Promise<getOrgMembers.Response> =>
         typedFetch<getOrgMembers.Response>("/api/get-org-members", request),
-    getHomepageImages: (request: getHomepageImageUrl.Request) =>
-        typedFetch<getHomepageImageUrl.Response>("/api/homepage-images/get", request),
     getDocsUrlOwner: (request: getDocsUrlOwner.Request) =>
         typedFetch<getDocsUrlOwner.Response>("/api/get-docs-url-owner", request),
     postCreatePr: (request: postCreatePr.Request) =>

packages/fern-dashboard/src/app/services/dal/homepage-images/getHomepageImageUrl.ts

@@ -9,7 +9,8 @@ import { Skeleton } from "../ui/skeleton";
 import { DocsSiteAttribute } from "./DocsSiteAttribute";
 import { DocsSiteLink } from "./DocsSiteLink";
 import { DownloadFernDocsButton } from "./DownloadFernDocsButton";
-import { DocsSiteImage } from "./docs-site-image/DocsSiteImage";
+import { DocsSiteImageServer } from "./docs-site-image/DocsSiteImageServer";
+import { SkeletonDocsSiteImage } from "./docs-site-image/SkeletonDocsSiteImage";
 import { FernCliVersion } from "./FernCliVersion";
 import { GithubSource } from "./GithubSource";
 import { PublishToGitHubButton } from "./PublishToGitHubButton";
@@ -26,7 +27,9 @@ export async function DocsSiteOverviewCard({
     return (
         <div className="flex w-full flex-col gap-4">
             <Card className="flex flex-col md:flex-row">
-                <DocsSiteImage docsSite={docsSite} />
+                <Suspense fallback={<SkeletonDocsSiteImage />}>
+                    <DocsSiteImageServer docsSite={docsSite} />
+                </Suspense>
                 <div className="flex min-w-0 flex-col gap-4 text-gray-900">
                     <div className="flex flex-col gap-2">
                         <p>Domains</p>

packages/fern-dashboard/src/app/services/dashboard-api/client.ts

@@ -0,0 +1,96 @@
+import "server-only";
+
+import type { FdrAPI } from "@fern-api/fdr-sdk/client/types";
+import ExclamationCircleIcon from "@heroicons/react/24/outline/ExclamationCircleIcon";
+
+import { getHomepageImageUrl } from "@/app/services/dal/homepage-images/getHomepageImageUrl";
+import { convertFdrDocsSiteUrlToDocsUrl } from "@/utils/getDocsSiteUrl";
+
+import { DocsSiteImageLayout } from "./DocsSiteImageLayout";
+import { SkeletonDocsSiteImage } from "./SkeletonDocsSiteImage";
+
+export declare namespace DocsSiteImageServer {
+    export interface Props {
+        docsSite: FdrAPI.dashboard.DocsSite;
+    }
+}
+
+export async function DocsSiteImageServer({ docsSite }: DocsSiteImageServer.Props) {
+    const docsUrls = docsSite.urls.map(convertFdrDocsSiteUrlToDocsUrl);
+
+    let lightImageUrl: string | null = null;
+    let darkImageUrl: string | null = null;
+    let hasError = false;
+
+    for (const url of docsUrls) {
+        const [lightResult, darkResult] = await Promise.allSettled([
+            getHomepageImageUrl({ url, theme: "light" }),
+            getHomepageImageUrl({ url, theme: "dark" })
+        ]);
+
+        if (lightResult.status === "fulfilled" && lightResult.value?.imageUrl) {
+            lightImageUrl = lightResult.value.imageUrl;
+        } else if (lightResult.status === "rejected") {
+            console.warn(`Failed to get light theme homepage image for ${url}`, lightResult.reason);
+            hasError = true;
+        }
+
+        if (darkResult.status === "fulfilled" && darkResult.value?.imageUrl) {
+            darkImageUrl = darkResult.value.imageUrl;
+        } else if (darkResult.status === "rejected") {
+            console.warn(`Failed to get dark theme homepage image for ${url}`, darkResult.reason);
+            hasError = true;
+        }
+
+        if (lightImageUrl || darkImageUrl) {
+            break;
+        }
+    }
+
+    if (hasError && !lightImageUrl && !darkImageUrl) {
+        return (
+            <DocsSiteImageLayout>
+                <div className="flex flex-1 flex-col items-center justify-center gap-2 bg-white text-gray-900 dark:bg-black">
+                    <ExclamationCircleIcon className="size-10" />
+                    <div>Failed to load</div>
+                </div>
+            </DocsSiteImageLayout>
+        );
+    }
+
+    if (!lightImageUrl && !darkImageUrl) {
+        return <SkeletonDocsSiteImage />;
+    }
+
+    return (
+        <DocsSiteImageLayout docsUrl={docsSite.urls[0]}>
+            <>
+                {lightImageUrl && darkImageUrl ? (
+                    <>
+                        {/*eslint-disable-next-line @next/next/no-img-element */}
+                        <img
+                            src={lightImageUrl}
+                            alt="docs homepage"
+                            className="flex-1 object-cover object-top block dark:hidden"
+                        />
+                        {/*eslint-disable-next-line @next/next/no-img-element */}
+                        <img
+                            src={darkImageUrl}
+                            alt="docs homepage"
+                            className="flex-1 object-cover object-top hidden dark:block"
+                        />
+                    </>
+                ) : (
+                    <>
+                        {/*eslint-disable-next-line @next/next/no-img-element */}
+                        <img
+                            src={lightImageUrl || darkImageUrl || ""}
+                            alt="docs homepage"
+                            className="flex-1 object-cover object-top"
+                        />
+                    </>
+                )}
+            </>
+        </DocsSiteImageLayout>
+    );
+}

packages/fern-dashboard/src/components/docs-page/DocsSiteOverviewCard.tsx

@@ -1,8 +1,6 @@
 import type { getDocsUrlOwner } from "@/app/api/get-docs-url-owner/route";
 import type { getMyOrganizations } from "@/app/api/get-my-organizations/route";
 import type { getOrgMembers } from "@/app/api/get-org-members/route";
-import type { getHomepageImageUrl } from "@/app/api/homepage-images/get/route";
-import type { Theme } from "@/app/api/homepage-images/types";
 import type { Auth0OrgName } from "@/app/services/auth0/types";
 import type { GithubSourceRepo } from "@/app/services/github/types";
 import type { DocsUrl } from "@/utils/types";
@@ -15,8 +13,6 @@ export const ReactQueryKey = {
     orgInvitations: (orgName: Auth0OrgName) => queryKey<OrgInvitation[]>("org-invitations", orgName),
     orgMembers: (orgName: Auth0OrgName) => queryKey<getOrgMembers.Response>("org-members", orgName),
     myOrganizations: () => queryKey<getMyOrganizations.Response>("my-orgs"),
-    homepageImageUrl: ({ orgName, docsUrls, theme }: { orgName: Auth0OrgName; docsUrls: DocsUrl[]; theme: Theme }) =>
-        queryKey<getHomepageImageUrl.Response>("homepage-image-url", orgName, ...docsUrls, theme),
     docsUrlOwner: (docsUrl: DocsUrl) => queryKey<getDocsUrlOwner.Response>("docs-url-owner", docsUrl),
     orgSvgLogo: (svgUrl: string) => queryKey<string>("org-svg", svgUrl),
     githubSourceRepo: (githubUrl: string) => queryKey<GithubSourceRepo>("github-source-repo", githubUrl)