Load WHOIS preview through API route 👀

app/lookup/[domain]/certs/page.tsx

@@ -23,6 +23,10 @@ type CertsData = {
   serial_number: string;
 }[];
 
+export const runtime = 'edge';
+// crt.sh located in GB, always use LHR1 for lowest latency
+export const preferredRegion = 'lhr1';
+
 const lookupCerts = async (domain: string): Promise<CertsData> => {
   const response = await fetch(
     'https://crt.sh?' +

app/lookup/[domain]/layout.tsx

@@ -1,14 +1,12 @@
 import { ExternalLinkIcon } from 'lucide-react';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { type FC, type ReactNode, Suspense } from 'react';
+import { type FC, type ReactNode } from 'react';
 
 import RelatedDomains from '@/components/RelatedDomains';
 import ResultsTabs from '@/components/ResultsTabs';
 import SearchForm from '@/components/SearchForm';
-import WhoisQuickInfo, {
-  WhoisQuickInfoPlaceholder,
-} from '@/components/WhoisQuickInfo';
+import WhoisQuickInfo from '@/components/WhoisQuickInfo';
 import isValidDomain from '@/utils/isValidDomain';
 
 type LookupLayoutProps = {
@@ -67,10 +65,7 @@ const LookupLayout: FC<LookupLayoutProps> = ({
         </h1>
 
         <RelatedDomains domain={domain} />
-        <Suspense fallback={<WhoisQuickInfoPlaceholder />}>
-          {/* TODO Add error boundary */}
-          <WhoisQuickInfo domain={domain} />
-        </Suspense>
+        <WhoisQuickInfo domain={domain} />
         <ResultsTabs domain={domain} />
 
         {children}

app/lookup/[domain]/whois-summary/route.ts

@@ -0,0 +1,87 @@
+import whoiser, { WhoisSearchResult } from 'whoiser';
+
+import isValidDomain from '@/utils/isValidDomain';
+
+export type WhoisSummaryResponse = {
+  registrar: string | null;
+  createdAt: string | null;
+  dnssec: string | null;
+};
+
+export type WhoisSummaryErrorResponse = { error: true; message: string };
+
+const getSummary = async (domain: string): Promise<WhoisSummaryResponse> => {
+  // TODO Allow resolving for TLDs
+  if (!isValidDomain(domain)) {
+    return {
+      registrar: null,
+      createdAt: null,
+      dnssec: null,
+    };
+  }
+
+  try {
+    const results = await whoiser(domain, {
+      timeout: 5000,
+    });
+
+    const resultsKey = Object.keys(results).find(
+      // @ts-expect-error
+      (key) => !('error' in results[key])
+    );
+    if (!resultsKey) {
+      throw new Error('No valid results found for domain ' + domain);
+    }
+    const firstResult = results[resultsKey] as WhoisSearchResult;
+
+    return {
+      registrar: firstResult['Registrar']?.toString(),
+      createdAt:
+        firstResult && 'Created Date' in firstResult
+          ? new Date(firstResult['Created Date'].toString()).toLocaleDateString(
+              'en-US'
+            )
+          : null,
+      dnssec: firstResult['DNSSEC']?.toString(),
+    };
+  } catch (error) {
+    console.error(error);
+    return {
+      registrar: null,
+      createdAt: null,
+      dnssec: null,
+    };
+  }
+};
+
+export async function GET(
+  _request: Request,
+  { params }: { params: { domain: string } }
+) {
+  if (!params.domain) {
+    return Response.json(
+      { error: true, message: 'No domain provided' },
+      {
+        status: 400,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+  }
+
+  try {
+    const summary = await getSummary(params.domain);
+    return Response.json(summary);
+  } catch (error) {
+    return Response.json(
+      { error: true, message: 'Error fetching whois summary' },
+      {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+  }
+}

components/WhoisQuickInfo.tsx

@@ -1,96 +1,49 @@
-import { FC } from 'react';
-import whoiser, { type WhoisSearchResult } from 'whoiser';
+'use client';
 
-import isValidDomain from '@/utils/isValidDomain';
+import type { FC } from 'react';
+import useSWR from 'swr';
+
+import { WhoisSummaryResponse } from '@/app/lookup/[domain]/whois-summary/route';
 
 import { Skeleton } from './ui/skeleton';
 
 type WhoisQuickInfoProps = {
   domain: string;
 };
 
-const getSummary = async (
-  domain: string
-): Promise<{ registrar: string; createdAt: string; dnssec: string }> => {
-  // TODO Allow resolving for TLDs
-  if (!isValidDomain(domain)) {
-    return {
-      registrar: 'Unavailable',
-      createdAt: 'Unavailable',
-      dnssec: 'Unavailable',
-    };
-  }
-
-  try {
-    const results = await whoiser(domain, {
-      timeout: 5000,
-    });
-
-    const resultsKey = Object.keys(results).find(
-      // @ts-expect-error
-      (key) => !('error' in results[key])
-    );
-    if (!resultsKey) {
-      throw new Error('No valid results found for domain ' + domain);
-    }
-    const firstResult = results[resultsKey] as WhoisSearchResult;
-
-    return {
-      registrar: firstResult['Registrar']?.toString() || 'Unavailable',
-      createdAt:
-        firstResult && 'Created Date' in firstResult
-          ? new Date(firstResult['Created Date'].toString()).toLocaleDateString(
-              'en-US'
-            )
-          : 'Unavailable',
-      dnssec: firstResult['DNSSEC']?.toString() || 'Unavailable',
-    };
-  } catch (error) {
-    console.error(error);
-    return {
-      registrar: 'Unavailable',
-      createdAt: 'Unavailable',
-      dnssec: 'Unavailable',
-    };
-  }
-};
-
-const WhoisQuickInfo: FC<WhoisQuickInfoProps> = async ({ domain }) => {
-  const results = await getSummary(domain);
+const WhoisQuickInfo: FC<WhoisQuickInfoProps> = ({ domain }) => {
+  const { data, isLoading } = useSWR<WhoisSummaryResponse>(
+    `/lookup/${domain}/whois-summary`
+  );
 
   return (
     <div className="my-8 flex gap-8">
       <div>
         <h3 className="text-xs text-muted-foreground">Registrar</h3>
-        <p className="text-sm">{results.registrar}</p>
+        {isLoading ? (
+          <Skeleton className="mt-1 h-4 w-24 rounded-sm" />
+        ) : (
+          <p className="text-sm">{data?.registrar || 'Unavailable'}</p>
+        )}
       </div>
       <div>
         <h3 className="text-xs text-muted-foreground">Creation Date</h3>
-        <p className="text-sm">{results.createdAt}</p>
+        {isLoading ? (
+          <Skeleton className="w-18 mt-1 h-4 rounded-sm" />
+        ) : (
+          <p className="text-sm">{data?.createdAt || 'Unavailable'}</p>
+        )}
       </div>
       <div>
         <h3 className="text-xs text-muted-foreground">DNSSEC</h3>
-        <p className="text-sm">{results.dnssec}</p>
+        {isLoading ? (
+          <Skeleton className="mt-1 h-4 w-16 rounded-sm" />
+        ) : (
+          <p className="text-sm">{data?.dnssec || 'Unavailable'}</p>
+        )}
       </div>
     </div>
   );
 };
 
 export default WhoisQuickInfo;
-
-export const WhoisQuickInfoPlaceholder: FC = () => (
-  <div className="my-8 flex gap-8">
-    <div>
-      <h3 className="text-xs text-muted-foreground">Registrar</h3>
-      <Skeleton className="mt-1 h-4 w-24 rounded-sm" />
-    </div>
-    <div>
-      <h3 className="text-xs text-muted-foreground">Creation Date</h3>
-      <Skeleton className="w-18 mt-1 h-4 rounded-sm" />
-    </div>
-    <div>
-      <h3 className="text-xs text-muted-foreground">DNSSEC</h3>
-      <Skeleton className="mt-1 h-4 w-16 rounded-sm" />
-    </div>
-  </div>
-);